@extends('layouts.authapp')
@section('title', 'Sign up')
@section('content')
<div class="uk-section-muted uk-flex uk-flex-middle uk-animation-fade" uk-height-viewport>
    <div class="uk-width-1-1">
        <div class="uk-container">
            <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid>
                <div class="uk-width-1-1@m">
                    <div class="first-section">
                        <div class="uk-margin-medium-bottom uk-text-center">
                            <img class="auth-logo" alt="" src="{{url('images/listing-llama-logo.png')}}">
                        </div>
                        <div class="select-signup">
                            <div class="container">
                                <div class="circle red">
                                    <div class="circle-content">
                                        <h2>Are You</h2>
                                        <p>Buying or Selling?</p>
                                        <button data-type="buying">Let's Begin!</button>
                                    </div>
                                </div>
                                <div class="circle blue">
                                    <div class="circle-content">
                                        <h2>Are You a</h2>
                                        <p>Realtor?</p>
                                        <button data-type="realtor">Sign Up Here</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="uk-margin uk-width-large uk-margin-auto uk-card uk-card-default uk-card-body uk-box-shadow-medium hide-buying-form auth-form">
                        <a href="javascript:void(0)" class="uk-text-muted back-selection"><i class="fa-light fa-chevrons-left"></i> Back</a>
                        <h3 class="uk-card-title uk-text-center uk-margin-top uk-margin-remove-bottom"><img class="auth-logo" alt="" src="{{url('images/listing-llama-logo.png')}}"></h3>
                        <p class="uk-margin-small-top">Please provide all required details to sign up your buyer's and seller's account with us.</p>
                        {{ Form::open(array('route' => 'register','method' => 'POST', 'class' => 'form', 'id' => 'customer_register_form')) }}
                        @csrf
                            @include('partials.messages')
                            {{Form::hidden('type','buying')}}
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-user"></i></span>
                                    {{Form::text('name', old('name'),['class' => 'uk-input uk-form-large','autocomplete' => 'off', 'placeholder' => 'Name *'])}}
                                </div>
                                <span class="uk-text-danger customer-name-error"></span>
                            </div>
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-phone"></i></span>
                                    {{Form::text('phone_number', old('phone_number'),['class' => 'uk-input uk-form-large','autocomplete' => 'off', 'placeholder' => 'Phone Number'])}}
                                </div>
                            </div>
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-user"></i></span>
                                    {{Form::email('email', old('email'),['class' => 'uk-input uk-form-large','autocomplete' => 'off', 'placeholder' => 'Email Address *'])}}
                                </div>
                                <span class="uk-text-danger customer-email-error"></span>
                            </div>
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-lock"></i></span>
                                    {{Form::password('password',['class' => 'uk-input uk-form-large','autocomplete' => 'off', 'placeholder' => 'Password *','id' => 'customer-password'])}}
                                </div>
                                <span class="uk-text-danger customer-password-error"></span>
                            </div>
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-lock"></i></span>
                                    {{Form::password('password_confirmation',['class' => 'uk-input uk-form-large','autocomplete' => 'off', 'placeholder' => 'Confirm Password *'])}}
                                </div>
                                <span class="uk-text-danger customer-password-confirmation-error"></span>
                            </div>
                            <div class="uk-margin">
                                <label>{{Form::checkbox('terms_service','1',false,['class' => 'uk-checkbox'])}} By signing up, you confirm that you have read and accepted our <a href="javascript:void(0)" class="terms-service" data-type="Customer Registration">Terms of Service</a>.</label>
                                <br><span class="uk-text-danger customer-terms-service-error"></span>
                            </div>
                            <div class="uk-margin">
                                <button type="submit" class="uk-button uk-button-primary uk-width-1-1 uk-button-large register-btn" id="customer_register_submit">
                                 <i class="fa-regular fa-arrow-right-from-bracket"></i> Sign up
                                </button>
                            </div>
                            <div class="uk-margin">
                                <p class="uk-text-center">Already have an account? <a href="{{route('login')}}">Sign in</a></p>
                            </div>
                        {{ Form::close() }}
                    </div>
                    <div class="uk-margin uk-width-large uk-margin-auto uk-card uk-card-default uk-card-body uk-box-shadow-medium uk-panel uk-panel-scrollable hide-realtor-form auth-form" uk-height-viewport="offset-bottom: 10">
                        <a href="javascript:void(0)" class="uk-text-muted back-selection"><i class="fa-light fa-chevrons-left"></i> Back</a>
                        <h3 class="uk-card-title uk-text-center uk-margin-top uk-margin-remove-bottom"><img class="auth-logo" alt="" src="{{url('images/listing-llama-logo.png')}}"></h3>
                        <p class="uk-margin-small-top">Please provide all required details to sign up your realtor's account with us.</p>
                        {{ Form::open(array('route' => 'register','method' => 'POST', 'class' => 'form', 'id' => 'realtor_register_form')) }}
                        @csrf
                            @include('partials.messages')
                            {{Form::hidden('type','realtor')}}
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-user"></i></span>
                                    {{Form::text('name', old('name'),['class' => 'uk-input uk-form-large','autocomplete' => 'off', 'placeholder' => 'Name *'])}}
                                </div>
                                <span class="uk-text-danger realtor-name-error"></span>
                            </div>
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-phone"></i></span>
                                    {{Form::text('phone_number', old('phone_number'),['class' => 'uk-input uk-form-large','autocomplete' => 'off', 'placeholder' => 'Phone Number'])}}
                                </div>
                            </div>
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-user"></i></span>
                                    {{Form::email('email', old('email'),['class' => 'uk-input uk-form-large','autocomplete' => 'off', 'placeholder' => 'Email Address *'])}}
                                </div>
                                <span class="uk-text-danger realtor-email-error"></span>
                            </div>
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-lock"></i></span>
                                    {{Form::password('password',['class' => 'uk-input uk-form-large','autocomplete' => 'off', 'placeholder' => 'Password *','id' => 'realtor-password'])}}
                                </div>
                                <span class="uk-text-danger realtor-password-error"></span>
                            </div>
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-lock"></i></span>
                                    {{Form::password('password_confirmation',['class' => 'uk-input uk-form-large','autocomplete' => 'off', 'placeholder' => 'Confirm Password *'])}}
                                </div>
                                <span class="uk-text-danger realtor-password-confirmation-error"></span>
                            </div>
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-address-book"></i></span>
                                    {{Form::text('address','',['class' => 'uk-input uk-form-large','autocomplete' => 'off', 'placeholder' => 'Address *'])}}
                                </div>
                                <span class="uk-text-danger realtor-address-error"></span>
                            </div>
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-wallet"></i></span>
                                    {{Form::text('brokerage','',['class' => 'uk-input uk-form-large','autocomplete' => 'off', 'placeholder' => 'Brokerage'])}}
                                </div>
                            </div>
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-chart-simple"></i></span>
                                    {{Form::text('real_estate_association','',['class' => 'uk-input uk-form-large','autocomplete' => 'off', 'placeholder' => 'Real Estate Association'])}}
                                </div>
                            </div>
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-trophy"></i></span>
                                    {{Form::text('awards','',['class' => 'uk-input uk-form-large','autocomplete' => 'off', 'placeholder' => 'Awards'])}}
                                </div>
                            </div>
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-globe"></i></span>
                                    {{Form::text('website','',['class' => 'uk-input uk-form-large','autocomplete' => 'off', 'placeholder' => 'Website'])}}
                                </div>
                            </div>
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-code-branch"></i></span>
                                    {{Form::text('realtor_number','',['class' => 'uk-input uk-form-large','autocomplete' => 'off', 'placeholder' => 'Realtor Number'])}}
                                </div>
                            </div>
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-face-smile"></i></span>
                                    {{Form::text('bio','',['class' => 'uk-input uk-form-large','autocomplete' => 'off', 'placeholder' => 'Bio'])}}
                                </div>
                            </div>
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-futbol"></i></span>
                                    {{Form::text('sports_played','',['class' => 'uk-input uk-form-large','autocomplete' => 'off', 'placeholder' => 'Sports Played'])}}
                                </div>
                            </div> 
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-headphones"></i></span>
                                    {{Form::text('interests_and_hobbies','',['class' => 'uk-input uk-form-large','autocomplete' => 'off', 'placeholder' => 'Interests And Hobbies'])}}
                                </div>
                            </div>
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-face-smile"></i></span>
                                    {{Form::text('years_with_brokerage','',['class' => 'uk-input uk-form-large','autocomplete' => 'off', 'placeholder' => 'Years With Brokerage'])}}
                                </div>
                            </div>
                            <div class="uk-margin">
                                <label for="city" class="uk-form-label">City (Multiple Add) <span class="uk-text-danger">*</span></label>
                                <div class="uk-form-controls uk-margin-small-top">
                                    <div class="city-section">
                                        <div class="counter-section">
                                            <div class="uk-grid-small" uk-grid>
                                                <div class="uk-width-expand">
                                                    {{Form::text('city[]','',['class' => 'uk-input city-autocomplete','autocomplete' => 'off','placeholder' => 'Name', 'id' => 'city-autocomplete'])}}
                                                    <span class="uk-text-danger city-error"></span>
                                                </div>
                                                <div class="uk-width-auto uk-margin-small-top">
                                                    <a class="uk-text-primary add-more-city" uk-tooltip="Add More City"><i class="fa-solid fa-circle-plus fa-xl"></i></a>
                                                </div>
                                            </div>
                                            <div class="uk-grid-small" uk-grid>
                                                <div class="uk-width-expand">
                                                    <input class="uk-range" name="city_range[]" type="range" value="20" min="20" max="150" step="1" aria-label="Range">
                                                </div>
                                                <div class="uk-width-auto">
                                                    <span>20 KM</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @php
                                $languages    = App\Models\Language::select('name')->where('status', 1)->orderBy('ordering', 'asc')->get();
                                $realtorYears = App\Models\RealtorYear::select('name')->where('status', 1)->orderBy('ordering', 'asc')->get();
                            @endphp
                            @if($realtorYears->count() > 0)
                                <div class="uk-margin">
                                    <label for="years_of_realtor" class="uk-form-label"># of years as a realtor <span class="uk-text-danger">*</span></label>
                                    <div class="uk-form-controls uk-margin-small-top">
                                        <div class="uk-grid-small" uk-grid>
                                            @foreach($realtorYears as $realtorYear)
                                                <div class="uk-width-auto">
                                                    <div class="realtor-years-box" data-name="{{$realtorYear->name}}">
                                                        {{$realtorYear->name}}
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <span class="uk-text-danger years-realtor-error"></span>
                                </div>
                            @endif
                            {{Form::hidden('years_of_realtor','')}}
                            @if($languages->count() > 0)
                                <div class="uk-margin">
                                    <label for="language" class="uk-form-label">Languages (Multiple Select)</label>
                                    <div class="uk-form-controls uk-margin-small-top">
                                        <div class="uk-grid-small" uk-grid>
                                            @foreach($languages as $language)
                                                <div class="uk-width-auto">
                                                    <div class="language-box" data-name="{{$language->name}}">
                                                        {{$language->name}}
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="uk-margin-small uk-hidden other-language">
                                        {{Form::text('other_language','',['class' => 'uk-input uk-form-large','autocomplete' => 'off','placeholder' => 'Other Language'])}}
                                    </div>
                                </div>
                            @endif
                            {{Form::hidden('language','')}}
                            <div class="uk-margin">
                                <label>{{Form::checkbox('terms_service','1',false,['class' => 'uk-checkbox'])}} By signing up, you confirm that you have read and accepted our <a href="javascript:void(0)" class="terms-service" data-type="Realtor Registration">Terms of Service</a>.</label>
                                <br><span class="uk-text-danger realtor-terms-service-error"></span>
                            </div>
                            <div class="uk-margin">
                                <button type="submit" class="uk-button uk-button-primary uk-width-1-1 uk-button-large register-btn" id="realtor_register_submit">
                                    <i class="fa-regular fa-arrow-right-from-bracket"></i> Sign up
                                </button>
                            </div>
                            <div class="uk-margin">
                                <p class="uk-text-center">Already have an account? <a href="{{route('login')}}">Sign in</a></p>
                            </div>
                        {{ Form::close() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="terms_conditions_modal" uk-modal>
    <div class="uk-modal-dialog">
        <button class="uk-modal-close-default" type="button" uk-close></button>
        <div class="uk-modal-header">
            <h2 class="uk-modal-title">Terms & Conditions</h2>
        </div>
        <div class="uk-modal-body" uk-overflow-auto>
            
        </div>
        <div class="uk-modal-footer uk-text-right">
            <button class="uk-button uk-button-default uk-modal-close" type="button">Close</button>
        </div>
    </div>
</div>
@endsection
@section('footer-script')
<script src="https://maps.googleapis.com/maps/api/js?key={{ env('MAP_KEY') }}&libraries=places"></script>
<script>
    
    function initializeAutocomplete(inputElement) {
        var options = {
            types: ['(cities)'],
            componentRestrictions: { country: ['us', 'ca'] }
        };
    
        var autocomplete = new google.maps.places.Autocomplete(inputElement, options);
    
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            var place = autocomplete.getPlace();
            if (!place.geometry) {
                return;
            }
        });
    }
    
    function initialize() {
        var inputs = document.getElementsByClassName('city-autocomplete');
        for (var i = 0; i < inputs.length; i++) {
            initializeAutocomplete(inputs[i]);
        }
    }
    
    google.maps.event.addDomListener(window, 'load', initialize);
    
    
    $("#customer_register_form").validate({
        errorClass: "uk-text-danger",
        rules:{
            name:"required",
            terms_service:"required",
            email: {
				required: true,
				email:true,
				remote:{
                    url: '{{url("check-email")}}',
                    type: "post"
                }
			},
			password: {
				required: true,
				minlength: 6,
			},
			password_confirmation: {
                required: true,
                minlength: 6,
                equalTo: "#customer-password"
            },
        },
        messages: {
            name: {
                required: "Complete this required field."
            },
            email: {
                required: "Complete this required field.",
                remote:"This email is already exist."
            },
            password: {
                required: "Complete this required field."
            },
            password_confirmation: {
                required: "Complete this required field."
            },
            terms_service: {
                required: "Please accept Terms and Conditions."
            },
        },
        errorPlacement: function(error, element) {
            if (element.attr("name") == "name") {
                error.insertBefore('.customer-name-error');
            }else if (element.attr("name") == "email") {
                error.insertBefore('.customer-email-error');
            }else if (element.attr("name") == "password") {
                error.insertBefore('.customer-password-error');
            }else if (element.attr("name") == "password_confirmation") {
                error.insertBefore('.customer-password-confirmation-error');
            }else if (element.attr("name") == "terms_service") {
                error.insertBefore('.customer-terms-service-error');
            }else {
                error.insertAfter(element);
            }
        },
        submitHandler: function(form) {
            $('#customer_register_submit').attr('disabled',true);
            form.submit();
        }
    });
    
    $("#realtor_register_form").validate({
        errorClass: "uk-text-danger",
        rules:{
            name:"required",
            terms_service:"required",
            address:"required",
            email: {
				required: true,
				email:true,
				remote:{
                    url: '{{url("check-email")}}',
                    type: "post"
                }
			},
			password: {
				required: true,
				minlength: 6,
			},
			password_confirmation: {
                required: true,
                minlength: 6,
                equalTo: "#realtor-password"
            },
            'city[]': {
                required: true
            },
        },
        messages: {
            name: {
                required: "Complete this required field."
            },
            email: {
                required: "Complete this required field.",
                remote:"This email is already exist."
            },
            password: {
                required: "Complete this required field."
            },
            password_confirmation: {
                required: "Complete this required field."
            },
            address: {
                required: "Complete this required field."
            },
            terms_service: {
                required: "Please accept Terms and Conditions."
            },
            'city[]': {
                required: "Please enter the city name."
            },
        },
        errorPlacement: function(error, element) {
            if (element.attr("name") == "name") {
                error.insertBefore('.realtor-name-error');
            }else if (element.attr("name") == "email") {
                error.insertBefore('.realtor-email-error');
            }else if (element.attr("name") == "password") {
                error.insertBefore('.realtor-password-error');
            }else if (element.attr("name") == "password_confirmation") {
                error.insertBefore('.realtor-password-confirmation-error');
            }else if (element.attr("name") == "terms_service") {
                error.insertBefore('.realtor-terms-service-error');
            }else if (element.attr("name") == "address") {
                error.insertBefore('.realtor-address-error');
            }else {
                error.insertAfter(element);
            }
        },
        submitHandler: function(form) {
            var error = 0;
            const yearsOfRealtor = $('input[name=years_of_realtor]').val();
            if(!yearsOfRealtor){
                $('.years-realtor-error').html('Please select # of years as a realtor');
                error = 1;
                return false;
            }
            $("input[name='city[]']").each(function () {
                if(!$(this).val()){
                    $(this).closest('div').find('.city-error').html('Please enter the city name.');
                    error = 1;
                }
            });
            if(error == 0){
                $('#realtor_register_submit').attr('disabled',true);
                form.submit();
            }else{
                return false;
            }
        }
    });
    
    $(document).on("click",".select-signup button",function() {
        const type = $(this).data('type');
        if(type == 'buying'){
            $('.first-section').hide('slow');
            $('.hide-realtor-form').hide('slow');
            $('.hide-buying-form').show('slow');   
        }
        if(type == 'realtor'){
            $('.first-section').hide('slow');
            $('.hide-buying-form').hide('slow');
            $('.hide-realtor-form').show('slow');
        }
    });
    
    $(document).on("click",".back-selection",function() {
        $('.hide-realtor-form').hide('slow');
        $('.hide-buying-form').hide('slow');
        $('.first-section').show('slow');
    });
    
    $(document).on("click",".realtor-years-box",function() {
        $('.realtor-years-box').removeClass('active');
        $(this).addClass('active');
        $('input[name=years_of_realtor]').val($(this).data('name'));
    });
    
    $(document).on("click",".language-box",function() {
        var language = $(this).data('name');
        if($(this).hasClass('active')){
            $(this).removeClass('active');
            if(language == 'Other'){
                $('.other-language').addClass('uk-hidden');
            }
        }else{
            $(this).addClass('active');
            if(language == 'Other'){
                $('.other-language').removeClass('uk-hidden');
            }
        }
        $(".language-box").each(function () {
            language += ', '+$(this).data('name');
        });
        $('input[name=language]').val(language);
    });
    
    $(document).on("change",".uk-range",function() {
        $(this).closest('.uk-grid-small').find('span').html($(this).val()+' KM');
    });
    
    $(document).on('click','.terms-service',function(){
        var type = $(this).data('type');
        $.ajax(
        {
            url: url +  "/get-terms-service",
            type: 'POST',
            dataType: "JSON",
            data:{
                'type' : type  
            },
            success: function (res)
            {
                if(res.success == 1){
                    $('#terms_conditions_modal').find('.uk-modal-body').html(res.html);
                    UIkit.modal('#terms_conditions_modal').show();
                }
            }
        });
    });
    
    var cityHtml = '';
    cityHtml += '<div class="uk-margin-small-top counter-section">';
    cityHtml += '<div class="uk-grid-small" uk-grid>';
    cityHtml += '<div class="uk-width-expand">';
    cityHtml += '<input name="city[]" value="" class="uk-input city-autocomplete" autocomplete="off" placeholder="Name" id="city-autocomplete">';
    cityHtml += '<span class="uk-text-danger city-error"></span>';
    cityHtml += '</div>';
    cityHtml += '<div class="uk-width-auto uk-margin-small-top">';
    cityHtml += '<a class="uk-text-danger remove-city" uk-tooltip="Remove City"><i class="fa-solid fa-circle-minus fa-xl"></i></a>';
    cityHtml += '</div>';
    cityHtml += '</div>';
    cityHtml += '<div class="uk-grid-small" uk-grid>';
    cityHtml += '<div class="uk-width-expand">';
    cityHtml += '<input class="uk-range" name="city_range[]" type="range" value="20" min="20" max="150" step="1" aria-label="Range">';
    cityHtml += '</div>';
    cityHtml += '<div class="uk-width-auto">';
    cityHtml += '<span>20 KM</span>';
    cityHtml += '</div>';
    cityHtml += '</div>';
    cityHtml += '</div>';
    
    $(document).on("click",".add-more-city",function() {
        $(this).closest('.city-section').append(cityHtml);
    });
    
    $(document).on("click",".remove-city",function() {
        $(this).closest('.counter-section').remove();
    });
    
</script>
@endsection