@extends('layouts.home')
@section('title',trans('core.title_unsubscribe'))
@section('content')
<div class="container">
	<div class="row mt-4 justify-content-center">
		<div class="col-xl-8 col-md-8">
		  <div class="">
		    <div class="card-block  z-depth-bottom-3 border-r-15">
		      	<div class="row p-15">
			        <div class="col-xl-12 col-md-12 col-sm-12 col-12">
			          	<div class="row">
				            <div class="col-sm-12 col-md-6 col-lg-6">
				              	<a href="{{ secure_url('/') }}">
				                	<img class="img-responsive" width="70%" src="{{ secure_asset('assets/images/HireMee.png') }}">
				        	    </a>
				          	</div>
				          	<div class="col-sm-12 col-md-6 col-lg-6">
				               	@php
				              		list($hiremee_id,$registration_id) = \App\Helper\HireMeeHelper::decryptRegister(Route::input('hash'));
				              		$loginUserImage = \App\Helper\HireMeeHelper::profilePic($hiremee_id); 
				              		$get_designation= \App\Helper\HireMeeHelper::fetchDesignation($hiremee_id);
				               	@endphp
				                <div class="media pull-right">
				                	<img class="d-flex mr-3 img-circle img-40 z-depth-bottom-5" src="{{ $loginUserImage }}" alt="Profile Image">
				                    <div class="media-body send-chat">
				                      	<p class="l-h-18 f-20 p-b-0 m-b-0" id="js-cand_name"> {{\App\Helper\HireMeeHelper::fetchProfile($hiremee_id)->fullname}} </p>
				                        <p class="l-h-18 f-15 text-93 m-b-0">{{ !empty($get_designation) ? $get_designation->designation : '' }} </p>
				                    </div>
				              	</div>
				            </div>
			          	</div>
			        </div>
		  		</div>
		      	<div class="row">
		            <div class="col-md-12">
		              	<button class="col-md-12 btn btn-info text-left">
		                	<i class="hiremee-close-envelope p-r-5 f-22"></i>
		                	<span class="f-20"> Email Unsubscribe</span>
		              	</button>
		            </div>
		        </div>
		      	{!! Form::open(array('class'=>'form-horizontal','name'=>'emailunsubscribe','id'=>'emailunsubscribe','method'=>'POST',
		                'url'=>route('unsubscribepost'))) !!}
		            <input type="hidden" id="gethash"  name="gethash" value="={{Route::input('hash')}}">
		            @if(Session::get('error'))
                     <div class="alert alert-error background-error">
                     <button type="button" class="close m-t-0" data-dismiss="alert" aria-label="Close">
                     <i class="hiremee-multiply text-white"></i>
                       </button>
                       <strong>Error!</strong> {{ Session::get('error') }}
                     </div>
	                @endif
		          	<div class="row p-t-10">
			            <div class="col-md-12">
			              <p>
			                <span class="f-16">Please choose the reason, why you are un-subscribing email notifications</span>
			              </p>
			              	@if(isset($reasons) && count($reasons)>0)
			              		@foreach($reasons as $reason)
				              	<p>
					                <div class="checkbox-fade p-t-10 fade-in-primary">
					                  	<label for="reason_{{ $reason->id }}">
					                    	<input value="{{ $reason->id }}" class="reason_select {{ $reason->option_type==6 ? 'other_reasons' : '' }}" type="checkbox" id="reason_{{ $reason->id }}" name="unsubscribe_reason[]" {{ (old('unsubscribe_reason') && in_array($reason->id,old('unsubscribe_reason'))) ? 'checked' : '' }}>
					                      	<span class="cr">
					                        	<i class="cr-icon icofont icofont-ui-check txt-primary"></i>
					                      	</span>
					                      	<span class="f-16">{{ $reason->reason }}</span>
					                    </label>
				                  	</div>
				                </p>
				                @endforeach
                                <span class="invalid-feedback sweet-danger-text {{ ($errors->has('unsubscribe_reason')) ?? 'd-none' }}" role="alert" id="unsubscribe_reason_alert">
									<strong>{{ $errors->first('unsubscribe_reason') }}</strong>
                                </span>
			               	@endif

				            <div class="col-md-12 {{ (old('unsubscribe_reason') && in_array(6,old('unsubscribe_reason'))) ? '' : 'd-none' }}" id="other_reasons_block">
				                <div class="col-md-6">
				                  	<textarea rows="3" class="form-control {{ $errors->has('other_reason') ? ' is-invalid' : '' }}" id="other_reason" name="other_reason" placeholder="Your reason...">{{ old('other_reason') }}</textarea>
				                  	<span class="invalid-feedback sweet-danger-text {{ ($errors->has('other_reason')) ?? 'd-none' }}" role="alert" id="other_reason_alert">
										<strong>{{ $errors->first('other_reason') }}</strong>
                                    </span>
                                </div>
				            </div>
				            
				            <div class="clearfix"></div>
				            <div class="row">
				                <div class="col-md-12 p-t-25">
				                  <button class="btn btn-primary" id="unsubscribe" value="unsubscribe">Unsubscribe</button>
				                </div>
				            </div>
			            </div>
		          	</div>
		        {!! Form::close() !!}
		    </div>
		  </div>
    	</div>
  	</div>
</div>
@endsection
@section('footer')
<script type="text/javascript">
$(document).on('submit',"#emailunsubscribe",function(){
	$('#unsubscribe').prop('disabled',true).text('Processing..');
	if($('input[type=checkbox]:checked').length==0) {
    	$("#unsubscribe_reason_alert").removeClass('d-none').find('strong').html('Reason is required');
    	$('#unsubscribe').prop('disabled',false).text('Unsubscribe');
       	return false;
    }
    else if($(".other_reasons:checked").length > 0) {
    	var value = $('#other_reason').val();
    	var regex = /^[a-zA-Z ]+$/;
     	if(value.length <=0){
     		$("#other_reason_alert").removeClass('d-none').find('strong').html('Other Reason is required');
     		$('#unsubscribe').prop('disabled',false).text('Unsubscribe');
           	return false;
        }
        if(value.length >0 && value.length <3){
     		$("#other_reason_alert").removeClass('d-none').find('strong').html('Other Reason must atleast contain 3 characters');
     		$('#unsubscribe').prop('disabled',false).text('Unsubscribe');
           	return false;
        }
        if(value.length >0 && value.length>250){
     		$("#other_reason_alert").removeClass('d-none').find('strong').html('Other Reason must not exceed 250 characters');
     		$('#unsubscribe').prop('disabled',false).text('Unsubscribe');
           	return false;
        }
        if(!regex.test(value)){
     		$("#other_reason_alert").removeClass('d-none').find('strong').html('Other Reason must contains only alphabets');
     		$('#unsubscribe').prop('disabled',false).text('Unsubscribe');
           	return false;
        }
    }
});

$(document).on('click',".other_reasons",function(){
    if($(this).is(":checked")) {
    	$("#other_reasons_block").removeClass('d-none');
    } else {
    	$("#other_reasons_block").addClass('d-none');
    }
});

$(document).on("click",".reason_select",function(){
	clearErrorSpans();
});

$(document).on("keyup","#other_reason",function(){
	clearErrorSpans();
});

function clearErrorSpans()
{
	if($(".invalid-feedback").length>0){
		$(".invalid-feedback").addClass('d-none');
	}
}
</script>
@endsection