{% trans_default_domain "PartnerContent" %}

<style>
	.swiper-button-next{
		--swiper-navigation-size: 20px;
		color:rgb(0, 165, 80);
	}
	.swiper-button-prev{
		--swiper-navigation-size: 20px;
		color:rgb(0, 165, 80);
	}
	.swiper-pagination-bullet-active{
		background-color:rgb(0, 165, 80);
	}
	.review-slide{
		margin-bottom: 50px;
		margin-top:10px;
		border-radius: 5px;
		padding: 10px;
		width:80%;
		min-height: 150px;
		box-shadow: 0px 0px 2px 1px #939393;
	}
	.swiper-slide-review{
		display:flex;
		justify-content:center;
	}
	.review-para{
		padding:20px;
		padding-inline-start:10px;
	}
</style>

{% set reviews = partnerContent.reviews %}
{% set slug = partnerContent.slug %}

<div style="width: 100%; display: flex; justify-content: center;">
	{% if reviews is not empty %}

		<!-- Slider main container -->
		<div
			class="swiper" style="width:100%">
			<!-- Additional required wrapper -->
			<div
				class="swiper-wrapper">
				<!-- Slides -->
				{% for review in reviews %}
					{% set review_user = review.createdBy %}
					{% set isUserReview = app.user and app.user == review_user %}
					<div class="swiper-slide swiper-slide-review">
						<div class="review-slide" data-review="{% if isUserReview %}user{% else %}review{% endif %}">
							<div class="">
								<div class="" style="margin:10px; display:flex">
									{% if review_user.image == "default_profile_pic_m.png" or review_user.image == "default_profile_pic_f.png" %}
										{% set getWebPath = "/bundles/user/img/" %}
									{% else %}
										{% set getWebPath = "/uploads/profile/img" %}
									{% endif %}
									<img src="{{getWebPath}}/{{review_user.image}}" style="border-radius:100%;" width='40' height='40'>
									<span class="username-truncate" style="font-weight:bold; margin-inline-start:0px; padding:10px; margin-top: 5px; padding-top: 0; padding-inline-end: 0;">
										{% if isUserReview %}
											{{'me'|trans}}
										{% else %}
											{{ review_user.firstName ~ ' ' ~ review_user.lastName }}
										{% endif %}
										<div style="font-size:10px;">
											{% set user_details = review_user.work ~ review_user.studyDegree ~ review_user.studyField %}
											{{user_details | slice(0 , 20)}}
										</div>
									</span>
									<div class="dropdown" style=" margin-inline-start:auto;">
										<a href="#" class="dropdown-toggle" id="commentDropdown" data-toggle="dropdown" aria-haspopup="true"
										aria-expanded="true">
											<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
										</a>
										<ul class="dropdown-menu" aria-labelledby="commentDropdown" style="inset-inline-start:-150px; top:30%;" data-id="{{review.id}}">
											{% if isUserReview  %}
												<li>
													<a class="review-delete" title="{{ 'store.review.delete' | trans }}" >{{ 'store.review.delete' | trans }}</a>
												</li>
												<li>
													<a class="review-update" title="{{ 'store.review.update' | trans }}" data-rate="{{review.rating}}">{{ 'store.review.update' | trans }}</a>
												</li>
											{% else %}
												<li>
													<a data-report="review" data-itemid="">{{ 'store.review.report' | trans }}</a>
												</li>
											{% endif %}
											
										</ul>
									</div>

								</div>
								
								<div class="review-rating" data-rating="{{review.rating}}">
									<i class="fa fa-star-o rstar_1" style="color:#FD4;"></i>
									<i class="fa fa-star-o rstar_2" style="color:#FD4;"></i>
									<i class="fa fa-star-o rstar_3" style="color:#FD4;"></i>
									<i class="fa fa-star-o rstar_4" style="color:#FD4;"></i>
									<i class="fa fa-star-o rstar_5" style="color:#FD4;"></i>
									<span class="comment-date">
										<time datetime=" {{ review.createdAt|date('Y-m-d H:i:s') }}">
										</time>
									</span>
								</div>
							</div>
							<p class="review-para">
								{% if review | length > 80 %}
									{{review| slice(0,80)}}...
								{% else %}
									{{review}}
								{% endif %}
							</p>
						</div>
					</div>
				{% endfor %}

			</div>
			<!-- If we need pagination -->
			<div class="swiper-pagination"></div>

			<!-- If we need navigation buttons -->
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>

		</div>


	{% else %}
		<p style="padding:25px;">
			{{'store.review.noReviews'|trans}}
		</p>
	{% endif %}
</div>
{% if app.user and isCustomer %}

		<div class="" style="padding:20px;">
			<span class="" style="color:rgb(0, 165, 80); ">
				{% if not isUserReviewed %}
					{{'store.review.rate' | trans}}
				{% else %}
					{{'store.review.yourRate' | trans}}
				{% endif %}
			</span>
			 <span style="color:#7d7d7d; font-size:10px;">
				{% if not isUserReviewed %}
					({{'store.review.new_review' | trans}})
				{% else %}
					({{'store.review.update_review' | trans}})
				{% endif %}
			 </span>
			<span class="fa fa-star-o medium  full-rate star_1" style="color: #FD4" data-rate="1" data-toggle="review"></span>
			<span class="fa fa-star-o medium  full-rate star_2" style="color: #FD4" data-rate="2" data-toggle="review"></span>
			<span class="fa fa-star-o medium  full-rate star_3" style="color: #FD4" data-rate="3" data-toggle="review"></span>
			<span class="fa fa-star-o medium  full-rate star_4" style="color: #FD4" data-rate="4" data-toggle="review"></span>
			<span class="fa fa-star-o medium  full-rate star_5" style="color: #FD4" data-rate="5" data-toggle="review"></span>
		</div>

	<div class="review-container" style="display:none;">
		<div>
			<div class="modal-dialog" >
				<div class="modal-content" style="box-shadow: none; border: none;">
				<div class="modal-header">
				{% if isUserReviewed %}
					<h5 class="modal-title" id="reviewUpdateModalLabel">{{'store.review.update_review'|trans}}:</h5>
					{% else %}
					<h5 class="modal-title" id="reviewModalLabel">{{'store.review.new_review'|trans}}:</h5>
				{% endif %}
				</div>
				<div class="modal-body">
					<form id="reviewForm">

					<div class="form-group"style="color:rgb(204, 204, 204);">
						<i class="fa fa-star" id="modal_star1" ></i>
						<i class="fa fa-star" id="modal_star2" ></i>
						<i class="fa fa-star" id="modal_star3" ></i>
						<i class="fa fa-star" id="modal_star4" ></i>
						<i class="fa fa-star" id="modal_star5" ></i>
					</div>

					<div class="form-group">
						<label for="review-text" class="col-form-label">{{'store.review.text'|trans}}:</label>
						<textarea class="form-control" id="review-text" name="reviewText" ></textarea>
					</div>

					<input type="hidden" id="starIdInput" name="starId" value="">
					<input type="hidden" id="cardSlugInput" name="slug" value="">
					</form>
				</div>
				<div class="modal-footer">
					<button type="submit" class="btn btn-secondary" id="cancel_review_btn">{{'store.review.skip'|trans}}</button>
					{% if isUserReviewed %}
						<button type="submit" class="btn" id="update_review_btn" style="background-color:#00a550; color:white">{{'store.review.update'|trans}}</button>
					{% else %}
						<button type="submit" class="btn" id="sumbit_review_btn" style="background-color:#00a550; color:white">{{'store.review.review'|trans}}</button>
					{% endif %}
				</div>
				</div>
			</div>
		</div>	
	</div>
{% else %}
	{% if app.user == partnerContent.userId %}
	
	{% else %}	
		<div class="alert alert-warning" role="alert">
				{{ 'store.haveToBuyForReview'|trans }}
		</div>
	{% endif %}
{% endif %}

{% include '@Comment/commentViews/confirmationModal.twig' %}