@extends(template().'layout.auth')

@section('content')
@push('seo')
    <meta name='description' content="{{ @$general->seo_description }}">
@endpush

<style>
    .step-badge {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #e5e7eb;
        background: white;
        color: #9ca3af;
        font-weight: 600;
        transition: all 0.3s ease;
        position: relative;
        z-index: 2;
    }
    .step-badge.active {
        border-color: #0CA24B;
        color: #0CA24B;
    }
    .step-badge.completed {
        background: #0CA24B;
        border-color: #0CA24B;
        color: white;
    }
    .step-line-container {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    .step-line-bg {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        height: 2px;
        background: #e5e7eb;
        width: 100%;
        z-index: 1;
    }
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const steps = document.querySelectorAll(".form-step");
    const nextBtn = document.getElementById("nextBtn");
    const prevBtn = document.getElementById("prevBtn");
    const submitBtn = document.getElementById("submitBtn");
    const stepInstruction = document.getElementById("step-instruction");

    const passwordInput = document.getElementById("password");
    const confirmInput = document.getElementById("password_confirmation");
    const bars = document.querySelectorAll(".strength-bar");
    const matchText = document.getElementById("match-text");

    let currentStep = 0;

    const instructions = [
        "Fill in your personal details",
        "Configure your account settings",
        "Secure your account with a password"
    ];

    /**
     * Updates the Visibility of steps, badges, and buttons
     */
    function updateUI() {
        // Toggle Step Visibility
        steps.forEach((step, index) => {
            step.classList.toggle("hidden", index !== currentStep);
        });

        // Update Progress Badges
        document.querySelectorAll(".step-badge").forEach((badge, index) => {
            if(index === 3) return; // Skip the arrow icon badge

            if (index < currentStep) {
                badge.classList.add("completed");
                badge.classList.remove("active");
                badge.innerHTML = "✓";
            } else if (index === currentStep) {
                badge.classList.add("active");
                badge.classList.remove("completed");
                badge.innerHTML = index + 1;
            } else {
                badge.classList.remove("active", "completed");
                badge.innerHTML = index + 1;
            }
        });

        // Update Text and Navigation
        stepInstruction.innerText = instructions[currentStep];
        prevBtn.classList.toggle("hidden", currentStep === 0);

        if (currentStep === steps.length - 1) {
            nextBtn.classList.add("hidden");
            submitBtn.classList.remove("hidden");
        } else {
            nextBtn.classList.remove("hidden");
            submitBtn.classList.add("hidden");
        }
    }

    /**
     * Detects Laravel Validation errors and jumps to the relevant step
     */
    function autoDetectStep() {
        const errorKeys = @json($errors->getMessages());
        
        if (Object.keys(errorKeys).length > 0) {
            const step2Fields = ['username', 'phone', 'currency'];
            const step3Fields = ['password', 'password_confirmation', 'g-recaptcha-response'];

            if (Object.keys(errorKeys).some(key => step3Fields.includes(key))) {
                currentStep = 2;
            } else if (Object.keys(errorKeys).some(key => step2Fields.includes(key))) {
                currentStep = 1;
            }
            updateUI();
        }
    }

    /**
     * Navigation Logic
     */
    nextBtn.addEventListener("click", function() {
        const currentStepEl = steps[currentStep];
        const inputs = currentStepEl.querySelectorAll("input[required], select[required]");
        let valid = true;

        inputs.forEach(input => {
            if (!input.checkValidity()) {
                valid = false;
                input.classList.add("border-red-400");
                input.reportValidity(); 
            } else {
                input.classList.remove("border-red-400");
            }
        });

        if (valid && currentStep < steps.length - 1) {
            currentStep++;
            updateUI();
        }
    });

    prevBtn.addEventListener("click", function() {
        if (currentStep > 0) {
            currentStep--;
            updateUI();
        }
    });

    /**
     * Password Visibility Toggle
     */
    document.querySelectorAll(".toggle-password").forEach(toggle => {
        toggle.addEventListener("click", function() {
            const input = this.parentElement.querySelector("input");
            const icon = this.querySelector("i");

            if (input.type === "password") {
                input.type = "text";
                icon.classList.replace("fa-eye", "fa-eye-slash");
            } else {
                input.type = "password";
                icon.classList.replace("fa-eye-slash", "fa-eye");
            }
        });
    });

    /**
     * Password Strength Meter
     */
    if (passwordInput) {
        passwordInput.addEventListener("input", function() {
            let val = this.value;
            let score = 0;

            if (val.length > 6) score++;
            if (/[A-Z]/.test(val)) score++;
            if (/[0-9]/.test(val)) score++;
            if (/[!@#$%^&*]/.test(val)) score++;

            bars.forEach((bar, i) => {
                const colors = ["bg-red-500", "bg-orange-500", "bg-yellow-500", "bg-green-500"];
                bar.className = "strength-bar h-full w-1/4 rounded-full transition-all duration-300 " +
                    (i < score ? colors[score - 1] : "bg-gray-200");
            });
        });
    }

    /**
     * Password Confirmation Check
     */
    if (confirmInput) {
        confirmInput.addEventListener("input", function() {
            if (confirmInput.value === passwordInput.value && confirmInput.value !== "") {
                matchText.innerText = "Passwords match";
                matchText.className = "text-[10px] mt-1 font-bold uppercase tracking-wider text-green-500 opacity-100 transition-opacity";
            } else {
                matchText.innerText = "Passwords do not match";
                matchText.className = "text-[10px] mt-1 font-bold uppercase tracking-wider text-red-500 opacity-100 transition-opacity";
            }
        });
    }

    // Initialize the Form
    updateUI();
    autoDetectStep();
});
</script>
<section class="min-h-screen flex flex-col md:flex-row bg-[#f8f9fa] text-gray-800">
    <div class="flex flex-col justify-center items-center w-full md:w-1/2 px-6 py-12">
        
        <div class="w-full flex justify-center mb-8">
            <a href="{{ config('app.homepage') }}" class="block">
                <img src="{{ getFile('logo', @$general->logo) }}" alt="logo" class="w-40 md:w-48 object-contain">
            </a>
        </div>

        <div class="w-full max-w-lg bg-white border border-gray-200 rounded-3xl shadow-sm p-8 md:p-10">
            
            <h2 class="text-xl font-bold text-gray-900 mb-6 flex items-center">
                <span class="w-1 h-6 bg-[#0CA24B] mr-3 rounded-full"></span>
                {{ __('Open Live Account') }}
            </h2>

            <div class="step-line-container mb-10">
                <div class="step-line-bg"></div>
                <div class="step-badge active" id="badge-1">1</div>
                <div class="step-badge" id="badge-2">2</div>
                <div class="step-badge" id="badge-3">3</div>
                <div class="step-badge" id="badge-next">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="9 5l7 7-7 7" />
                    </svg>
                </div>
            </div>

            <p class="text-gray-600 mb-8 font-medium" id="step-instruction">{{ __('Fill in your personal details') }}</p>

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

    {{-- Error Alert for common issues (like Recaptcha) --}}
    @if($errors->any())
        <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-6">
            <p class="text-xs text-red-700 font-bold uppercase">{{ __('Please fix the errors below') }}</p>
        </div>
    @endif
                @csrf

                <div class="form-step" id="step-1">
                    @if (isset(request()->reffer))
                    <div class="mb-6">
                        <label class="block text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">{{ __('Referred By') }}</label>
                        <input type="text" value="{{ request()->reffer }}" name="reffered_by" readonly
                            class="w-full border-b-2 border-gray-100 py-3 bg-transparent text-gray-500 cursor-not-allowed focus:outline-none">
       
                    </div>
                    @endif

                    <div class="mb-6">
                        <label class="block text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">{{ __('Country of Residence') }}</label>
                        <select name="country" class="w-full border-b-2 border-gray-200 py-3 bg-transparent focus:border-[#0CA24B] outline-none transition-colors">
          
         <option value="United States">United States</option>                       
                <option value="Afghanistan">Afghanistan</option>
                <option value="Åland Islands">Åland Islands</option>
                <option value="Albania">Albania</option>
                <option value="Algeria">Algeria</option>
                <option value="American Samoa">American Samoa</option>
                <option value="Andorra">Andorra</option>
                <option value="Angola">Angola</option>
                <option value="Anguilla">Anguilla</option>
                <option value="Antarctica">Antarctica</option>
                <option value="Antigua and Barbuda">Antigua and Barbuda</option>
                <option value="Argentina">Argentina</option>
                <option value="Armenia">Armenia</option>
                <option value="Aruba">Aruba</option>
                <option value="Australia">Australia</option>
                <option value="Austria">Austria</option>
                <option value="Azerbaijan">Azerbaijan</option>
                <option value="Bahamas">Bahamas</option>
                <option value="Bahrain">Bahrain</option>
                <option value="Bangladesh">Bangladesh</option>
                <option value="Barbados">Barbados</option>
                <option value="Belarus">Belarus</option>
                <option value="Belgium">Belgium</option>
                <option value="Belize">Belize</option>
                <option value="Benin">Benin</option>
                <option value="Bermuda">Bermuda</option>
                <option value="Bhutan">Bhutan</option>
                <option value="Bolivia">Bolivia</option>
                <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
                <option value="Botswana">Botswana</option>
                <option value="Bouvet Island">Bouvet Island</option>
                <option value="Brazil">Brazil</option>
                <option value="British Indian Ocean Territory">British Indian Ocean Territory</option>
                <option value="Brunei Darussalam">Brunei Darussalam</option>
                <option value="Bulgaria">Bulgaria</option>
                <option value="Burkina Faso">Burkina Faso</option>
                <option value="Burundi">Burundi</option>
                <option value="Cambodia">Cambodia</option>
                <option value="Cameroon">Cameroon</option>
                <option value="Canada">Canada</option>
                <option value="Cape Verde">Cape Verde</option>
                <option value="Cayman Islands">Cayman Islands</option>
                <option value="Central African Republic">Central African Republic</option>
                <option value="Chad">Chad</option>
                <option value="Chile">Chile</option>
                <option value="China">China</option>
                <option value="Christmas Island">Christmas Island</option>
                <option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
                <option value="Colombia">Colombia</option>
                <option value="Comoros">Comoros</option>
                <option value="Congo">Congo</option>
                <option value="Congo, The Democratic Republic of The">Congo, The Democratic Republic of The</option>
                <option value="Cook Islands">Cook Islands</option>
                <option value="Costa Rica">Costa Rica</option>
                <option value="Cote D'ivoire">Cote D'ivoire</option>
                <option value="Croatia">Croatia</option>
                <option value="Cuba">Cuba</option>
                <option value="Cyprus">Cyprus</option>
                <option value="Czech Republic">Czech Republic</option>
                <option value="Denmark">Denmark</option>
                <option value="Djibouti">Djibouti</option>
                <option value="Dominica">Dominica</option>
                <option value="Dominican Republic">Dominican Republic</option>
                <option value="Ecuador">Ecuador</option>
                <option value="Egypt">Egypt</option>
                <option value="El Salvador">El Salvador</option>
                <option value="Equatorial Guinea">Equatorial Guinea</option>
                <option value="Eritrea">Eritrea</option>
                <option value="Estonia">Estonia</option>
                <option value="Ethiopia">Ethiopia</option>
                <option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option>
                <option value="Faroe Islands">Faroe Islands</option>
                <option value="Fiji">Fiji</option>
                <option value="Finland">Finland</option>
                <option value="France">France</option>
                <option value="French Guiana">French Guiana</option>
                <option value="French Polynesia">French Polynesia</option>
                <option value="French Southern Territories">French Southern Territories</option>
                <option value="Gabon">Gabon</option>
                <option value="Gambia">Gambia</option>
                <option value="Georgia">Georgia</option>
                <option value="Germany">Germany</option>
                <option value="Ghana">Ghana</option>
                <option value="Gibraltar">Gibraltar</option>
                <option value="Greece">Greece</option>
                <option value="Greenland">Greenland</option>
                <option value="Grenada">Grenada</option>
                <option value="Guadeloupe">Guadeloupe</option>
                <option value="Guam">Guam</option>
                <option value="Guatemala">Guatemala</option>
                <option value="Guernsey">Guernsey</option>
                <option value="Guinea">Guinea</option>
                <option value="Guinea-bissau">Guinea-bissau</option>
                <option value="Guyana">Guyana</option>
                <option value="Haiti">Haiti</option>
                <option value="Heard Island and Mcdonald Islands">Heard Island and Mcdonald Islands</option>
                <option value="Holy See (Vatican City State)">Holy See (Vatican City State)</option>
                <option value="Honduras">Honduras</option>
                <option value="Hong Kong">Hong Kong</option>
                <option value="Hungary">Hungary</option>
                <option value="Iceland">Iceland</option>
                <option value="India">India</option>
                <option value="Indonesia">Indonesia</option>
                <option value="Iran, Islamic Republic of">Iran, Islamic Republic of</option>
                <option value="Iraq">Iraq</option>
                <option value="Ireland">Ireland</option>
                <option value="Isle of Man">Isle of Man</option>
                <option value="Israel">Israel</option>
                <option value="Italy">Italy</option>
                <option value="Jamaica">Jamaica</option>
                <option value="Japan">Japan</option>
                <option value="Jersey">Jersey</option>
                <option value="Jordan">Jordan</option>
                <option value="Kazakhstan">Kazakhstan</option>
                <option value="Kenya">Kenya</option>
                <option value="Kiribati">Kiribati</option>
                <option value="Korea, Democratic People's Republic of">Korea, Democratic People's Republic of</option>
                <option value="Korea, Republic of">Korea, Republic of</option>
                <option value="Kuwait">Kuwait</option>
                <option value="Kyrgyzstan">Kyrgyzstan</option>
                <option value="Lao People's Democratic Republic">Lao People's Democratic Republic</option>
                <option value="Latvia">Latvia</option>
                <option value="Lebanon">Lebanon</option>
                <option value="Lesotho">Lesotho</option>
                <option value="Liberia">Liberia</option>
                <option value="Libyan Arab Jamahiriya">Libyan Arab Jamahiriya</option>
                <option value="Liechtenstein">Liechtenstein</option>
                <option value="Lithuania">Lithuania</option>
                <option value="Luxembourg">Luxembourg</option>
                <option value="Macao">Macao</option>
                <option value="Macedonia, The Former Yugoslav Republic of">Macedonia, The Former Yugoslav Republic of</option>
                <option value="Madagascar">Madagascar</option>
                <option value="Malawi">Malawi</option>
                <option value="Malaysia">Malaysia</option>
                <option value="Maldives">Maldives</option>
                <option value="Mali">Mali</option>
                <option value="Malta">Malta</option>
                <option value="Marshall Islands">Marshall Islands</option>
                <option value="Martinique">Martinique</option>
                <option value="Mauritania">Mauritania</option>
                <option value="Mauritius">Mauritius</option>
                <option value="Mayotte">Mayotte</option>
                <option value="Mexico">Mexico</option>
                <option value="Micronesia, Federated States of">Micronesia, Federated States of</option>
                <option value="Moldova, Republic of">Moldova, Republic of</option>
                <option value="Monaco">Monaco</option>
                <option value="Mongolia">Mongolia</option>
                <option value="Montenegro">Montenegro</option>
                <option value="Montserrat">Montserrat</option>
                <option value="Morocco">Morocco</option>
                <option value="Mozambique">Mozambique</option>
                <option value="Myanmar">Myanmar</option>
                <option value="Namibia">Namibia</option>
                <option value="Nauru">Nauru</option>
                <option value="Nepal">Nepal</option>
                <option value="Netherlands">Netherlands</option>
                <option value="Netherlands Antilles">Netherlands Antilles</option>
                <option value="New Caledonia">New Caledonia</option>
                <option value="New Zealand">New Zealand</option>
                <option value="Nicaragua">Nicaragua</option>
                <option value="Niger">Niger</option>
                <option value="Nigeria">Nigeria</option>
                <option value="Niue">Niue</option>
                <option value="Norfolk Island">Norfolk Island</option>
                <option value="Northern Mariana Islands">Northern Mariana Islands</option>
                <option value="Norway">Norway</option>
                <option value="Oman">Oman</option>
                <option value="Pakistan">Pakistan</option>
                <option value="Palau">Palau</option>
                <option value="Palestinian Territory, Occupied">Palestinian Territory, Occupied</option>
                <option value="Panama">Panama</option>
                <option value="Papua New Guinea">Papua New Guinea</option>
                <option value="Paraguay">Paraguay</option>
                <option value="Peru">Peru</option>
                <option value="Philippines">Philippines</option>
                <option value="Pitcairn">Pitcairn</option>
                <option value="Poland">Poland</option>
                <option value="Portugal">Portugal</option>
                <option value="Puerto Rico">Puerto Rico</option>
                <option value="Qatar">Qatar</option>
                <option value="Reunion">Reunion</option>
                <option value="Romania">Romania</option>
                <option value="Russian Federation">Russian Federation</option>
                <option value="Rwanda">Rwanda</option>
                <option value="Saint Helena">Saint Helena</option>
                <option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
                <option value="Saint Lucia">Saint Lucia</option>
                <option value="Saint Pierre and Miquelon">Saint Pierre and Miquelon</option>
                <option value="Saint Vincent and The Grenadines">Saint Vincent and The Grenadines</option>
                <option value="Samoa">Samoa</option>
                <option value="San Marino">San Marino</option>
                <option value="Sao Tome and Principe">Sao Tome and Principe</option>
                <option value="Saudi Arabia">Saudi Arabia</option>
                <option value="Senegal">Senegal</option>
                <option value="Serbia">Serbia</option>
                <option value="Seychelles">Seychelles</option>
                <option value="Sierra Leone">Sierra Leone</option>
                <option value="Singapore">Singapore</option>
                <option value="Slovakia">Slovakia</option>
                <option value="Slovenia">Slovenia</option>
                <option value="Solomon Islands">Solomon Islands</option>
                <option value="Somalia">Somalia</option>
                <option value="South Africa">South Africa</option>
                <option value="South Georgia and The South Sandwich Islands">South Georgia and The South Sandwich Islands</option>
                <option value="Spain">Spain</option>
                <option value="Sri Lanka">Sri Lanka</option>
                <option value="Sudan">Sudan</option>
                <option value="Suriname">Suriname</option>
                <option value="Svalbard and Jan Mayen">Svalbard and Jan Mayen</option>
                <option value="Swaziland">Swaziland</option>
                <option value="Sweden">Sweden</option>
                <option value="Switzerland">Switzerland</option>
                <option value="Syrian Arab Republic">Syrian Arab Republic</option>
                <option value="Taiwan">Taiwan</option>
                <option value="Tajikistan">Tajikistan</option>
                <option value="Tanzania, United Republic of">Tanzania, United Republic of</option>
                <option value="Thailand">Thailand</option>
                <option value="Timor-leste">Timor-leste</option>
                <option value="Togo">Togo</option>
                <option value="Tokelau">Tokelau</option>
                <option value="Tonga">Tonga</option>
                <option value="Trinidad and Tobago">Trinidad and Tobago</option>
                <option value="Tunisia">Tunisia</option>
                <option value="Turkey">Turkey</option>
                <option value="Turkmenistan">Turkmenistan</option>
                <option value="Turks and Caicos Islands">Turks and Caicos Islands</option>
                <option value="Tuvalu">Tuvalu</option>
                <option value="Uganda">Uganda</option>
                <option value="Ukraine">Ukraine</option>
                <option value="United Arab Emirates">United Arab Emirates</option>
                <option value="United Kingdom">United Kingdom</option>
                <option value="United States">United States</option>
                <option value="United States Minor Outlying Islands">United States Minor Outlying Islands</option>
                <option value="Uruguay">Uruguay</option>
                <option value="Uzbekistan">Uzbekistan</option>
                <option value="Vanuatu">Vanuatu</option>
                <option value="Venezuela">Venezuela</option>
                <option value="Viet Nam">Viet Nam</option>
                <option value="Virgin Islands, British">Virgin Islands, British</option>
                <option value="Virgin Islands, U.S.">Virgin Islands, U.S.</option>
                <option value="Wallis and Futuna">Wallis and Futuna</option>
                <option value="Western Sahara">Western Sahara</option>
                <option value="Yemen">Yemen</option>
                <option value="Zambia">Zambia</option>
                <option value="Zimbabwe">Zimbabwe</option>

            
            <!-- Add all countries as needed -->
          </select>
          @error('country')
        <span class="text-[10px] text-red-500 font-bold uppercase mt-1 block">{{ $message }}</span>
    @enderror
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="relative">
                            <input type="text" name="fname" id="fname" required placeholder=" " 
                                class="peer w-full border-b-2 border-gray-200 py-3 bg-transparent focus:border-[#0CA24B] outline-none transition-colors">
                            <label for="fname" class="absolute left-0 top-3 text-gray-400 pointer-events-none transition-all peer-focus:-top-4 peer-focus:text-xs peer-focus:text-[#0CA24B] peer-[:not(:placeholder-shown)]:-top-4 peer-[:not(:placeholder-shown)]:text-xs">
                                {{ __('First Name') }}
                            </label>
                            @error('fname')
        <span class="text-[10px] text-red-500 font-bold uppercase mt-1 block">{{ $message }}</span>
    @enderror
                            
                        </div>
                        <div class="relative">
                            <input type="text" name="lname" id="lname" required placeholder=" " 
                                class="peer w-full border-b-2 border-gray-200 py-3 bg-transparent focus:border-[#0CA24B] outline-none transition-colors">
                            <label for="lname" class="absolute left-0 top-3 text-gray-400 pointer-events-none transition-all peer-focus:-top-4 peer-focus:text-xs peer-focus:text-[#0CA24B] peer-[:not(:placeholder-shown)]:-top-4 peer-[:not(:placeholder-shown)]:text-xs">
                                {{ __('Last Name') }}
                            </label>
                            @error('lname')
        <span class="text-[10px] text-red-500 font-bold uppercase mt-1 block">{{ $message }}</span>
    @enderror
                        </div>
                    </div>

                    <div class="relative mt-6">
                        <input type="email" name="email" id="email" required placeholder=" " 
                            class="peer w-full border-b-2 border-gray-200 py-3 bg-transparent focus:border-[#0CA24B] outline-none transition-colors">
                        <label for="email" class="absolute left-0 top-3 text-gray-400 pointer-events-none transition-all peer-focus:-top-4 peer-focus:text-xs peer-focus:text-[#0CA24B] peer-[:not(:placeholder-shown)]:-top-4 peer-[:not(:placeholder-shown)]:text-xs">
                            {{ __('Email') }}
                        </label>
                        @error('email')
        <span class="text-[10px] text-red-500 font-bold uppercase mt-1 block">{{ $message }}</span>
    @enderror
                    </div>
                </div>

                <div class="form-step hidden" id="step-2">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="relative">
                            <input type="text" name="username" id="username" placeholder=" " 
                                class="peer w-full border-b-2 border-gray-200 py-3 bg-transparent focus:border-[#0CA24B] outline-none transition-colors">
                            <label for="username" class="absolute left-0 top-3 text-gray-400 pointer-events-none transition-all peer-focus:-top-4 peer-focus:text-xs peer-focus:text-[#0CA24B] peer-[:not(:placeholder-shown)]:-top-4 peer-[:not(:placeholder-shown)]:text-xs">
                                {{ __('Username') }}
                            </label>
                            @error('username')
        <span class="text-[10px] text-red-500 font-bold uppercase mt-1 block">{{ $message }}</span>
    @enderror
                        </div>
                        <div class="relative">
                            <input type="number" name="phone" id="phone" placeholder=" " 
                                class="peer w-full border-b-2 border-gray-200 py-3 bg-transparent focus:border-[#0CA24B] outline-none transition-colors">
                            <label for="phone" class="absolute left-0 top-3 text-gray-400 pointer-events-none transition-all peer-focus:-top-4 peer-focus:text-xs peer-focus:text-[#0CA24B] peer-[:not(:placeholder-shown)]:-top-4 peer-[:not(:placeholder-shown)]:text-xs">
                                {{ __('Mobile') }}
                            </label>
                            @error('phone')
        <span class="text-[10px] text-red-500 font-bold uppercase mt-1 block">{{ $message }}</span>
    @enderror
                        </div>
                    </div>
                    
                    <div class="mt-6">
                        <label class="block text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">{{ __('Account Currency') }}</label>
                        <select name="currency" class="w-full border-b-2 border-gray-200 py-3 bg-transparent focus:border-[#0CA24B] outline-none transition-colors">
         
<option value="$">US Dollar</option>
<option value="؋">Afghan Afghani</option>
<option value="L">Albanian Lek</option>
<option value="دج">Algerian Dinar</option>
<option value="Kz">Angolan Kwanza</option>
<option value="$">Argentine Peso</option>
<option value="֏">Armenian Dram</option>
<option value="ƒ">Aruban Florin</option>
<option value="$">Australian Dollar</option>
<option value="₼">Azerbaijani Manat</option>
<option value="$">Bahamian Dollar</option>
<option value=".د.ب">Bahraini Dinar</option>
<option value="৳">Bangladeshi Taka</option>
<option value="$">Barbadian Dollar</option>
<option value="Br">Belarusian Ruble</option>
<option value="Fr">Belgian Franc</option>
<option value="$">Belize Dollar</option>
<option value="$">Bermudan Dollar</option>
<option value="Nu.">Bhutanese Ngultrum</option>
<option value="₿">Bitcoin</option>
<option value="Bs.">Bolivian Boliviano</option>
<option value="KM">Bosnia-Herzegovina Convertible Mark</option>
<option value="P">Botswanan Pula</option>
<option value="R$">Brazilian Real</option>
<option value="£">British Pound Sterling</option>
<option value="$">Brunei Dollar</option>
<option value="лв">Bulgarian Lev</option>
<option value="Fr">Burundian Franc</option>
<option value="៛">Cambodian Riel</option>
<option value="$">Canadian Dollar</option>
<option value="Esc">Cape Verdean Escudo</option>
<option value="$">Cayman Islands Dollar</option>
<option value="Fr">CFA Franc BCEAO</option>
<option value="Fr">CFA Franc BEAC</option>
<option value="Fr">CFP Franc</option>
<option value="$">Chilean Peso</option>
<option value="¥">Chinese Yuan</option>
<option value="$">Colombian Peso</option>
<option value="Fr">Comorian Franc</option>
<option value="Fr">Congolese Franc</option>
<option value="₡">Costa Rican Colón</option>
<option value="kn">Croatian Kuna</option>
<option value="$">Cuban Convertible Peso</option>
<option value="Kč">Czech Koruna</option>
<option value="kr">Danish Krone</option>
<option value="Fr">Djiboutian Franc</option>
<option value="$">Dominican Peso</option>
<option value="$">East Caribbean Dollar</option>
<option value="£">Egyptian Pound</option>
<option value="Nfk">Eritrean Nakfa</option>
<option value="kr">Estonian Kroon</option>
<option value="Br">Ethiopian Birr</option>
<option value="€">Euro</option>
<option value="£">Falkland Islands Pound</option>
<option value="$">Fijian Dollar</option>
<option value="D">Gambian Dalasi</option>
<option value="₾">Georgian Lari</option>
<option value="DM">German Mark</option>
<option value="₵">Ghanaian Cedi</option>
<option value="£">Gibraltar Pound</option>
<option value="₯">Greek Drachma</option>
<option value="Q">Guatemalan Quetzal</option>
<option value="Fr">Guinean Franc</option>
<option value="$">Guyanaese Dollar</option>
<option value="G">Haitian Gourde</option>
<option value="L">Honduran Lempira</option>
<option value="$">Hong Kong Dollar</option>
<option value="Ft">Hungarian Forint</option>
<option value="kr">Icelandic Króna</option>
<option value="₹">Indian Rupee</option>
<option value="Rp">Indonesian Rupiah</option>
<option value="﷼">Iranian Rial</option>
<option value="ع.د">Iraqi Dinar</option>
<option value="₪">Israeli Shekel</option>
<option value="₤">Italian Lira</option>
<option value="$">Jamaican Dollar</option>
<option value="¥">Japanese Yen</option>
<option value="د.ا">Jordanian Dinar</option>
<option value="₸">Kazakhstani Tenge</option>
<option value="Sh">Kenyan Shilling</option>
<option value="د.ك">Kuwaiti Dinar</option>
<option value="сом">Kyrgystani Som</option>
<option value="₭">Laotian Kip</option>
<option value="Ls">Latvian Lats</option>
<option value="ل.ل">Lebanese Pound</option>
<option value="L">Lesotho Loti</option>
<option value="$">Liberian Dollar</option>
<option value="ل.د">Libyan Dinar</option>
<option value="Lt">Lithuanian Litas</option>
<option value="P">Macanese Pataca</option>
<option value="ден">Macedonian Denar</option>
<option value="Ar">Malagasy Ariary</option>
<option value="MK">Malawian Kwacha</option>
<option value="RM">Malaysian Ringgit</option>
<option value="Rf">Maldivian Rufiyaa</option>
<option value="UM">Mauritanian Ouguiya</option>
<option value="₨">Mauritian Rupee</option>
<option value="$">Mexican Peso</option>
<option value="L">Moldovan Leu</option>
<option value="₮">Mongolian Tugrik</option>
<option value="د.م.">Moroccan Dirham</option>
<option value="MTn">Mozambican Metical</option>
<option value="K">Myanmar Kyat</option>
<option value="$">Namibian Dollar</option>
<option value="₨">Nepalese Rupee</option>
<option value="ƒ">Netherlands Antillean Guilder</option>
<option value="$">New Taiwan Dollar</option>
<option value="$">New Zealand Dollar</option>
<option value="C$">Nicaraguan Córdoba</option>
<option value="₦">Nigerian Naira</option>
<option value="₩">North Korean Won</option>
<option value="kr">Norwegian Krone</option>
<option value="﷼">Omani Rial</option>
<option value="₨">Pakistani Rupee</option>
<option value="B/.">Panamanian Balboa</option>
<option value="K">Papua New Guinean Kina</option>
<option value="Gs">Paraguayan Guarani</option>
<option value="S/.">Peruvian Sol</option>
<option value="₱">Philippine Peso</option>
<option value="zł">Polish Zloty</option>
<option value="﷼">Qatari Rial</option>
<option value="lei">Romanian Leu</option>
<option value="₽">Russian Ruble</option>
<option value="Fr">Rwandan Franc</option>
<option value="₡">Salvadoran Colón</option>
<option value="WS$">Samoan Tala</option>
<option value="﷼">Saudi Riyal</option>
<option value="дин">Serbian Dinar</option>
<option value="₨">Seychellois Rupee</option>
<option value="Le">Sierra Leonean Leone</option>
<option value="$">Singapore Dollar</option>
<option value="Sk">Slovak Koruna</option>
<option value="$">Solomon Islands Dollar</option>
<option value="Sh">Somali Shilling</option>
<option value="R">South African Rand</option>
<option value="₩">South Korean Won</option>
<option value="SDR">Special Drawing Rights</option>
<option value="₨">Sri Lankan Rupee</option>
<option value="£">St. Helena Pound</option>
<option value="£">Sudanese Pound</option>
<option value="$">Surinamese Dollar</option>
<option value="E">Swazi Lilangeni</option>
<option value="kr">Swedish Krona</option>
<option value="CHF">Swiss Franc</option>
<option value="£">Syrian Pound</option>
<option value="Db">São Tomé and Príncipe Dobra</option>
<option value="ЅМ">Tajikistani Somoni</option>
<option value="Sh">Tanzanian Shilling</option>
<option value="฿">Thai Baht</option>
<option value="T$">Tongan Paʻanga</option>
<option value="$">Trinidad & Tobago Dollar</option>
<option value="د.ت">Tunisian Dinar</option>
<option value="₺">Turkish Lira</option>
<option value="m">Turkmenistani Manat</option>
<option value="Sh">Ugandan Shilling</option>
<option value="₴">Ukrainian Hryvnia</option>
<option value="د.إ">UAE Dirham</option>
<option value="$">Uruguayan Peso</option>
<option value="лв">Uzbekistan Som</option>
<option value="Vt">Vanuatu Vatu</option>
<option value="Bs">Venezuelan Bolívar</option>
<option value="₫">Vietnamese Dong</option>
<option value="﷼">Yemeni Rial</option>
<option value="ZK">Zambian Kwacha</option>
              <!-- Add all currencies as needed -->
            </select>
            @error('currency')
        <span class="text-[10px] text-red-500 font-bold uppercase mt-1 block">{{ $message }}</span>
    @enderror
                    </div>
                </div>
<div class="form-step hidden" id="step-3">
    <div class="relative mb-2">
        <input type="password" id="password" name="password" placeholder=" " 
            class="peer w-full border-b-2 border-gray-200 py-3 bg-transparent focus:border-[#0CA24B] outline-none transition-colors pr-10">
            
        <label for="password" class="absolute left-0 top-3 text-gray-400 pointer-events-none transition-all peer-focus:-top-4 peer-focus:text-xs peer-focus:text-[#0CA24B] peer-[:not(:placeholder-shown)]:-top-4 peer-[:not(:placeholder-shown)]:text-xs">
            {{ __('Password') }}
        </label>
        <span class="absolute right-0 top-3 cursor-pointer z-10 toggle-password">
            <i class="fas fa-eye text-gray-400"></i>
        </span>
        @error('password')
<span class="text-[10px] text-red-500 font-bold uppercase mt-1 block">{{ $message }}</span>
@enderror
    </div>

    <div class="mb-6">
        <div class="flex h-1 w-full gap-1 mt-2">
            <div class="strength-bar h-full w-1/4 rounded-full bg-gray-200 transition-all duration-300"></div>
            <div class="strength-bar h-full w-1/4 rounded-full bg-gray-200 transition-all duration-300"></div>
            <div class="strength-bar h-full w-1/4 rounded-full bg-gray-200 transition-all duration-300"></div>
            <div class="strength-bar h-full w-1/4 rounded-full bg-gray-200 transition-all duration-300"></div>
        </div>
        <p id="strength-text" class="text-[10px] mt-1 text-gray-400 uppercase font-bold tracking-wider">{{ __('Strength') }}</p>
    </div>
    
    <div class="relative mb-1">
        <input type="password" id="password_confirmation" name="password_confirmation" placeholder=" " 
            class="peer w-full border-b-2 border-gray-200 py-3 bg-transparent focus:border-[#0CA24B] outline-none transition-colors pr-10">
        <label for="password_confirmation" class="absolute left-0 top-3 text-gray-400 pointer-events-none transition-all peer-focus:-top-4 peer-focus:text-xs peer-focus:text-[#0CA24B] peer-[:not(:placeholder-shown)]:-top-4 peer-[:not(:placeholder-shown)]:text-xs">
            {{ __('Confirm Password') }}
        </label>
        <span class="absolute right-0 top-3 cursor-pointer z-10 toggle-password">
            <i class="fas fa-eye text-gray-400"></i>
        </span>
        @error('password_confirmation')
<span class="text-[10px] text-red-500 font-bold uppercase mt-1 block">{{ $message }}</span>
@enderror
    </div>
    <p id="match-text" class="text-[10px] mb-6 font-bold uppercase tracking-wider transition-opacity opacity-0"></p>

    @if (@$general->allow_recaptcha==1)
    <div class="mb-4">
        <script src="https://www.google.com/recaptcha/api.js"></script>
        <div class="g-recaptcha" data-sitekey="{{ @$general->recaptcha_key }}"></div>
    </div>
    @endif
</div>

                <div class="flex flex-col gap-4 pt-8">
                    <button type="button" id="nextBtn" class="w-full py-4 rounded-xl bg-[#0CA24B] font-bold text-white shadow-lg shadow-green-200 hover:bg-green-600 transition-all transform active:scale-95">
                        {{ __('Continue') }}
                    </button>
                    <button type="submit" id="submitBtn" class="hidden w-full py-4 rounded-xl bg-[#0CA24B] font-bold text-white shadow-lg shadow-green-200 hover:bg-green-600 transition-all transform active:scale-95">
                        {{ __('Complete Registration') }}
                    </button>
                    <button type="button" id="prevBtn" class="hidden w-full py-2 text-sm font-semibold text-gray-400 hover:text-gray-600 transition">
                        {{ __('Back to previous step') }}
                    </button>
                </div>

                <p class="text-center text-gray-500 text-sm mt-8">
                    {{ __('Already have an account?') }}
                    <a href="{{ route('user.login') }}" class="text-[#0CA24B] font-bold hover:underline ml-1">{{ __('Login') }}</a>
                </p>
            </form>
        </div>
    </div>

    <div class="hidden md:flex w-1/2 bg-[#0CA24B] relative overflow-hidden">
        <div class="absolute inset-0 bg-black/10"></div>
        <div class="relative z-10 flex flex-col justify-center items-center w-full h-full p-16 text-center text-white">
             <div class="bg-white/10 p-4 rounded-3xl backdrop-blur-md border border-white/20 mb-8">
                <img src="{{ getFile('frontendlogin', @$general->frontend_login_image) }}" alt="image" class="max-w-xs rounded-2xl shadow-2xl">
             </div>
            <h2 class="text-4xl font-extrabold mb-4">{{ __('Start Trading Globally') }}</h2>
            <p class="text-green-50 max-w-sm text-lg opacity-90">{{ __('Experience secure, ultra-fast execution and institutional-grade liquidity.') }}</p>
        </div>
        <div class="absolute -bottom-20 -right-20 w-80 h-80 bg-white/10 rounded-full"></div>
        <div class="absolute -top-20 -left-20 w-60 h-60 bg-white/5 rounded-full"></div>
    </div>
</section>

@endsection