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

{% block body %}
{% set plan_type = app.request.query.get('type') %}
{% set plan_name = app.request.query.get('formula') %}
{% set success = app.request.query.get('success') %}

	<div class="app-main__inner">
		<div class="app-page-title">
			<div class="page-title-wrapper">
				<div class="page-title-heading">
					<div style="padding-right:15px;">
						{% if lastsubscription is not null ? lastsubscription.getSubscription().getName() == 'basic' %}
							<img src="/images/logo/plan_basique.png" style="width:70px;"/>
						{% elseif lastsubscription is not null ? lastsubscription.getSubscription().getName() == 'startup' %}
							<img src="/images/logo/plan_startup.png" style="width:70px;"/>
						{% elseif lastsubscription is not null ? lastsubscription.getSubscription().getName() == 'premium' %}
							<img src="/images/logo/plan_premium.png" style="width:70px;"/>
						{% elseif lastsubscription is not null ? lastsubscription.getSubscription().getName() == 'advanced' %}
							<img src="/images/logo/plan_advanced.png" style="width:70px;"/>
						{% elseif lastsubscription is not null ? lastsubscription.getSubscription().getName() == 'business' %}
							<img src="/images/logo/plan_business.png" style="width:70px;"/>
						{% else %}
							<img src="/images/logo/plan_free.png" style="width:70px"/>
						{% endif %}
					</div>
					<div>
						{% trans %}Obtenir un plan d'accès{% endtrans %}
						<div class="page-title-subheading">
							{% trans %}Vous êtes actuellement sur le plan d'accès{% endtrans %}
							<b>
								{{ lastsubscription is not null ? lastsubscription.getSubscription().getName() : 'Gratuit'}} 
								{{ lastsubscription is not null ? lastsubscription.getSubscriptionType() : '' }}
							</b>
						</div>
					</div>
				</div>
				<div class="page-title-actions">
					
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12 col-lg-5">
				<div class="card-shadow-primary card-border mb-3 card">
					<div class="dropdown-menu-header">
						<div class="dropdown-menu-header-inner bg-info">
							<div class="menu-header-image opacity-2" style="background-image: url('../images/dropdown-header/abstract1.jpg');"></div>
							<div class="menu-header-content btn-pane-right">
								<div class="avatar-icon-wrapper me-2 avatar-icon-xl">
									<div class="avatar-icon rounded">
										{% if app.user.profilePicture %}
											<img src="/uploads/profile_pictures/{{ app.user.profilePicture }}" width="42" />
										{% else %}
											<img src="/images/avatars/user.png" width="42" />
										{% endif %}  
									</div>
								</div>
								<div>
									<h5 class="menu-header-title">{{ user.getFirstname()}} {{ user.getLastname() }}</h5>
								</div>
								<div class="menu-header-btn-pane">
									<a href="/account/upgrade" class="ladda-button btn btn-pill btn-dark" data-style="slide-right">
										<span class="ladda-label">Changer de plan</span>
										<span class="ladda-spinner"></span>
									</a>
								</div>
							</div>
						</div>
					</div>
					<ul class="list-group list-group-flush">
						<li class="p-0 list-group-item">
							<div class="grid-menu grid-menu-2col">
								<div class="g-0 row">
									<div class="col-sm-6">
										<button class="btn-icon-vertical btn-transition btn-transition-alt pt-2 pb-2 btn btn-outline-warning">
											<i class="pe-7s-chat icon-gradient bg-amy-crisp btn-icon-wrapper mb-2"></i>
											{% trans %}Mail Box{% endtrans %}
										</button>
									</div>
									<div class="col-sm-6">
										<button class="btn-icon-vertical btn-transition btn-transition-alt pt-2 pb-2 btn btn-outline-danger">
											<i class="pe-7s-ticket icon-gradient bg-love-kiss btn-icon-wrapper mb-2"></i>
											<b>{% trans %}Invitation{% endtrans %}</b>
										</button>
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="col-md-12 col-lg-7">
				<div class="main-card mb-3 card">
					<div class="card-body">
						<form method="post" action="{{ path('app_account_payment_checkout') }}">
							<input name="plan_name" 	value="{{ plan_name }}" 	hidden>
							<input name="plan_price" 	value="{{ plan_price }}" 	hidden>
							<input name="plan_type" 	value="{{ plan_type }}" 	hidden>

							<div id="smartwizard2" class="forms-wizard-alt">
								<ul class="forms-wizard">
									<li {% if lastsubscription is not null and lastsubscription.getSubscription().getName() == plan_name and lastsubscription.getSubscriptionType() == plan_type and isSubscriptionNotexpired %} {% else %} class="active nav-link done" {% endif %}>
										<a style="background-color: rgb(255, 255, 255);">
											<em>1</em>
											<span>{% trans %}Payement information{% endtrans %}</span>
										</a>
									</li>
									<li {% if lastsubscription is not null and lastsubscription.getSubscription().getName() == plan_name and lastsubscription.getSubscriptionType() == plan_type and isSubscriptionNotexpired %} class="active nav-link done" {% endif %}>
										<a>
											<em>3</em>
											<span>F{% trans %}inish Wizard{% endtrans %}</span>
										</a>
									</li>
								</ul>
								<div class="form-wizard-content">
									{% if lastsubscription is not null and lastsubscription.getSubscription().getName() == plan_name and lastsubscription.getSubscriptionType() == plan_type and isSubscriptionNotexpired %}
										<div id="step-32">
											<div class="no-results">
												<div class="swal2-icon swal2-success swal2-animate-success-icon">
													<div class="swal2-success-circular-line-left" style="background-color: rgb(255, 255, 255);"></div>
													<span class="swal2-success-line-tip"></span>
													<span class="swal2-success-line-long"></span>
													<div class="swal2-success-ring"></div>
													<div class="swal2-success-fix" style="background-color: rgb(255, 255, 255);"></div>
													<div class="swal2-success-circular-line-right" style="background-color: rgb(255, 255, 255);"></div>
												</div>
												<div class="results-subtitle mt-4">{% trans %}Succès!{% endtrans %}</div>
												<div class="results-title">
													{% trans %}Vous êtes actuellement sur le plan d'accès{% endtrans %}
													<b>
														{{ lastsubscription is not null ? lastsubscription.getSubscription().getName() : 'Gratuit'}} 
														{{ lastsubscription is not null ? lastsubscription.getSubscriptionType() : '' }}
													</b>
												</div>
												<div class="mt-3 mb-3"></div>
											</div>
										</div>
									{% else %}
									<div id="step-12">
										<div class="">
											<div class="col-md-6">
												<div class="mb-3">

													<label class="form-label" for="exampleEmail55" class="mb-5">{% trans %}Vous êtes actuellement sur le plan d'accès{% endtrans %} 
														<b>
															{{ lastsubscription is not null ? lastsubscription.getSubscription().getName() : 'Gratuit'}} 
															{{ lastsubscription is not null ? lastsubscription.getSubscriptionType() : '' }}
														</b>
													</label>
														
															<div class="row py-2">
																<div class="col-sm-3">
																	{% if plan_name == 'basic' %}
																		<img src="/images/logo/plan_basique.png" class="w-75"/>
																	{% elseif plan_name == 'startup' %}
																		<img src="/images/logo/plan_startup.png" class="w-75"/>
																	{% elseif plan_name == 'premium' %}
																		<img src="/images/logo/plan_premium.png" class="w-75"/>
																	{% elseif plan_name == 'advanced' %}
																		<img src="/images/logo/plan_advanced.png" class="w-75"/>
																	{% elseif plan_name == 'business' %}
																		<img src="/images/logo/plan_business.png" class="w-75"/>
																	{% else %}
																		<img src="/images/logo/plan_free.png" class="w-75"/>
																	{% endif %}
																</div>
																
																<div class="col-sm-9">
																	<h4>{% trans %}Abonnement{% endtrans %} {{ plan_type }}</h4>
																	{% if plan_name == 'mensuel' %}
																	<p>
																		<span>{% trans %}Gratuit{% endtrans %}</span>
																	</p>
																	{% else %}
																	<p>
																		<span>{% trans %}Tarif{% endtrans %} :</span>
																		<span class="h-3">{{ plan_price }} € / {{ plan_type == 'mensuel' ? 'mois' : 'an' }}</span>
																	</p>
																	{% endif %}
																</div>
															</div>
												</div>
											</div>
										</div>

										<div class="">
											<div class="col-md-6">
												<div class="position-relative mb-3">
													<label class="form-label" for="exampleEmail55">{% trans %}Adresse e-mail{% endtrans %}</label>
													<input name="email" id="exampleEmail55" placeholder="Adresse e-mail" type="email" class="form-control" value="{{ user.getEmail() }}">
												</div>
											</div>
										</div>

										<div class="">
											<div class="col-md-6">
												<div class="position-relative mb-3">
													<label class="form-label" for="exampleEmail55">{% trans %}Type d'abonnement{% endtrans %}</label>
													<input id="exampleEmail55" type="text" class="form-control" value="{{ plan_type }}" disabled>
												</div>
											</div>
										</div>

										<div class="mb-3">
											<label class="form-label">{% trans %}Modes paiements disponibles{% endtrans %}</label>
											<div class="col-md-6">
												<div class="">
													<div class="row">
														<label class="col-sm-6">
															<input type="radio" name="payment_method" value="stripe">
															<img src="/images/logo/stripe.png"/>
														</label>
														<label class="col-sm-6">
															<input type="radio" name="payment_method" value="paypal">
															<img src="/images/logo/paypal.png"/>
														</label>
													</div>
												</div>
											</div>
										</div>
									</div>
									{% endif %}
								</div>
							</div>
							<div class="divider"></div>
							{% if plan_name == 'mensuel' %}
								<a href="/account/upgrade" class="btn-shadow btn-wide float-end btn-pill btn-hover-shine btn btn-secondary">{% trans %}Changer de plan{% endtrans %}</a>
							{% else %}
							<div class="clearfix">
								{% if lastsubscription is not null and lastsubscription.getSubscription().getName() == plan_name and lastsubscription.getSubscriptionType() == plan_type and isSubscriptionNotexpired %}
								{% else %}
								<button type="submit" class="btn-shadow btn-wide float-end btn-pill btn-hover-shine btn btn-primary">{% trans %}Procéder à la paiement{% endtrans %}</button>
								{% endif %}
							</div>
							{% endif %}
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}