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

{% block title %}Faire un don
{% endblock %}

{% block body %}
<div class="donation">
	<div class="form-card-bg">
		<div class="container">
			<div class="form-card donation-card">
				<div class="base-content">
					<h1>Je fais un don pour
						<span>soutenir</span>
						Delta7
					</h1>
					<div class="steps">
						<div class="content">
							<div class="step">
								<span>1.</span>Je donne
							</div>
							<div class="step">
								<span>2.</span>Mes coordonnées
							</div>
							<div class="step">
								<span>3.</span>Mon réglement
							</div>
						</div>
					</div>

					{% for error in form.vars.errors.form.getErrors(true) %}
					<div class="alert alert-error">
						{{ error.message }}
					</div>
					{% endfor %}
					{% for message in app.flashes('success') %}
					<div class="alert alert-success">
						{{ message }}
					</div>
					{% endfor %}
					{% for message in app.flashes('error') %}
					<div class="alert alert-error">
						{{ message }}
					</div>
					{% endfor %}

					{{ form_start(form, {'attr': {'class': 'form-apply'}}) }}
					<div class="step_content_wrapper">
						<div class="step_content_1 active">
							<h2>Je donne pour</h2>
							<div class="choices_wrapper">
								{{ form_row(form.receiver) }}
								<div class="choices {% if config('donation.titre_receveur_4') == "" %}{% if config('donation.titre_receveur_3') == "" %}two_options{% else %}three_options{% endif %}{% endif %}">
									<div class="choice" data-target="#donation_receiver_0">
										<div class="title">{{ config ('donation.titre_receveur_1') }}</div>
										<p>{{ config ('donation.description_receveur_1') }}</p>
									</div>
									<div class="choice" data-target="#donation_receiver_1">
										<div class="title">{{ config ('donation.titre_receveur_2') }}</div>
										<p>{{ config ('donation.description_receveur_2') }}</p>
									</div>
									{% if config('donation.titre_receveur_3') != "" %}
									<div class="choice" data-target="#donation_receiver_2">
										<div class="title">{{ config ('donation.titre_receveur_3') }}</div>
										<p>{{ config ('donation.description_receveur_3') }}</p>
									</div>
									{% endif %}
									{% if config('donation.titre_receveur_4') != "" %}
									<div class="choice" data-target="#donation_receiver_3">
										<div class="title">{{ config ('donation.titre_receveur_4') }}</div>
										<p>{{ config ('donation.description_receveur_4') }}</p>
									</div>
									{% endif %}
								</div>
							</div>

							<h2>Type de donation</h2>
							<div class="choices_wrapper">
								{{ form_row(form.paymenttype) }}
								<div class="choices two_options">
									<div class="choice" data-target="#donation_paymenttype_0">
										<div>Je donne une fois</div>
									</div>
									<div class="choice" data-target="#donation_paymenttype_1">
										<div>Je donne tous les mois</div>
									</div>
								</div>
							</div>
							<h2>Montant
								<span class="range__value">80</span>
								<span>€</span>
								<span class="monthly hidden"> par mois</span>
							</h2>
							<div class="range_wrapper">
								<div class="range" data-range-max="500" data-range-min="5" data-range-value="80"
									data-range-step="5">
									<div class="range__track"></div>
									<div class="range__thumb">
										<div class="range__bg"></div>
									</div>
								</div>
							</div>
							{{ form_row(form.amount) }}
							<div class="reducter">
								<p>Après réduction fiscale, mon don me revient à</p>
								<p><span class="amount_reducted">13</span>€ <span class="monthly hidden"> par mois</span></p>
								<p>Vous pouvez déduire 66% du montant de votre don dans la limite de 20% de votre revenu
									net
									imposable.</p>
							</div>

							<div class="actions flex vertical centered v-centered">
								<button class="btn is-primary is-xl is-anim-s"
									style="margin-left: 0;margin-bottom:16px;" type="button" id="to_step_2">
									<span>Étape suivante</span>
									{{ svg('images/base/arrow_white.svg') }}
								</button>
							</div>
						</div>
						<div class="step_content_2">
							<h2><span>1.</span> Informations personnelles</h2>
							{{ form_row(form.isprofessional) }}
							{{ form_row(form.civilite) }}
							<div class="flex professionel">
								{{ form_row(form.raison) }}
								{{ form_row(form.siret) }}
							</div>
							<div class="flex">
								{{ form_row(form.firstname) }}
								{{ form_row(form.lastname) }}
							</div>
							<div class="flex">
								{{ form_row(form.email) }}
								{{ form_row(form.phone) }}
								{{ form_row(form.birthday) }}
							</div>
							<h3>Vous êtes déjà donatrice ou donateur ?</h3>
							<div class="flex">
								{{ form_row(form.memberNumber) }}
							</div>

							<h2><span>2.</span> Informations postales</h2>
							{{ form_row(form.address1) }}
							{{ form_row(form.address2) }}
							<div class="flex">
								{{ form_row(form.city) }}
								{{ form_row(form.zipcode) }}
								{{ form_row(form.country) }}
							</div>

							<div class="actions flex vertical centered v-centered">
								<button class="btn is-primary is-xl is-anim-s"
									style="margin-left: 0;margin-bottom:16px;" type="button" id="to_step_3">
									<span>Étape suivante</span>
									{{ svg('images/base/arrow_white.svg') }}
								</button>
							</div>
						</div>
						<div class="step_content_3">
							<h2>Moyen de paiement</h2>
							<div class="choices_wrapper">
								{{ form_row(form.paymentprovider) }}
								<div class="choices payments">
									<div class="choice oneshot" data-target="#donation_paymentprovider_0">
										<figure>
											{{ svg_assets("payments/creditcard.svg") }}
										</figure>
										<div>Par Carte Bancaire</div>
									</div>
									<div class="choice oneshot monthly" data-target="#donation_paymentprovider_3">
										<figure>
											{{ svg_assets("payments/paypal.svg") }}
										</figure>
										<div>Par Paypal</div>
									</div>
									<div class="choice oneshot" data-target="#donation_paymentprovider_2">
										<figure>
											{{ svg_assets("payments/check.svg") }}
										</figure>
										<div>Par Chèque</div>
									</div>
									<div class="choice oneshot" data-target="#donation_paymentprovider_1">
										<figure>
											{{ svg_assets("payments/bank.svg") }}
										</figure>
										<div>Par Virement Bancaire</div>
									</div>
								</div>
							</div>
							{{ form_row(form.captcha) }}
							<div class="actions">
								<button class="btn is-primary is-xl is-anim-s" style="margin-left: 0;margin-bottom:16px;" type="submit">
									<span>Valider mon don</span>
									{{ svg('images/base/arrow_white.svg') }}
								</button>
							</div>
						</div>
					</div>
					<div class="securised">
						<span>Paiement sécurisée par</span>
						<img src="{{ asset('images/forms/bank.png') }}" alt="CIC / CREDIT MUTUEL"
							style="border-radius:0;box-shadow:none;margin-bottom:0">
					</div>
					{{ form_end(form) }}
				</div>
			</div>
			<div class="sidebar base-content step_helps">
				<div class="step_help_1">
				{{ config("donation.texte_sidebar_step_1")|raw }}
				</div>
				<div class="step_help_2">
				{{ config("donation.texte_sidebar_step_2")|raw }}
				</div>
				<div class="step_help_3">
				{{ config("donation.texte_sidebar_step_3")|raw }}
				</div>
			</div>
		</div>
	</div>
</div>
{% endblock %}