@extends("app")

@section('head_title', 'Profile | '.getcong('site_name') )
@section('head_url', Request::url())
<style>
	.hide {
	  display: none;
	}
	#valid-msg {color: #00c900;font-size: 12px;float: left;text-align: center;width: 100%;}
	#error-msg {font-size: 12px;float: left;text-align: center;width: 100%;color: #950505;}
	#phone_profile{width: 97%;}
	.iti{width: 75%;float: right;}
</style>
@section("content")
<div class="bg-white w-100">
    <div class="container pl-0 pr-0">
        <div class="row">
            @include("_particles.sidebar_user")
        
            <div class="col-lg-9 col-md-9 min_form pt-36 pb-70 pt-70 pr-0">
                @if (count($errors) > 0)
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                @if(Session::has('flash_message_profile'))
                    <div class="alert alert-success">
                        {{ Session::get('flash_message_profile') }}
						<button type="button" class="btn-close" style="float: right;" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
              {!! Form::open(array('url' => 'profile','class'=>'','name'=>'profile_form','id'=>'profile_form','role'=>'form','enctype' => 'multipart/form-data')) !!}
                <div class="row">
                    <h1 class="text-left pb-36">Edit Profile</h1>
                    <div class="col-lg-3" style="border-right:1px solid #F5F5F5;">
                        <div class="edit-avatar">
                          @if(Auth::user()->image_icon)          
                        <img src="{{ url('public/upload/members/'.Auth::user()->image_icon.'-b.jpg') }}" alt="" class="img-thumbnail">
                        @else
                          <img src="{{ url('public/site_assets/img/agent-img3.jpg') }}" alt="" class="img-thumbnail">
                        @endif
                           <input type="file" name="user_icon" accept="image/*" class="fs-14 pt-10 pb-36">
                        </div>
                    </div>
                    <div class="col-lg-9 pr-0">
                        <div class="row">
                            <div class="col-sm-6 p-0">
                                <div class="form-block">
                                  <label>Full Name</label>
                                  <input class="border" type="text" name="name" value="{{ (Auth::user()->name) ? Auth::user()->name : Auth::user()->full_name }}" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode == 32)" required>
                                </div>
                                <div class="form-block">
                                  <label>Email</label>
                                  <input class="border" type="text" readonly disabled name="email" value="{{ Auth::user()->email }}" required>
                                </div>
                                <div class="form-block">
                                  <label>Phone</label>
                                  <input id="phone_profile" class="border" type="text" name="phone" value="{{ Auth::user()->phone }}">
								  <span id="valid-msg" class="hide">✓ Valid</span>
									<span id="error-msg" class="hide"></span>
                                </div>
                            </div>
                            <div class="col-sm-6 pr-0">
                                <div class="form-block">
                                  <label>Facebook</label>
                                  <input class="border" type="text" name="facebook" value="{{ Auth::user()->facebook }}">
                                </div>
                                <div class="form-block">
                                  <label>Twitter</label>
                                  <input class="border" type="text" name="twitter" value="{{ Auth::user()->twitter }}">
                                </div>
                                <!--<div class="form-block">
                                  <label>Gplus</label>
                                  <input class="border" type="text" name="gplus" value="{{ Auth::user()->gplus }}">
                                </div>-->
                                <div class="form-block">
                                  <label>Linkedin</label>
                                  <input class="border" type="text" name="linkedin" value="{{ Auth::user()->linkedin }}">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12 p-0">
                                <div class="form-block about">
                                  <textarea class="border" style="width: 99%;height: 85px;" rows="5" placeholder="About" name="about">{{ Auth::user()->about }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pull-right fs-14">
                  <button type="submit" class="btn bg-black txt-white button-icon fs-18" style="color: #fff;margin-right: 8px;"><i class="fa fa-check"></i>&nbsp;Save Changes</button>
                </div>
                
              {!! Form::close() !!}
            </div><!-- end col -->
        </div>
  </div>
</div>
@endsection
@push('scripts')
<script defer>
    $(function() {
		const input = document.querySelector("#phone_profile");
		const errorMsg = document.querySelector("#error-msg");
		const validMsg = document.querySelector("#valid-msg");

		// here, the index maps to the error code returned from getValidationError - see readme
		const errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];

		// initialise plugin
		const iti = window.intlTelInput(input, {
		utilsScript: "{{ URL::asset('public/site_assets/intlTelInput/build/js/utils.js')}}"
		});

		const reset = () => {
			input.classList.remove("error");
			errorMsg.innerHTML = "";
			errorMsg.classList.add("hide");
			validMsg.classList.add("hide");
		};
		// on blur: validate
		input.addEventListener('blur', () => {
			reset();
			if (input.value.trim()) {
				if (iti.isValidNumber()) {
					validMsg.classList.remove("hide");
					$('#profile_form').attr('onsubmit','return true;');
					$("#phone_profile").val(iti.getNumber());
				} else {
					input.classList.add("error");
					const errorCode = iti.getValidationError();
					if(errorCode == '-99'){
						errorMsg.innerHTML = 'Invalid number';
					}else{
						errorMsg.innerHTML = errorMap[errorCode];
					}
					errorMsg.classList.remove("hide");
					$('#profile_form').attr('onsubmit','return false;');
				}
			}
		});
		// on keyup / change flag: reset
		input.addEventListener('change', reset);
		input.addEventListener('keyup', reset);
		
	});
   </script>
@endpush