@php
	$count = $this->user->alert->count();
	$alerts = $this->user->alert->get();
@endphp
<link href="{{url('modules/mp/assets/css/ratings.css')}}" rel="stylesheet" />
<div class="col-lg-12">
@if($alerts->exists())
	@if($count === 1)
		@php
			$box = 'note-warning';
			if($alerts->icon === 'fa-link' OR $alerts->icon === 'fa-user' OR $alerts->icon === 'fa-check')
				$box = 'note-success';
			if($alerts->icon === 'fa-lightbulb')
				$box = 'note-warning';
			if($alerts->icon === 'fa-exclamation-triangle')
				$box = 'note-danger';
			if($alerts->icon === 'fa-info')
				$box = 'note-info';
		@endphp
		@if($alerts->type !== 'custom')
			<div class="note {{$box}} note-{{$alerts->id}} m-b-15">
				<button type="button" class="close dismissAlert" data-id="{{$alerts->id}}"><span aria-hidden="true">&times;</span></button>
				<div class="note-icon"><i class="fa {{$alerts->icon}}"></i></div>
				<div class="note-content">
					<h4><b>Member Alert!</b></h4>
					{!!$alerts->text!!}
				</div>
			</div>
		@endif
	@else
		<div class="owl-note-carousel owl-carousel owl-theme">
			@foreach($alerts as $alert)
				@if($alert->type !== 'custom')
					@php
						$box = 'note-warning';
						if($alert->icon === 'fa-link' OR $alert->icon === 'fa-user' OR $alert->icon === 'fa-check')
							$box = 'note-success';
						if($alert->icon === 'fa-lightbulb')
							$box = 'note-warning';
						if($alert->icon === 'fa-exclamation-triangle')
							$box = 'note-danger';
						if($alert->icon === 'fa-info')
							$box = 'note-info';
					@endphp
					<div class="item">
						<div class="note {{$box}} note-{{$alert->id}} m-b-15">
							<button type="button" class="close dismissAlert" data-id="{{$alert->id}}" ><span aria-hidden="true">&times;</span></button>
							<div class="note-icon"><i class="fa {{$alert->icon}}"></i></div>
							<div class="note-content">
								<h4><b>Member Alert!</b></h4>
								{!!$alert->text!!}
							</div>
						</div>
					</div>
				@endif
			@endforeach
		</div>
	@endif
	<script>
		$( document ).ready(function() {

			var owl = $(".owl-note-carousel").owlCarousel({
				//loop: true,
				mouseDrag: false,
				touchDrag: false,
				pullDrag: false,
				rewind: true,
				autoplay: true,
				nav: false,
				items : 1,
				itemsDesktop : false,
				itemsDesktopSmall : false,
				itemsTablet: false,
				itemsMobile : false,
				smartSpeed: 700,
				dots:false,
				autoplayHoverPause: true,
			});

			$(".dismissAlert").on("click", function (e) {
				e.preventDefault();
				let alert_id = $(this).attr("data-id");
				if($('.owl-note-carousel').length) {
					owl.on('click', '.owl-item', function (e) {
						var carousel = $('.owl-note-carousel').data('owl.carousel');
						e.preventDefault();
						carousel.to(carousel.relative($(this).index()));
						owl.trigger('remove.owl.carousel', [$(this).index()]).trigger('refresh.owl.carousel');
					});
				}else
					$(".note-" + alert_id).slideUp().delay(1000).remove();
				$.get(site_root + "ajax/dismiss_alert/" + alert_id,function () {});
			});
		});
	</script>
@endif
	@if($renewal && !setting('subscription_renewal_alert_suppress'))
		<div class="note note-info alert alert-dismissible  m-b-15">
			<button type="button" class="close dismissAlert" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>
			<div class="note-icon"><i class="fa fa-info"></i></div>
			<div class="note-content">
				<h4><b>Subscription Expired!</b></h4>
				<a href="{{url('cp/billing?tab=subscriptions')}}" class="btn btn-xs btn-primary width-70 "><i class="fa fa-recycle"></i> Renew</a>
			</div>
		</div>
	@endif
	@if(auth()->user()->hasAnyRole(setting('mp_customer_usergroups') OR auth()->user()->is_admin))
		@php
			$h = new Mp_hire();
			$hires = $h->where('customer_id', $this->user->id)->where('customer_status','completed')->where('provider_status','completed')->where('reviewed',0)->get();
		@endphp
		<div class="owl-note-carousel1 owl-carousel owl-theme">
			@foreach($hires as $hire)
				<div class="item">
					<div class="note note-warning note-{{$hire->id.$hire->customer_id.$hire->provider_id}} m-b-15">
						<button type="button" class="close dismissAlert1" data-id="{{$hire->id.$hire->customer_id.$hire->provider_id}}" ><span aria-hidden="true">&times;</span></button>
						<div class="note-icon"><i class="fa fa-exclamation-triangle"></i></div>
						<div class="note-content">
							<h4><b>Review Reminder</b></h4>
							<p>Please Write a Review for {{ucwords($hire->provider()->name)}}</p>
							<button  type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#exampleModal{{$hire->id}}" class="btn btn-md btn-success"><i class="fa fa-star"></i> Rate Provider Now</button>
						</div>
					</div>
				</div>
			@endforeach
		</div>
		@foreach($hires as $hire)
			<div class="modal fade" id="exampleModal{{$hire->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
				<div class="modal-dialog" role="document" style="top: 20%;">
					<div class="modal-content">
						<form id="review-{{$hire->id}}" method="post">
							<div class="modal-header">
								<h5 class="modal-title" id="exampleModalLabel">Review</h5>
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
							<div class="modal-body">
								<div class="form-group">
									<label for="message-text" class="col-form-label">Review (max 600 characters) :</label>
									<textarea id="text-{{$hire->id}}" class="form-control" name="review"  maxlength="600"></textarea>
									<br>
									Total characters count: <span id="display-{{$hire->id}}">0</span> chars. Characters left: <span id="word-{{$hire->id}}">600</span>
								</div>
								<div class="form-group gstore-review-submit">
									<label for="message-text" class="col-form-label">Rating :</label>
									<fieldset class="gstore-rate">
										<input type="radio" id="rating10{{$hire->id}}" name="rating" value="5" /><label for="rating10{{$hire->id}}" title="5 stars"></label>
										<input type="radio" id="rating8{{$hire->id}}" name="rating" value="4" /><label for="rating8{{$hire->id}}" title="4 stars"></label>
										<input type="radio" id="rating6{{$hire->id}}" name="rating" value="3" /><label for="rating6{{$hire->id}}" title="3 stars"></label>
										<input type="radio" id="rating4{{$hire->id}}" name="rating" value="2" /><label for="rating4{{$hire->id}}" title="2 stars"></label>
										<input type="radio" id="rating2{{$hire->id}}" name="rating" value="1" required /><label for="rating2{{$hire->id}}" title="1 star"></label>
									</fieldset>
								</div>
								<input type="hidden" name="object_id" value="{{$hire->provider_id}}" />
								<input type="hidden" name="related_object_id" value="{{$hire->id}}" />
								<input type="hidden" name="hire_id" value="{{$hire->id}}" />
								<div class="review-res-{{$hire->id}} alert alert-info" style="display:none">

								</div>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
								<button type="submit" class="btn btn-primary">Submit</button>
							</div>
						</form>
					</div>
				</div>
			</div>
			<script>
				// Review text Counter & Limiter
				$("#text-{{$hire->id}}").on('keyup', function() {
					var chars = this.value.length;
					$('#display-{{$hire->id}}').text(chars);
					$('#word-{{$hire->id}}').text(600 - chars);
				});
				// Reviews
				$('#review-{{$hire->id}}').on('submit', function(e){
					e.preventDefault();
					var data = $(this).serialize();
					$.ajax({
						type:'POST',
						url: site_root + 'mp/ajax/rate_profile',
						data : data,
					}).done(function(response){
						if(response) {
							response = JSON.parse(response);
							if (response.success === 'true') {
								$('.review-res-{{$hire->id}}').empty().append(response.message).slideDown().delay(2500).slideUp('fast', function(){
									location.reload();
								});
							} else {
								$('.review-res-{{$hire->id}}').empty().append(response.message).slideDown().delay(2500).slideUp();
							}
						}
					});
				});
			</script>
		@endforeach
		<script>
			$( document ).ready(function() {

				var owl1 = $(".owl-note-carousel1").owlCarousel({
					//loop: true,
					mouseDrag: false,
					touchDrag: false,
					pullDrag: false,
					rewind: true,
					autoplay: true,
					nav: false,
					items: 1,
					itemsDesktop: false,
					itemsDesktopSmall: false,
					itemsTablet: false,
					itemsMobile: false,
					smartSpeed: 700,
					dots: false,
					autoplayHoverPause: true,
				});

				$(".dismissAlert1").on("click", function (e) {
					e.preventDefault();

					if($('.owl-note-carousel1').length) {
						owl1.on('click', '.owl-item', function (e) {
							var carousel = $('.owl-note-carousel1').data('owl.carousel');
							e.preventDefault();
							carousel.to(carousel.relative($(this).index()));
							owl1.trigger('remove.owl.carousel', [$(this).index()]).trigger('refresh.owl.carousel');
						});
					}
				});
			});
		</script>
	@endif
</div>