@extends('layouts.landing_page.master')

@section('title', __('Register'))

@push('styles')
    <meta http-equiv="cache-control" content="private, max-age=0, no-cache">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="expires" content="0">
    <link href="{{ asset('frontend/styles/css/page-css/login-register-page.css') }}" rel="stylesheet">
@endpush

@section('content')
    <section id="signin" class="h-100vh">
        <div class="container bgm-shadows">
            <div class="row">
                <div class="col-lg-7 col-md-12 col-sm-12 col-12 my-auto">
                    <img class="d-block" src="{{ asset('frontend/images/logo.png') }}" alt="..." width="95px"
                         height="95px" />
                    <h2 class="lgm-title mt-2">{{ __('Sign Up To Continue') }}</h2>
                </div>
                <div class="col-lg-1 col-md-12 col-sm-12 col-1"></div>
                <div class="col-lg-4 col-md-12 col-sm-12 col-12">
                    <form method="POST" action="{{ url('user/register') }}" id="registerForm" onsubmit="return false;">
                        <input type="hidden" name="sponsor_id">
                        <div id="form1" class="grid md:grid-cols-1 gap-3">
                            <div class="grid md:grid-cols-2 gap-3">
                                <div class="relative z-0 w-full mb-1 group">
                                    <input type="text" name="first_name" id="first_name" data-character-limit="20"
                                           class="form-control name-validation border-clr p-2.5 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-700 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
                                           placeholder="" aria-describedby="inputGroupPrependFirst" />
                                    <label for="first_name" class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white">{{ __('First Name') }}</label>
                                </div>
                                <div class="relative z-0 w-full mb-1 group">
                                    <input type="text" name="last_name"
                                           id="last_name" data-character-limit="20"
                                           class="form-control name-validation border-clr p-2.5 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-700 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
                                           placeholder="" aria-describedby="inputGroupPrependLast" />
                                    <label for="last_name" class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white">{{ __('Last Name') }}</label>
                                </div>
                            </div>

                            <div class="relative z-0 w-full mb-1 group">
                                <input type="text" name="username"
                                       id="username"
                                       class="form-control account-username-validation border-clr p-2.5 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-700 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
                                       placeholder="" aria-describedby="inputGroupPrependUsername" />
                                <label for="username" class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white">{{ __('Username') }}</label>
                            </div>

                            <div class="relative z-0 w-full group">
                                <input type="text" name="sponsor_username"
                                       id="sponsor_username"
                                       class="form-control account-username-validation border-clr p-2.5 w-full text-sm text-gray-900 @if(isset($sponserUser->details->username)) bg-gray-100 @else bg-transparent @endif border-0 border-b-2 border-gray-700 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
                                       placeholder="" aria-describedby="inputGroupPrependsponser" value="{{ $sponserUser->details->username ?? '' }}"
                                       @if(isset($sponserUser->details->username)) disabled @endif  />
                                <label for="sponsor_username" class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white">{{ __('Sponsor Username') }}</label>
                            </div>

                            <button type="button" id="nextBtn" class="w-full primarym-btn text-center mt1">{!! renderIconHtml('next') !!}{{ __('Next') }}</button>
                        </div>

                        <div id="form2" class="grid md:grid-cols-1 gap-3" style="display: none;">
                            <div class="relative z-0 w-full mb-1 group">
                                <select id="country_id" name="country_id" class="form-select select2 border-clr p-2.5 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-700 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer">
                                    <option value="">Select Country</option>
                                    @foreach ($country as $row)
                                        <option value="{{$row->id}}" {{isset($user) && $user->country_id == $row->id ? 'selected' : ''}}>{{$row->country_name}}</option>
                                    @endforeach
                                </select>
                                <label for="country" class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white">{{ __('Country') }}</label>
                            </div>
                            <div class="relative z-0 w-full mb-1 group state-input">
                                <select id="state_id" name="state_id" class="form-select select2 border-clr p-2.5 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-700 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer">
                                    <option value="">Select Region / State / Province</option>
                                </select>
                                <label for="state" class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white">{{ __('Region / State / Province') }}</label>
                            </div>
                            <div class="relative z-0 w-full mb-1 group">
                                <input type="text" name="city"
                                       id="city" data-character-limit="50"
                                       class="form-control name-validation border-clr p-2.5 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-700 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
                                       placeholder=""  aria-describedby="inputGroupPrependemail" />
                                <label for="city" class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white">{{ __('City') }}</label>
                            </div>

                            <button type="button" id="nextBtn2" class="w-full primarym-btn text-center mt1">{!! renderIconHtml('next') !!}{{ __('Next') }}</button>

                        </div>

                        <div id="form3" class="grid md:grid-cols-1 gap-3" style="display: none;">
                            <div class="form-group mb-2">
                                <div class="relative z-0 w-full mb-1 group">
                                    <input type="text" name="email"
                                           id="email"
                                           class="form-control email-validation border-clr p-2.5 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-700 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
                                           placeholder=""  aria-describedby="inputGroupPrependemail" />
                                    <label for="email" class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white">{{ __('Email') }}</label>
                                    <span id="email_error" class="custom-error m-0 p-0"></span>
                                </div>
                            </div>


                            <div class="form-group mb-2">
                                <div class="relative z-0 w-full group">
                                    <input type="password" id="password" name="password" class="form-control border-clr password-validation p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-0 focus:ring-0 focus:border-indigo-400 peer pl-15 password login-form signin-input w-full" aria-label="password" placeholder="" value="" autocomplete="off">
                                    <label for="password" class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('Password') }}</label>
                                    <div class="input-group-prepend rounded-right"> <i class="cursor-pointer bi bi-eye" onclick="passwordToText($(this))"></i> </div>
                                </div>
                                <span id="password_error" class="custom-error m-0 p-0"></span>
                            </div>

                            <div class="form-group mb-2">
                                <div class="relative z-0 w-full group">
                                    <input type="password" id="password_confirmation" name="password_confirmation" class="form-control border-clr p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-0 focus:ring-0 focus:border-indigo-400 peer pl-15 password login-form signin-input w-full" aria-label="password" placeholder="" value="" autocomplete="off">
                                    <label for="password_confirmation" class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('Confirm Password') }}</label>
                                    <div class="input-group-prepend rounded-right"> <i class="cursor-pointer bi bi-eye" onclick="passwordToText($(this))"></i> </div>
                                </div>
                                <span id="password_confirmation_error" class="custom-error m-0 p-0"></span>
                            </div>

                            <div class="items-center">
                                <div class="flex">
                                <input id="termsofuse" name="termsofuse" type="checkbox" value="Yes" class="w-4 h-4 text-amber-900-600 bg-gray-100 border-gray-300 rounded dark:ring-offset-ring-yellow-950  dark:bg-gray-700 dark:border-gray-600">