@extends('layout')
@section('title')
    <title>Join us</title>
@endsection
@section('user-content')

<!--===BREADCRUMB PART START====-->
  <section class="wsus__breadcrumb" style="background: url({{ url($banner_image) }});">
    <div class="wsus_bread_overlay">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <h4>Join</h4>
                    <nav style="--bs-breadcrumb-divider: '-';" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">{{__('user.Home')}}</a></li>
                            <li class="breadcrumb-item active" aria-current="page">join as professional</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</section>
<!--===BREADCRUMB PART END====-->


<!--=======LOGON PART START=========-->
<section class="wsus__logon mt_45 mb_45">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-5 col-md-6 d-none">
                <div class="wsus__login_form">
                    <h3>{{__('user.If You Have An Account? Login Here')}}</h3>
                    <form id="loginFormSubmit">
                        @csrf
                        <div class="form-group">
                            <div class="input-group input-group-lg">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fad fa-user-circle"></i>
                                    </span>
                                </div>
                                <input id="loginEmail" class="form-control form-control-lg" type="email" name="email" placeholder="{{__('user.Email')}}" value="{{ env('PROJECT_MODE')==0 ? 'agent@gmail.com' : '' }}">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group input-group-lg">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-key"></i>
                                    </span>
                                </div>
                                <input id="loginPassword" class="form-control form-control-lg" type="password" name="password" placeholder="{{__('user.Password')}}" value="{{ env('PROJECT_MODE')==0 ? 1234 : '' }}">
                            </div>
                        </div>

                        @if($recaptcha_setting->status==1)
                            <div class="form-group mt-2">
                                <div class="input-group input-group-lg">
                                    <div class="g-recaptcha" data-sitekey="{{ $recaptcha_setting->site_key }}"></div>
                                </div>
                            </div>
                            @endif

                        <div class="wsus__check_area">
                            <div class="form-check">
                                <input name="remember" class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                                <label class="form-check-label" for="flexCheckDefault">
                                    {{__('user.Remember Me')}}
                                </label>
                            </div>
                            <a href="{{ route('forget.password') }}">{{__('user.Forget Your Password ?')}}</a>
                        </div>
                        <div class="wsus__reg_forget">
                            <button class="common_btn" type="submit" id="userLoginBtn">{{__('user.Login')}}</button>
                        </div>
                    </form>

                    <p class="wsus__or">or</p>

                    @if ($socialLogin->is_gmail == 1 || $socialLogin->is_facebook == 1)
                    <ul class="wsus__login_link">
                        @if ($socialLogin->is_gmail == 1)
                        <li><a class="google" href="{{ route('login-google') }}"><i class="fab fa-google"></i> google</a></li>
                        @endif
                        @if ($socialLogin->is_facebook == 1)
                        <li><a class="facebook" href="{{ route('login-facebook') }}"><i class="fab fa-facebook-f"></i> facebook</a></li>
                        @endif
                    </ul>
                    @endif

                </div>
            </div>
            <div class="col-xl-6 col-md-7 offset-xl-1 ml_to_mr">
                <div class="wsus__login_form ">
                    <h3>join as professional</h3>
                    <form id="registerFormSubmit">
                        @csrf
                        <div class="form-group">
                            <div class="input-group input-group-lg">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fad fa-user-circle"></i>
                                    </span>
                                </div>
                                <input class="form-control form-control-lg" type="text" name="name" id="regName" placeholder="Name">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="input-group input-group-lg">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-envelope"></i>
                                    </span>
                                </div>
                                <input class="form-control form-control-lg" type="text" id="mobile" name="mobile" placeholder="Mobile">
                            </div>
                        </div> 
                        
                        
                        <div class="form-group">
                            <div class="input-group input-group-lg">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-envelope"></i>
                                    </span>
                                </div>
                                <input class="form-control form-control-lg" type="text" id="profession" name="profession" placeholder="profession">
                            </div>
                        </div>
                        
                        
                        <div class="form-group">
                            <div class="input-group input-group-lg">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-envelope"></i>
                                    </span>
                                </div>
                                <input class="form-control form-control-lg" type="text" id="address" name="address" placeholder="address">
                            </div>
                        </div>
                        

                        @if($recaptcha_setting->status==1)
                        <div class="form-group mt-2">
                            <div class="input-group input-group-lg">
                                <div class="g-recaptcha" data-sitekey="{{ $recaptcha_setting->site_key }}"></div>
                            </div>
                        </div>
                        @endif

                        <button id="registerBtn" class="common_btn" type="submit"><i id="reg-spinner" class="loading-icon fa fa-spin fa-spinner d-none"></i> {{__('user.Register')}}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<!--======= LOGON PART END========-->



@php
    $search_url = request()->fullUrl();
@endphp


<script>
    (function($) {
    "use strict";
    $(document).ready(function () {
        $("#loginFormSubmit").on('submit',function(e) {
            e.preventDefault();
            $.ajax({
                url: "{{ route('login') }}",
                type:"post",
                data:$('#loginFormSubmit').serialize(),
                success:function(response){
                    if(response.success){
                        window.location.href = "{{ route('user.dashboard')}}";
                        toastr.success(response.success)

                    }
                    if(response.error){
                        toastr.error(response.error)

                        var query_url='';
                        window.location.href = query_url;

                    }
                },
                error:function(response){
                    if(response.responseJSON.errors.email)toastr.error(response.responseJSON.errors.email[0])
                    if(response.responseJSON.errors.password){
                        toastr.error(response.responseJSON.errors.password[0])
                    }

                    if(!response.responseJSON.errors.email && !response.responseJSON.errors.password){

                        toastr.error("{{__('user.Please Complete the recaptcha to submit the form')}}")
                    }


                }

            });


        })

        $("#registerFormSubmit").on('submit',function(e) {
            e.preventDefault();
            console.log('hiu');

                // project demo mode check
                var isDemo="{{ env('PROJECT_MODE') }}"
                var demoNotify="{{ env('NOTIFY_TEXT') }}"
                if(isDemo==0){
                    toastr.error(demoNotify);
                    return;
                }
                // end
            $("#reg-spinner").removeClass('d-none')
            $("#registerBtn").addClass('custom-opacity')
            $("#registerBtn").attr('disabled',true);
            $.ajax({
                url: "{{ route('register') }}",
                type:"post",
                data:$('#registerFormSubmit').serialize(),
                success:function(response){
                    if(response.success){
                        $("#registerFormSubmit").trigger("reset");
                        $("#reg-spinner").addClass('d-none')
                        $("#registerBtn").removeClass('custom-opacity')
                        $("#registerBtn").attr('disabled',false);
                        toastr.success(response.success)
                    }
                    if(response.error){
                        toastr.error(response.error)

                        var query_url='';
                        window.location.href = query_url;
                    }
                },
                error:function(response){
                    if(response.responseJSON.errors.name){
                        $("#reg-spinner").addClass('d-none')
                        $("#registerBtn").removeClass('custom-opacity')
                        $("#registerBtn").attr('disabled',false);
                        $("#registerBtn").addClass('site-btn-effect')
                        toastr.error(response.responseJSON.errors.name[0])
                    }

                    if(response.responseJSON.errors.email){
                        $("#reg-spinner").addClass('d-none')
                        $("#registerBtn").removeClass('custom-opacity')
                        $("#registerBtn").attr('disabled',false);
                        $("#registerBtn").addClass('site-btn-effect')
                        toastr.error(response.responseJSON.errors.email[0])
                    }

                    if(response.responseJSON.errors.password){
                        $("#reg-spinner").addClass('d-none')
                        $("#registerBtn").removeClass('custom-opacity')
                        $("#registerBtn").attr('disabled',false);
                        $("#registerBtn").addClass('site-btn-effect')
                        toastr.error(response.responseJSON.errors.password[0])
                    }

                    if(!response.responseJSON.errors.name && !response.responseJSON.errors.email && !response.responseJSON.errors.password){
                        $("#reg-spinner").addClass('d-none')
                        $("#registerBtn").removeClass('custom-opacity')
                        $("#registerBtn").attr('disabled',false);
                        $("#registerBtn").addClass('site-btn-effect')
                        toastr.error("{{__('user.Please Complete the recaptcha to submit the form')}}")
                    }


                }

            });


        })

    });

    })(jQuery);
</script>

@endsection