{% extends 'App::base.html.twig' %}

{% block title %}Premium
{% endblock %}

{% block stylesheets %}

	<link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet">
	<style>

		@font-face {
		font-family: "Kimberley";
		src: url(/assets/webfonts/Signika-VariableFont_wght.ttf) format("truetype");
		}

		.radio input {

			margin-left: 10px;

		}
		.mandatory-star {
			color: red;
			font-size: 25px;
		}
		.mandatory-text {
			color: red;
		}
		.h1_style {
			font-family: 'Nunito';
			font-style: normal;
			font-weight: 900;
			font-size: 40px;
			color: #3498db;
		}
		.price_style {
			font-family: "Kimberley", sans-serif;
			color: #2f3640;
			font-size: 18px;
		}
		.h2_style {
			font-family: 'Nunito';
			font-style: normal;
			font-weight: 900;
			font-size: 30px;
			color: #353b48;
		}

		.btn-custom {
			font-family: 'Nunito';
			font-style: normal;
			font-weight: 900;
			font-size: 22px;
			color: white;
		}

		.pricing-font {
			font-family: 'Nunito';
			font-style: normal;
			font-weight: 900;
		}
		.btn-custom-free {
			font-family: 'Nunito';
			font-style: normal;
			font-weight: 900;
			font-size: 22px;
			color: #2980b9;
		}
		.front_page_blur {
			display: none;
		}
		.slideAnim {
			display: block;
			animation-name: slide;
			animation-duration: 2s;
		}
	</style>

{% endblock %}

{% block body %}
<div class="container">
	<div class="row">
		<div class="col-md-12">

	<div class="my-3 p-3 bg-white rounded box-shadow">
		<h6 class="border-bottom border-gray pb-2 mb-0">
			<span data-feather="zap"></span>
			Devenez Premium !</h6>

		<div class="row">
			<div class="col-md-12">

				<!--
				<div class="text-center">
					<div class="h1_style">
						<span data-feather="zap"></span>
						Premium
						<span data-feather="zap"></span>
					</div>
					<div class="h2_style">Boostez la visibilité de votre profil</div>
				</div>
				-->


				{% if lastPremium %}
					<div class="alert alert-primary m-3 d-flex align-items-center" role="alert">
						<div class="text-sm-start">
							<span data-feather="info"></span> Vous avez déjà un abonnement en cours. Votre prochaine commande prendra donc effet à partir du <b>{{ lastPremium.dateEnd|date('d/m/Y à H:i') }}</b>. Vous pouvez ainsi cummuler les abonnements.
						</div>
					</div>
				{% endif %}	

				<ul class="nav nav-tabs mt-2">
					<li class="nav-item">
					  <a class="nav-link active" aria-current="page" href="{{ path('app_setting_premium') }}">Premium</a>
					</li>
					<li class="nav-item">
					  <a class="nav-link" href="{{ path('app_patronage_index') }}">Parrainage</a>
					</li>
				</ul>

<ul class="nav mt-2" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Nos offres</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Vos paiements</a>
  </li>

</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">


<br/>
						<ul class="list-group">



							<li class="list-group-item p-4">
								<div class="d-flex w-100 justify-content-between">
									<h4><img src="/img/icons/premium.svg" width="60"/>
										Indépendant : Boostez la visibilité de votre profil</h4>
	
								</div>
								<ul class="text-left mb-4">
									<li><span class="badge rounded-pill bg-success">Annonce épinglée</span> Diffusez vos annonces dans les premiers résultats de recherche.</li>
									<li style="color:#57606f;">Publiez vos annonces.</li>
									<li style="color:#57606f;">Recevez des demandes de cours.</li>
								</ul>

							  	<div class="row text-center">
    							
								
  {% for pr in prices %}
    <div class="col-6 col-md-3 mb-4">
      <div class="card shadow-sm border-0 h-100 pricing-card position-relative">

        {% if hasReduction %}
          <span class="badge bg-warning text-dark position-absolute top-0 end-0 m-2 px-3 py-2 fw-bold">
            -50%
          </span>
        {% endif %}

        <div class="card-body d-flex flex-column justify-content-between">
          <div>
            <h4 class="fw-bold text-primary mb-3">{{ pr.name }}</h4>

            <div class="price_style mb-2">
              <span class="display-5 fw-semibold text-dark">
                {{ pr.price|number_format(2, ',', ' ') }}<sup>€</sup>
              </span>
            </div>

            {% if hasReduction %}
              <div class="text-muted" style="font-size: 16px;">
                <strike>{{ (pr.price * 2)|number_format(2, ',', ' ') }}€</strike>
                <span class="fw-bold text-warning ms-1">–50%</span>
              </div>
            {% endif %}

            <p class="mt-3 mb-0 text-secondary">
              Boostez votre profil pendant <b>{{ pr.name }}</b> — sans engagement
            </p>
          </div>

          <div class="mt-4">
            <a href="{{ path('app_paypal_index', {
              'formule': pr.id,
              'codeParrainage': codeParrainage,
              'codeReduction': codeReduction
            }) }}"
            class="btn btn-lg btn-outline-primary rounded-pill px-4 py-2 fw-semibold">
              Choisir
            </a>
          </div>
        </div>
      </div>
    </div>
  {% endfor %}
							

							</li>
							<li class="list-group-item p-4">
								<div class="d-flex w-100 justify-content-between">
									<h4>Gratuit</h4>
									<small class="text-muted">
										<span class="price_style">0<sup>€</sup>
										</span>
										<span style="color:#7f8c8d;">
											/ mois</span>
									</small>
								</div>
								<ul class="text-left">
									<li style="color:#57606f;">Publiez vos annonces.</li>
									<li style="color:#57606f;">Recevez des demandes de cours.</li>
								</ul>
							</li>
							<li class="list-group-item p-4">

							
								<div class="d-flex w-100 justify-content-between">
									<h4>Organisme</h4>
									
								</div>
								<p>Vous êtes un organisme de soutien scolaire ? Pour plus d'informations, remplissez le formulaire de contact.</p>
								<p  class="text-end"><a href="{{ path('app_organismes') }}"  type="button" class="btn btn-outline-primary text-right">Nous contacter</a></p>
							</li>

						</ul>
  
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
  
  						<div class="mt-3">
							{% if premia|length > 0 %}

								<h6>Historique de vos paiements</h6>

								<table class="table table-striped">
									<thead>
										<tr>
											<th scope="col">#</th>
											<th scope="col">Commande</th>
											<th scope="col">Montant</th>
											<th scope="col">Payé le
											</th>
											<th scope="col">Reçu</th>
										</tr>
									</thead>
									<tbody>

										{% for premium in premia %}
											<tr>
												<th scope="row">{{ premium.id }}</th>

												<td>
													{% if premium.amount == 29 %}
														<b>Abonnement 1 mois</b>
													{% elseif premium.amount == 79 %}
														<b>Abonnement 3 mois</b>
													{% elseif premium.amount == 149 %}
														<b>Abonnement 6 mois</b>
													{% endif %}
												</td>

												<td>{{ premium.amount }}€</td>
												<td>{{ premium.paidAt|date('d-m-Y à H:i') }}</td>
												<td>
													{% if premium.receiptUrl %}
														<a class="btn btn-sm btn-text" target="_blank" href="{{ premium.receiptUrl }}">Voir le reçu</a>
													{% else %}
														<a class="btn btn-sm btn-text" target="_blank" href="{{ path('app_setting_payment_paypal_receipt', {'premiumId': premium.id })}}">Voir le reçu</a>
													{% endif %}
												</td>
											</tr>
											{% else %}

										{% endfor %}

									</tbody>
								</table>
							{% else %}
								<p style="color: #a4b0be;">Vous avez effectué
									<b>0</b>
									paiement.</p>
							{% endif %}

						</div>
  </div>

  <div class="tab-pane fade" id="patronage" role="tabpanel" aria-labelledby="patronage-tab">
	
  	<div class="mt-3">						
		<h6>Parrainage</h6>
		<hr />

		{% if app.user.profile and app.user.profile.patronageToken %}
		
			<p>Vous souhaitez devenir parrain ?
			ou bien profiter d'une offre en tant que filleul pour RueduProf ? Ce lien vous permettra de parrainer automatiquement vos futurs filleuls.
			<br />
			Lien parrain à coller dans votre navigateur pour profiter de la promo de parrainage :</p>
			<div class="row">
				<div class="col-sm-8">
					<div class="input-group mb-3">
						<input class="form-control" name="number-only" id="number-only" value="{{ app.request.getSchemeAndHttpHost() }}/setting/premium/?codeParrainage={{ patronageToken }}">
						<button class="btn btn-outline-primary js-textareacopybtn" type="button" id="button-addon2">Copier</button>
					</div>
				</div>
			</div>
			<p>Nouvelle inscription :</p>
			<div class="row">
				<div class="col-sm-8">
					<div class="input-group mb-3">
						<input class="form-control" name="number-only-reg" id="number-only-reg" value="{{ app.request.getSchemeAndHttpHost() }}/register?codeParrainage={{ patronageToken }}">
						<button class="btn btn-outline-primary js-textareacopybtn-reg" type="button" id="button-addon2">Copier</button>
					</div>
				</div>
			</div>

			<p> ou rentrez directement le code parrain <b style="color:#3498db;">{{ patronageToken }}</b> lors du paiement.
			Conditions de l'offre :</p>
			<div class="row">
				<div class="col-sm-8">
					<div class="input-group mb-3">
						<input class="form-control" name="number-only-code" id="number-only-code" value="{{ patronageToken }}">
						<button class="btn btn-outline-primary js-textareacopybtn-code" type="button" id="button-addon2">Copier</button>
					</div>
				</div>
			</div>
		{% else %}

			<p>Vous souhaitez devenir parrain ?
			ou bien profiter d'une offre en tant que filleul pour RueduProf ?</p>

			<p>Ce lien vous permettra de parrainer automatiquement vos futurs filleuls.</p>
			<hr />

			{{ form_start(form) }}
			{{ form_widget(form._token) }}
			{{ form_end(form) }}

		{% endif %}

	</div>
  </div>
</div>
				
				</div>
			</div>
		</div>
	</div>


	</div>
  </div>
</div>
{% endblock body %}

{% block javascripts %}
	<script>

		// const input = document.getElementById('number-only');
		$('.js-textareacopybtn-reg').on('click', function(event) 
		{
			var copyTextarea = $(this).data('id');
			$('#number-only-reg')[0].select();

			try 
			{
				var successful = document.execCommand('copy');
				var msg = successful ? 'successful' : 'unsuccessful';
				console.log('Copying text command was ' + msg);
			} catch (err) 
			{
				console.log('Oops, unable to copy');
			}
		});

		// const input = document.getElementById('number-only');
		$('.js-textareacopybtn-code').on('click', function(event) 
		{
			var copyTextarea = $(this).data('id');
			$('#number-only-code')[0].select();

			try 
			{
				var successful = document.execCommand('copy');
				var msg = successful ? 'successful' : 'unsuccessful';
				console.log('Copying text command was ' + msg);
			} catch (err) 
			{
				console.log('Oops, unable to copy');
			}
		});

		$('.js-textareacopybtn').on('click', function(event) 
		{
			var copyTextarea = $(this).data('id');
			$('#number-only')[0].select();

			try 
			{
				var successful = document.execCommand('copy');
				var msg = successful ? 'successful' : 'unsuccessful';
				console.log('Copying text command was ' + msg);
			} catch (err) 
			{
				console.log('Oops, unable to copy');
			}
		});

	</script>
{% endblock %}