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

{% block title %}Parrainage{% endblock %}

{% block stylesheets %}{% endblock %}

{% block body %}

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


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


	<ul class="nav nav-pills mt-4 mb-4">
		<li class="nav-item">
		  <a class="nav-link active" aria-current="page" href="{{ path('app_patronage_index') }}">Lien de parrainage</a>
		</li>
		<li class="nav-item">
		  <a class="nav-link" href="{{ path('app_patronage_list') }}">Voir vos filleuls</a>
		</li>
	</ul>

		<h3>Vous souhaitez devenir parrain ?</h3>
		<p>	
			Ce lien vous permettra de parrainer automatiquement vos futurs filleuls. 
			<p>Commencez dès maintenant, en partageant votre lien de parrainage avec vos amis ou en leur envoyant votre code promo à utiliser au moment du paiement !</p>
			<hr />
			Le code parrain permet de bénéficier : 
				<ul>
					<li>Pour le <b>filleul</b> : offrez leur <span class="badge bg-primary">-50%</span> de réduction sur leur premier achat d'une Offre premium.</li>
					<li>Pour le <b>parrain</b> : Dès que leur commande est validée, vous recevrez à votre tour une promo de <span class="badge bg-primary">-50%</span> ! <a class="btn btn-sm btn-link" href="{{ path('app_patronage_list') }}">Voir vos filleuls</a></li>
				</ul>

		</p>

		{% if codeParrainage %}
		<br />
		3 solutions pour faire profiter de la promo de parrainage à vos futurs filleuls RueduProf : 
		<p>
			<ul>
				<li>Le filleul n'est pas encore inscrit ? Utilisez ce lien :</li>
			</ul>
		
		</p>
		<div class="row m-2">
			<div class="col-sm-8">
				<div class="input-group">
					<input class="form-control" name="number-only-reg" id="number-only-reg" value="{{ app.request.getSchemeAndHttpHost() }}/register?codeParrainage={{ codeParrainage }}">
					<button class="btn btn-outline-primary js-textareacopybtn-reg" type="button" id="button-addon2">Copier</button>
				</div>
				<i>Lien à coller dans votre navigateur</i>
			</div>
		</div>
		<br />
		<p>
			<ul>
				<li>Le filleul est déjà inscrit ? Utilisez ce lien :<br /> <i>Info : Un filleul peut avoir qu'un seul parrain</i> </li>
			</ul>
			
		
			
		</p>

		<div class="row m-2">
			<div class="col-sm-8">
				<div class="input-group">
					<input class="form-control" name="number-only" id="number-only" value="{{ app.request.getSchemeAndHttpHost() }}/setting/premium/?codeParrainage={{ codeParrainage }}">
					<button class="btn btn-outline-primary js-textareacopybtn" type="button" id="button-addon2">Copier</button>
				</div>
				<i>Lien à coller dans votre navigateur</i>
			</div>
		</div>
		<br />
		<p> 
			
			<ul>
				<li>Ou rentrez directement le code parrain <b style="color:#3498db;">{{ codeParrainage }}</b> lors du paiement :</li>
			</ul>
			</p>
		<div class="row m-2">
			<div class="col-sm-8">
				<div class="input-group">
					<input class="form-control" name="number-only-code" id="number-only-code" value="{{ codeParrainage }}">
					<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 ?</p>

		<p>Choisissez un code. Il vous permettra de parrainer automatiquement vos futurs filleuls à l'aide de ce code ou d'un lien.</p>

		{{ form_start(form) }}
		<div class="row g-3">
			<div class="col-auto">
			  <label for="inputPassword2" class="visually-hidden">Password</label>
			  {{ form_widget(form.code) }}
			</div>
			<div class="col-auto">
				{{ form_widget(form._token) }}
				{{ form_end(form) }}
			</div>
		</div>

		{% endif %}


</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');
			}
		});

		$('.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 %}