@extends('layouts.app')
@section('content')
<div class="main-header">
    <div class="admin-header">
        <div class="uk-grid">
            <div class="uk-width-1-2">
                <h1 class="uk-margin-small-top main-heading">{{$title}}</h1>
            </div>
            <div class="uk-width-1-2 uk-text-right">
                <a class="uk-button uk-button-default" href="{{url('admin/realtors')}}"> Back</a>
            </div>
        </div> 
    </div>
</div>
<div class="uk-margin uk-width-1-1 uk-margin-auto uk-card uk-card-default uk-card-body small-padding">
	@include('partials.messages')
	{{ Form::open(array('route' => 'admin.realtors.store','method' => 'POST', 'class' => 'uk-form-stacked','id' => 'create_form', 'files' => 'true')) }}
    @csrf
    <div class="uk-grid" uk-grid>
    	<div class="uk-width-1-2@m">
            <div class="uk-margin-small">
                <label for="name" class="uk-form-label">Name <span class="uk-text-danger">*</span></label>
                <div class="uk-form-controls">
                    {{Form::text('name', '',['class' => 'uk-input','autocomplete' => 'off'])}}
                </div>
            </div>
            <div class="uk-margin-small">
                <label for="phone_number" class="uk-form-label">Phone Number</label>
                <div class="uk-form-controls">
                    {{Form::text('phone_number', '',['class' => 'uk-input','autocomplete' => 'off'])}}
                </div>
            </div>
            <div class="uk-margin-small">
                <label for="email" class="uk-form-label">Email <span class="uk-text-danger">*</span></label>
                <div class="uk-form-controls">
                    {{Form::email('email', '',['class' => 'uk-input','autocomplete' => 'off'])}}
                </div>
            </div>
            <div class="uk-margin-small">
               <label for="password" class="uk-form-label">Password </label>
               <div class="uk-form-controls">
                    {{Form::password('password',['class' => 'uk-input password','autocomplete' => 'off','id' => 'password'])}}
                </div>    
            </div>
            <div class="uk-margin-small">
                <label for="address" class="uk-form-label">Address <span class="uk-text-danger">*</span></label>
                <div class="uk-form-controls">
                    {{Form::text('address', '',['class' => 'uk-input','autocomplete' => 'off'])}}
                </div>
            </div> 
            <div class="uk-margin-small">
                <label for="brokerage" class="uk-form-label">Brokerage</label>
                <div class="uk-form-controls">
                    {{Form::text('brokerage', '',['class' => 'uk-input','autocomplete' => 'off'])}}
                </div>
            </div> 
            <div class="uk-margin-small">
                <label for="real_estate_association" class="uk-form-label">Real Estate Association</label>
                <div class="uk-form-controls">
                    {{Form::text('real_estate_association', '',['class' => 'uk-input','autocomplete' => 'off'])}}
                </div>
            </div> 
            <div class="uk-margin-small">
                <label for="awards" class="uk-form-label">Awards</label>
                <div class="uk-form-controls">
                    {{Form::text('awards', '',['class' => 'uk-input','autocomplete' => 'off'])}}
                </div>
            </div> 
            <div class="uk-margin-small">
                <label for="website" class="uk-form-label">Website</label>
                <div class="uk-form-controls">
                    {{Form::text('website', '',['class' => 'uk-input','autocomplete' => 'off'])}}
                </div>
            </div>
            <div class="uk-margin-small">
                <label for="realtor" class="uk-form-label">Realtor Number</label>
                <div class="uk-form-controls">
                    {{Form::text('realtor', '',['class' => 'uk-input','autocomplete' => 'off'])}}
                </div>
            </div>
            <div class="uk-margin-small">
                <label for="bio" class="uk-form-label">Bio</label>
                <div class="uk-form-controls">
                    {{Form::text('bio', '',['class' => 'uk-input','autocomplete' => 'off'])}}
                </div>
            </div>
            <div class="uk-margin-small">
                <label for="sports_played" class="uk-form-label">Sports Played</label>
                <div class="uk-form-controls">
                    {{Form::text('sports_played', '',['class' => 'uk-input','autocomplete' => 'off'])}}
                </div>
            </div>
            <div class="uk-margin-small">
                <label for="interest_and_hobby" class="uk-form-label">Interests and hobbies</label>
                <div class="uk-form-controls">
                    {{Form::text('interest_and_hobby', '',['class' => 'uk-input','autocomplete' => 'off'])}}
                </div>
            </div>
            <div class="uk-margin-small">
                <label for="years_with_brokerage" class="uk-form-label">Years With Brokerage</label>
                <div class="uk-form-controls">
                    {{Form::text('years_with_brokerage', '',['class' => 'uk-input','autocomplete' => 'off'])}}
                </div>
            </div>
            <div class="additional-section">
                <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'])}}
                                        <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>
            </div>
            @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','autocomplete' => 'off','placeholder' => 'Other Language'])}}
                    </div>
                </div>
            @endif
            {{Form::hidden('language', '')}}
            <div class="uk-margin-small">
                <label for="profile_pic" class="uk-form-label">Profile Picture </label>
                <div class="uk-form-controls">
                    {{Form::file('profile_pic', ['class' => 'uk-input','autocomplete' => 'off', 'accept' => '.jpg , .jpeg, .png'])}}
                </div>    
            </div>
            </div>    
        </div>
        <div class="uk-margin uk-text-center">
            <div class="uk-form-controls">
            {{ Form::submit('Save', array('class' => 'uk-button uk-button-primary','name' => 'save', 'id' => 'create_submit')) }}
            <a class="uk-button uk-button-default" href="{{ url('admin/realtors') }}">Cancel</a>
            </div>
        </div> 
    </div>
    {{ Form::close() }}
</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);
    
    $.validator.addMethod('validUrl', function(value, element) {
        var url = $.validator.methods.url.bind(this);
        return url(value, element) || url('http://' + value, element);
    }, 'Please enter a valid URL');
    
    $("#create_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",
                }
			},
			'city[]': {
                required: true
            }
        },
        messages: {
            name: {
                required: "Complete this required field."
            },
            email: {
                required: "Complete this required field.",
                remote:"This email is already exist."
            },
            address: {
                required: "Complete this required field."
            },
            terms_service: {
                required: "Please accept Terms and Conditions."
            },
            'city[]': {
                required: "Please enter the city name."
            }
        },
       
        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){
                $('#create_submit').attr('disabled',true);
                form.submit();
            }else{
                return false;
            }
        }
    });
    
    $(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');
                $('input[name="other_language"]').val('');
            }
        } else {
            $(this).addClass('active');
            if (language == 'Other') {
                $('.other-language').removeClass('uk-hidden');
                $('input[name="other_language"]').val('');
            }
        }
    
        var languageList = '';
        $(".language-box.active").each(function() {
            languageList += ', ' + $(this).data('name');
        });
    
        languageList = languageList.substring(2);
    
        $('input[name="language"]').val(languageList);
    });
    
    $(document).on("change",".uk-range",function() {
        $(this).closest('.uk-grid-small').find('span').html($(this).val()+' KM');
    });
    
    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">';
    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('.additional-section').append(cityHtml);
        initialize();
    });
    
    $(document).on("click",".remove-city",function() {
        $(this).closest('.counter-section').remove();
    });
</script>
@endsection