{% extends '@syndexTrack/layout.html.twig' %}


{% trans_default_domain "PartnerContent" %}

{% block title %}
	{{ 'content_title'|trans({'%Content_Title%':partnerContent.title}) }}
{% endblock %}


{% block stylesheets %}
	{{ parent() }}
	<link rel="stylesheet" type="text/css" href="{{ asset('bundles/user/css/store.css?0.1') }}"/>
	<link rel="stylesheet" type="text/css" href="{{ asset('bundles/comment/css/ShamraComments.css') }}"/>
	<link rel="stylesheet" type="text/css" href="{{ asset('bundles/syndextrack/css/list.css') }}"/>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>	
	<style>
		#partner_content {
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		}
		.content-title {
			font-size: 20px;
			font-weight: bold;
			color: rgb(0, 165, 80);
		}
		.content-detail-header {
			margin-bottom: 10px;
		}
		.profile-pic img {
			width: 100%;
			max-width: 400px;
		}
		/*//confirmation Delete modal//*/

		.confirm-modal .modal-title {
			font-weight: 600;
			color: #6d6464;
		}

		.confirm-modal .modal-title i {
			color: #ffa551;
			font-size: 17px;
		}

		.confirm-modal .contentConfirmDeleteBtn {
			background-color: #ffa551;
			border-color: #feb066;
		}

		.confirm-modal .contentConfirmDeleteBtn:hover {
			background-color: #ff8600;
		}

		.confirm-modal .modal-footer button {
			border-radius: 2px;
			padding: 5px 9px;
			font-size: 13px;
		}

		.confirm-modal .cancelBtn {
			border: 1px solid #cec7c7;
		}
		/*//vertically center the modal//*/
		.confirm-modal.modal {
			text-align: center;
			padding: 0!important;
		}

		.confirm-modal.modal:before {
			content: '';
			display: inline-block;
			height: 100%;
			vertical-align: middle;
			margin-right: -4px;
		}

		.confirm-modal .modal-dialog {
			display: inline-block;
			text-align: right;
			vertical-align: middle;
		}
		/*//////////////*/
		.confirm-modal .modal-dialog {
			max-width: 400px;
			text-align: center;
		}
		.confirm-modal .modal-footer {
			text-align: center;
		}
	</style>
{% endblock %}


{% block body %}
	{% set img = asset('uploads/privateCard/partnerContent/') %}

    {% set route = app.request.attributes.get('_route') %}
    {% set raters = partnerContent.getReviews | length %}

	{% set isAccepted = partnerContent.status == "accepted" %}
	{% set isReviewing = partnerContent.status == "REVIEWING" %}
	
	{% set isUserOwnContent = app.user and app.user == partnerContent.userId %}

	{% if route == 'content_detail' %}
		<div class="container" style="margin-bottom: 50px;">
			<div class="row">
				<div class="col-md-6 col-xs-12">
					<form method="POST" action="{{path('content_review' , {'slug':partnerContent.slug})}}">
							<div class="form-group">
								<label class="control-label" for="feedback"> feedback </label>
								<textarea class="form-control" name="feedback" id="feedback">
								</textarea>
							</div>
							<div class="form-group">
								<select name="status" >
									<option value="REVIEWING" >REVIEWING</option>
									<option value="accepted"  >accepted</option>
									<option value="disapprove">disapprove</option>
								</select>
								<p style="display:inline-block">
									the current status is: {{partnerContent.status}}
								</p>
							</div>
							<div class="form-group">
								<button class="btn submit-button"type="submit">submit</button>
							</div>
					</form>
				</div>
				<div class="col-md-6 col-xs-12">
					<a style="margin-inline-start:auto" href="{{ path('app_partner_content_update' , {'slug':partnerContent.slug })}}?admin=true">
						<span style="margin:5px;" class="btn btn-success" data-toggle="tooltip">
							{{'store.review.update' | trans}}
						</span>
					</a>
					<a id="content_delete" data-href="{{ path('app_partner_content_delete' , {'slug':partnerContent.slug })}}?admin=true">
						<span style=" margin:5px;" class="btn btn-warning" data-toggle="tooltip">
							{{'store.review.delete' | trans}}
						</span>
					</a>
				</div>
			</div>
		</div>
	{% endif %}
{#  #}
	<div id="content_slug" data-slug="{{partnerContent.slug}}" hidden> </div>
	<div id="storePath" data-path="{{path('app_partner_content_store' , {'_locale':app.request.locale } )}}" hidden> </div>

	<div id="partner_content" class="container">
		<div id="course-container" class="row">
			<div class="profile-pic col-md-4 col-xs-12">
				<img src='{{asset('uploads/privateCard/partnerContent/'~partnerContent.CoverImage)}}' onerror="this.onerror=null; this.src='{{asset('img/'~partnerContent.getDefaultCoverImage)}}'">
				{% if (isUserOwnContent and not isAccepted) or route == 'content_detail'  %}
					<div class="edit">
						<form id="form_content_imageCover" action="{{ path('edit_content_image' , {'slug': partnerContent.slug}) }}{% if route == 'content_detail'%}?admin=true{% endif %}" method="POST" enctype="multipart/form-data">
							<button onclick="select();">
								<i class="fa fa-camera"></i>
							</button>
							<input type="file" name="file" id="content_imageCover" required="required" tabindex="-1" style="position: absolute; clip: rect(0px, 0px, 0px, 0px);">
						</form>
					</div>
				{% endif %}
			</div>
			<div class="col-md-8 col-xs-12">
				<div class="content-title">
					{{partnerContent.title}}
				</div>
				<div class="content-detail-header">
					<span class="field research-keyword">
						<a style="font-weight:bold;" href="{{ path('app_partner_content_store') }}?field={{ partnerContent.categroyId }}">{{ partnerContent.categroyId }}</a>
					</span>
					{% for tag in partnerContent.keywords %}
						<span class="field research-keyword">
							<a href="{{ path('app_partner_content_store') }}?tags[]={{ tag }}">{{ tag }}</a>
						</span>
					{% endfor %}
				</div>
				<div class="meta" style="color:#90949c;display: flex; margin-bottom:10px;">
					<span id="rates" class="meta pad">
						<i class="fa fa-user" data-toggle="tooltip" title="{{ 'form.rate.lesson.all-rater'|trans({},'lesson') }}"></i>
						<span class="number-of-raters">{{raters}}</span>
						&nbsp;
					</span>

					<span title="{{ 'track.buy'|trans({},'track') }}" data-toggle="tooltip">
						<i style="color:#90949c" class="fa fa-shopping-cart academia-icon"></i>
						{{partnerContent.userPurchase|length}}
						&nbsp;
					</span>

					<span data-toggle="tooltip">
						<i style="color:#90949c" class="fa fa-calendar academia-icon"></i>
						{{partnerContent.createdAt|date('Y-m-d')}}
					</span>
					
					{% if( not isAccepted and isUserOwnContent) and route != 'content_detail' %}
						<a style="margin-inline-start:auto" href="{{ path('app_partner_content_update' , {'slug':partnerContent.slug })}}">
							<span style="margin:5px;" class="btn btn-success" data-toggle="tooltip">
								{{'store.review.update' | trans}}
							</span>
						</a>
						<a id="content_delete" data-href="{{ path('app_partner_content_delete' , {'slug':partnerContent.slug })}}">
							<span style=" margin:5px;" class="btn btn-warning" data-toggle="tooltip">
								{{'store.review.delete' | trans}}
							</span>
						</a>
					{% endif %}
					
				</div>


				<div class="course_info">
				<p>
					{{partnerContent.description |raw | nl2br}}
				</p>
					<div class="card-footer row" style="display:flex; flex-wrap:wrap">
						{% if app.user and app.user != partnerContent.UserId and not isCustomer %}
							<div class="new_lesson" style="max-width:150px;margin-right:15px;">
								<button id="checkout-button-{{partnerContent.slug}}" class="new-button btn" style="width:auto;">
									<i class="fa fa-shopping-cart"></i>
									{{ 'store.buy'|trans }}
									${{partnerContent.price}}
								</button>
							</div>
						{% elseif app.user == null %}
							<div class="new_lesson" style="max-width:150px;margin-right:15px;">
								<button id="" onclick="window.location = '/login?next={{ path('app_partner_content_detail' , {'slug' : partnerContent.slug} ) }}' " class="new-button btn" style="width:auto;">
									<i class="fa fa-shopping-cart"></i>
									{{ 'store.buy'|trans }}
									${{partnerContent.price}}
								</button>
							</div>
						{% endif %}
						{% if isCustomer %}
							<div class="new_lesson" style="max-width:150px;margin-right:15px;">
							<a href="{{asset('uploads/privateCard/partnerContent/'~partnerContent.ContentPdf)}}" download="{{partnerContent.ContentPdf}}" class="new-button btn" style="width:auto;">
								<i class="fa fa-download"></i>
								{{ 'store.download'|trans }}
							</a>
						</div>
						{% endif %}
						{% if partnerContent.samplePdf %}
							<div class="new_lesson" style="max-width:150px;margin-right:15px;" data-toggle="tooltip" title="{{'store.show_title'|trans}}">
								<a href="{{asset('uploads/privateCard/partnerContent/'~partnerContent.samplePdf)}}" download="{{partnerContent.samplePdf}}" class="new-button btn" style="width:auto;">
									<i class="fa fa-download"></i>
									{{ 'store.show'|trans }}
								</a>
							</div>
						{% endif %}
							 <div class="share-buttons">
								{% set share_path = "https://shamra-academia.com/" ~ "partner-content/" ~ app.request.attributes.get('_route_params')["slug"] %}
								{# <div class="fb-share-button" data-href="{{ share_path }}" data-layout="button"></div> #}
								<div>
									<a href="https://twitter.com/share" class="twitter-share-button" {count} data-url="{{ share_path }}" data-text="{{partnerContent.title}}" data-via="ShamraSyria">Tweet</a>
								</div>

								 <script>!function (d, s, id) {
									var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
									if (!d.getElementById(id)) {
										js = d.createElement(s);
										js.id = id;
										js.src = p + '://platform.twitter.com/widgets.js';
										fjs.parentNode.insertBefore(js, fjs);
									}
								}(document, 'script', 'twitter-wjs');</script>

								<script src="//platform.linkedin.com/in.js" type="text/javascript">
									lang : ar_AE
								</script>
								<script type="IN/Share" data-url="{{ share_path }}"></script>
							</div> 
					</div>

				</div>

				{% if isUserOwnContent %}
					<div style="margin-top:25px;">
						{% if isAccepted %}
							<div class="alert alert-success" style="text-align:center;">
									{{ 'Accepted_status'|trans }} 
							</div>
						{% elseif isReviewing %}
								<div class="alert alert-warning" style="text-align:center;">
									{{ 'Reviewing_status'|trans }} 
								</div>
						{% else %}
								<div class="alert alert-warning" style="text-align:center; color: #721c24; background-color: #f8d7da; border-color: #f5c6cb;">
									{{ 'Deleted_status'|trans }} 
								</div>
						{% endif %}
					</div>
				{% endif %}

			</div>
		</div>


	</div>
		<div id="review_section_container" class="container" style="margin-top:20px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);" data-fullrate="{{partnerContent.getContentRating}}">
			<div class="" style="padding:20px;">
				<span class="" style="color:rgb(0, 165, 80); ">{{'store.review.overall_rating' | trans}}</span>
				<span class="fa fa-star-o medium  full-rate fstar_1" style="color: #FD4" data-rate="1" data-toggle="tooltip" title="{{ 'rate.bad'|trans }}"></span>
				<span class="fa fa-star-o medium  full-rate fstar_2" style="color: #FD4" data-rate="2" data-toggle="tooltip" title="{{ 'rate.fair'|trans }}"></span>
				<span class="fa fa-star-o medium  full-rate fstar_3" style="color: #FD4" data-rate="3" data-toggle="tooltip" title="{{ 'rate.good'|trans }}"></span>
				<span class="fa fa-star-o medium  full-rate fstar_4" style="color: #FD4" data-rate="4" data-toggle="tooltip" title="{{ 'rate.veryGood'|trans }}"></span>
				<span class="fa fa-star-o medium  full-rate fstar_5" style="color: #FD4" data-rate="5" data-toggle="tooltip" title="{{ 'rate.excellent'|trans }}"></span>
			</div>
			{% set route = app.request.attributes.get('_route') %}
					<div class="loader_class" id="loader{{partnerContent.slug}}" style="display:none;text-align: center;vertical-align: middle">
						<div class="loadingio-spinner-dual-ring-fbofjcjq6x4">
							<div class="ldio-unzl005xvm">
								<div></div>
								<div>
									<div></div>
								</div>
							</div>
						</div>
					</div>
					<div style="padding:10px; color:rgb(0, 165, 80); font-size:16px">
						<i class="fa fa-comments"></i>
							{{'store.review.reviews'|trans}}(<span class="number-of-raters">{{raters}}</span>)
					</div>
					<hr>
					<div id="review_container{{partnerContent.slug}}">
						{% include "partner_content/review_brief.html.twig" with{
											'partnerContent':partnerContent,
											'isCustomer':isCustomer,
											'isUserReviewed':isUserReviewed,
										} %}
					</div>
		</div>

	{% include "partner_content/contentConfirmationModal.html.twig" with {
		fileName : partnerContent,
	} %}

{% endblock %}



{% block javascripts %}
    {{parent()}}
	<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
	<script src="{{ asset('bundles/user/js/review.js') }}"></script>
	<script src="https://js.stripe.com/v3/"></script>
	<script src="{{ asset('bundles/comment/js/shamraComments.js') }}"></script>
	{% if app.user and app.user != partnerContent.UserId and not isCustomer %}
		<script type="text/javascript">
				// Create an instance of the Stripe object with your publishable API key
				$(document).ready(function () {
					var stripe = Stripe("{{ pk_key }}");
					var checkoutButton = document.getElementById('checkout-button-{{partnerContent.slug}}');
					checkoutButton.addEventListener('click', function() {
						$('#checkout-button-{{partnerContent.slug}}').text('الرجاء الانتظار');
						fetch('{{ path("syndex_partner_content_payment",{"slug":partnerContent.slug}) }}', {
							method: 'POST'
						})
						.then(function(response ) {
							if(response.status != 404 ){
								return response.json();
							}
							throw new Error();
						})
						.then(function(session) {
							return stripe.redirectToCheckout({ sessionId: session.id });
						})
						.catch((error)=>{
							$(document).on('click','#checkout-button-{{partnerContent.id}}',function () {
								$('#checkout-button-{{partnerContent.id}}').text('حدث خطاء, يرجى المحاولة مرة اخرى');
							})
						})
					});
				});
			
			</script>
	{% endif %}
		
		 <script>
			const select = ()=>{
				$('#content_imageCover').click();
			}
			$('#content_imageCover').on('change' , ()=>{
				$('#form_content_imageCover').submit();
			});

			$('#content_delete').click(function(){
				$('#content-confirm-delete-modal').modal('show');
			});
			$('.contentConfirmDeleteBtn').click(function() {
				window.location = $('#content_delete').data('href');
			})
		</script>
{% endblock %}