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

{% block title %}Demande de Devis | www.bafode.fr
{% endblock %}

{% block body %}

	<!-- En-tête global fourni par base.html.twig. Suppression du doublon ici pour éviter les conflits JS (IDs & gestion du menu). -->

	<!-- home
			    ================================================== -->
	<section id="devis-header" class="header-background">

		<div class="overlay"></div>
		<div class="gradient-overlay"></div>

		<div class="home-content-table">

			<div class="home-content-tablecell">
				<div class="row">
					<div class="col-twelve">
						<div class="home-bottom-text">

							<h1>Demande de devis en ligne</h1>

						</div>
						<!-- end home-bottom-text -->
					</div>
					<!-- end col-twelve -->
				</div>
				<!-- end row -->
			</div>
			<!-- end home-content-tablecell -->
		</div>
		<!-- end home-content-table -->

	</section>
	<!-- end home -->


	<!-- contact
			    ================================================== -->
	<section id="devis">

		<div class="overlay"></div>

		<div class="row narrow section-intro">
			<div class="col-twelve">

				<h2 class="animate-this">Recevez un devis personnalisé.</h2>

				<p class="lead animate-this">Vous souhaitez obtenir un devis pour votre projet web avec une estimation de prix à la clé ? Pour obtenir une proposition détaillée, il vous suffit de remplir le formulaire ci-dessous.
															                    Je reprendrais contact avec vous au plus tôt afin de répondre à votre demande de devis.</p>
			</div>
		</div>
		<!-- end section-intro -->

		<div class="row contact-form devis-form">
			<div class="col-twelve">

				<form name="form" method="post" action="{{ path('demande_devis_send') }}">
					<div id="form">
						<div>
							<label for="form_type" class="required">Vous êtes* :</label>
							<select id="form_type" name="form[type]" class="form-field animate-this fadeInUp">
								<option value="default">---</option>
								<option value="particulier">Particulier</option>
								<option value="professionnel">Professionnel</option>
								<option value="association">Association</option>
								<option value="autres">Autres</option>
							</select>
						</div>
						<div>
							<input type="text" id="form_name" name="form[name]" required="required" placeholder="Votre nom *" class="form-field animate-this fadeInUp"/>
						</div>
						<div>
							<input type="text" id="form_societe" name="form[societe]" placeholder="Votre nom de societé, association, institution ou autres" class="form-field animate-this fadeInUp"/></div>
						<div><input type="email" id="form_email" name="form[email]" required="required" placeholder="Votre email *" class="form-field animate-this fadeInUp"/>
						</div>
						<div>
							<input type="tel" id="form_tel" name="form[tel]" required="required" placeholder="Votre téléphone *" class="form-field animate-this fadeInUp"/>
						</div>
						<div>
							<label for="form_natureprojet" class="required">Nature du projet* :</label>
							<select id="form_natureprojet" name="form[natureprojet]" class="form-field animate-this fadeInUp">
								<option value="default">---</option>
								<option value="creation">Création</option>
								<option value="refonte">Refonte</option>
								<option value="ajout_fonctionnalites">Ajout de fonctionnalités sur un site existant</option>
								<option value="formation_assistance">Formation / Assistance</option>
								<option value="autres">Autres</option>
							</select>
						</div>
						<div>
							<label for="form_typesite" class="required">Type de site* :</label>
							<select id="form_typesite" name="form[typesite]" class="form-field animate-this fadeInUp">
								<option value="default">---</option>
								<option value="site_vitrine">Site vitrine / Site institutionnel d&#039;entreprise / Site de marque</option>
								<option value="blog">Blog</option>
								<option value="ecommerce">E-Commerce / Boutique en ligne</option>
								<option value="autres">Autres</option>
							</select>
						</div>
						<div>
							<label for="form_graphisme" class="required">Graphisme à réaliser* :</label>
							<select id="form_graphisme" name="form[graphisme]" class="form-field animate-this fadeInUp">
								<option value="default">---</option>
								<option value="sur_mesure">Sur mesure</option>
								<option value="template">Utilisation d&#039;un template</option>
								<option value="basique">Basique</option>
								<option value="autres">Autres</option>
							</select>
						</div>
						<div>
							<label for="form_url" class="required">Si vous avez déja un site, indiquez son URL :</label>
							<input type="text" id="form_url" name="form[url]" required="required" placeholder="URL" class="form-field"/>
						</div>
						<div>
							<textarea id="form_description" name="form[description]" required="required" placeholder="Décrivez en quelques mots votre projet ainsi que ses fonctionnalités principales"></textarea>
						</div>
						{# Visible reCAPTCHA v2 checkbox #}
						<div class="form-group" id="recaptcha-container" style="margin: 10px 0;">
							<div class="g-recaptcha" data-sitekey="{{ recaptcha_site_key|default('') }}"></div>
						</div>
						<div>
							<button type="submit" id="form_envoyer" name="form[envoyer]" class="submitform">Envoyer</button>
						</div>
						<input type="hidden" id="form__token" name="_token" value="{{ form._token.vars.value }}"/>
					</div>
				</form>

				<!-- contact-warning -->
				<div id="message-warning"></div>

				<!-- contact-success -->
				<div id="message-success">
					<i class="fa fa-check"></i>Your message was sent, thank you!<br>
				</div>

			</div>
			<!-- end col-twelve -->
		</div>
		<!-- end row contact-form -->

	</section>
	<!-- end contact -->

	<!-- footer
			================================================== -->
	<footer class="footer-distributed">

		<div class="footer-left">

		<h3 style="display: flex; align-items: center;">
		  SEN<span>TECH</span> 
		  <img src="/assets/cn/images/logo.png" alt="logo" style="width: 40px; margin-left: 8px;">
		</h3>
			<p class="footer-company-about">
				<span>Bafode Fofana</span>
				Consultant Informatique Freelance, création de site internet<br>
				developpement web, conseil, intégration docuware, administration système, support applicatif<br>
				à Paris.
			</p>

			<p class="footer-links">
				<a href="{{ path('home') }}">Accueil</a>
				·
				<a href="{{ path('portfolio') }}">Portfolio</a>
				·
				<a href="/demande-devis">Devis en ligne</a>
				·
				<a href="{{ path('mentions_legales') }}">Mentions légales</a>
				·
				<a href="{{ path('plan_du_site') }}">Plan du site</a>
			</p>


		</div>

		<div class="footer-center">
			<div class="footer-icons">
				<span>Mes coordonées :</span>
			</div>
			<div>
				<i class="fa fa-map-marker"></i>
				<p>
					<span>Basé à Paris</span>
					75000, France</p>
			</div>

			<div>
				<i class="fa fa-phone"></i>
				<p>06 01 77 59 71</p>
			</div>

			<div>
				<i class="fa fa-envelope"></i>
				<p>
					<a href="mailto:contact@bafode.com">contact@bafode.com</a>
				</p>
			</div>

		</div>

		<div class="footer-right">

			<div class="footer-icons">
				<span>Mentions :</span>
			<ul class="social-links">
					<li>
						<a href="https://www.facebook.com/MisterBafo/" target="_blank"><i class="fa fa-facebook-square"></i></a>
					</li>
					<li>
						<a href="https://x.com/Efodab" target="_blank"><i class="fa fa-twitter"></i></a>
					</li>
					<li>
						<a href="https://github.com/fbafode" target="_blank"><i class="fa fa-github"></i></a>
					</li>
			</ul>
			</div>

			<p class="fsfooter">Site crée avec
				<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="105.333px" height="68.833px" viewbox="0 0 289.333 122.833" enable-background="new 0 0 289.333 122.833" xml:space="preserve" style="fill: transparent;position: relative;top: 30px; right: 6px;">
					<g id="fond"></g>
					<g id="compacte"></g>
					<g id="rectangle"></g>
					<g id="carré">
						<rect y="0" fill="#transparent" width="289.333" height="122.833"/>
						<g style="fill: #fff">
							<g style="fill: #fff">
								<circle cx="58.657" cy="58.07" r="28.072"/>
								<path fill="#000" d="M70.93,40.385c-2.851,0.1-5.342,1.672-7.193,3.846c-2.053,2.384-3.417,5.213-4.401,8.099
																								                                    c-1.759-1.442-3.116-3.308-5.938-4.122c-2.183-0.627-4.473-0.369-6.58,1.201c-0.999,0.746-1.686,1.873-2.013,2.932
																								                                    c-0.848,2.754,0.889,5.205,1.679,6.086l1.725,1.846c0.356,0.363,1.211,1.309,0.794,2.664c-0.453,1.475-2.229,2.428-4.052,1.867
																								                                    c-0.814-0.252-1.984-0.857-1.721-1.709c0.108-0.35,0.358-0.613,0.493-0.912c0.123-0.26,0.181-0.454,0.218-0.568
																								                                    c0.333-1.088-0.122-2.502-1.286-2.861c-1.087-0.332-2.197-0.068-2.628,1.329c-0.49,1.591,0.271,4.472,4.344,5.729
																								                                    c4.772,1.467,8.809-1.133,9.381-4.521c0.361-2.122-0.599-3.7-2.354-5.729l-1.43-1.581c-0.867-0.867-1.164-2.342-0.268-3.475
																								                                    c0.757-0.957,1.834-1.365,3.601-0.886c2.577,0.698,3.726,2.487,5.642,3.93c-0.791,2.595-1.309,5.2-1.776,7.538l-0.287,1.74
																								                                    c-1.371,7.186-2.416,11.131-5.134,13.396c-0.547,0.391-1.331,0.973-2.51,1.014c-0.619,0.02-0.818-0.406-0.828-0.592
																								                                    c-0.014-0.434,0.353-0.633,0.596-0.828c0.363-0.199,0.912-0.527,0.875-1.578c-0.041-1.246-1.071-2.324-2.559-2.273
																								                                    c-1.117,0.037-2.816,1.086-2.752,3.01c0.066,1.984,1.916,3.473,4.706,3.377c1.492-0.049,4.822-0.656,8.103-4.557
																								                                    c3.819-4.473,4.888-9.6,5.692-13.352l0.896-4.953c0.499,0.059,1.031,0.1,1.611,0.113c4.757,0.102,7.136-2.363,7.173-4.155
																								                                    c0.023-1.085-0.712-2.152-1.742-2.128c-0.736,0.021-1.662,0.511-1.884,1.529c-0.217,1,1.514,1.902,0.161,2.779
																								                                    c-0.961,0.623-2.684,1.061-5.11,0.705l0.442-2.439c0.899-4.624,2.011-10.312,6.224-10.449c0.307-0.016,1.431,0.014,1.457,0.756
																								                                    c0.007,0.248-0.054,0.312-0.344,0.88c-0.297,0.442-0.408,0.819-0.395,1.253c0.042,1.18,0.939,1.956,2.238,1.91
																								                                    c1.737-0.057,2.237-1.748,2.209-2.618C75.933,41.583,73.779,40.293,70.93,40.385z"/>
							</g>
							<g>
								<g>
									<path d="M200.791,50.172c6.474,0,10.813,4.677,10.813,11.147c0,6.097-4.424,11.146-10.813,11.146
																											                                    c-6.428,0-10.852-5.049-10.852-11.146C189.939,54.849,194.277,50.172,200.791,50.172z M200.791,69.297
																											                                    c4.593,0,6.637-4.176,6.637-7.978c0-4.048-2.463-7.972-6.637-7.972c-4.216,0-6.68,3.924-6.68,7.972
																											                                    C194.111,65.121,196.158,69.297,200.791,69.297z"/>
								</g>
								<path d="M189.401,52.154v-1.481h-5.638v-2.024c0-2.881,0.419-5.055,3.798-5.055c0.062,0,0.128,0.006,0.193,0.009
																											                                    c0.007,0,0.005-0.011,0.013-0.011c0.938,0.068,1.72-0.695,1.772-1.633l0.068-1.286c-0.793-0.126-1.63-0.25-2.63-0.25
																											                                    c-5.803,0-7.138,3.382-7.138,8.56v1.69h-5.015v1.653c0.129,0.857,0.863,1.518,1.758,1.518c0.004,0,0.009,0.004,0.014,0.004h3.243
																											                                    v18.119h2.16c0.005,0,0.002,0,0.007,0c0.9,0,1.634-0.678,1.756-1.541V53.848h3.926C188.612,53.817,189.355,53.078,189.401,52.154
																											                                    z"/>
								<path d="M137.125,50.673c-0.006,0-0.011,0.005-0.021,0.005c-0.826,0-1.627,0.568-1.977,1.337l-5.399,16.278h-0.084l-5.281-16.27
																											                                    c-0.346-0.773-1.15-1.346-1.982-1.346c-0.01,0-0.013-0.005-0.021-0.005h-2.737l7.223,19.874c0.252,0.711,0.754,1.797,0.754,2.254
																											                                    c0,0.42-1.17,5.26-4.679,5.26c-0.086,0-0.174-0.01-0.259-0.016c-0.895-0.049-1.571,0.576-1.72,1.539l-0.107,1.359
																											                                    c0.71,0.125,1.422,0.293,2.674,0.293c5.176,0,6.721-4.721,8.184-8.811l7.847-21.753H137.125z"/>
								<path d="M112.177,54.998c-3.24-1.658-6.787-2.785-6.849-6.121c0.01-3.543,3.266-4.474,5.774-4.471
																											                                    c0.012-0.002,0.022-0.002,0.028-0.002c1.09,0,1.961,0.108,2.812,0.295c0.011,0,0.009-0.014,0.022-0.014
																											                                    c0.9,0.066,1.655-0.637,1.76-1.523l0.072-1.287c-1.645-0.408-3.364-0.617-4.86-0.617c-5.455,0.034-9.506,2.779-9.519,8.018
																											                                    c0.006,4.58,3.092,6.355,6.414,7.963c3.256,1.566,6.821,2.858,6.852,6.639c-0.018,3.943-3.824,5.396-6.447,5.402
																											                                    c-1.534-0.006-3.199-0.387-4.603-0.83c-0.879-0.145-1.6,0.631-1.715,1.658l-0.118,1.146c1.929,0.623,3.906,1.168,5.895,1.168
																											                                    c0,0,0.002,0,0.004,0c0.005,0,0.012,0,0.018,0c6.112-0.045,10.862-2.482,10.881-8.811
																											                                    C118.591,58.729,115.482,56.678,112.177,54.998z"/>
								<path d="M171.534,71.967c0.003,0,0.003,0,0.005,0c0.847,0,1.554-0.596,1.731-1.389V58.314c0-4.635-1.958-8.143-7.389-8.143
																											                                    c-1.92,0-5.134,1.088-6.596,4.135c-1.126-2.881-3.59-4.135-6.051-4.135c-3.133,0-5.263,1.127-6.765,3.592h-0.084v-1.324
																											                                    c-0.012-0.975-0.801-1.762-1.777-1.762c-0.009,0-0.013-0.005-0.019-0.005h-1.877v21.294h2.124c0.003,0,0.003,0,0.005,0
																											                                    c0.984,0,1.78-0.799,1.78-1.781c0-0.027,0.009-0.037,0.018-0.055v-8.895c0-3.965,1.585-7.889,5.592-7.889
																											                                    c3.171,0,3.802,3.297,3.802,5.928v12.691h2.153c0.002,0,0.002,0,0.006,0c0.93,0,1.679-0.715,1.762-1.623v-9.107
																											                                    c0-3.965,1.588-7.889,5.595-7.889c3.173,0,3.8,3.297,3.8,5.928v12.691H171.534z"/>
								<path d="M232.182,71.967c0.002,0,0.002,0,0.005,0c0.957,0,1.728-0.756,1.773-1.703V59.316c0-5.719-2.466-9.145-7.977-9.145
																											                                    c-2.964,0-5.801,1.463-6.973,3.886h-0.082v-1.591c0-0.002-0.004-0.002-0.004-0.006c0-0.987-0.799-1.783-1.779-1.783
																											                                    c-0.011,0-0.013-0.005-0.02-0.005h-1.998v21.294h2.157c0,0,0,0,0.004,0c0.934,0,1.691-0.727,1.763-1.643v-8.211
																											                                    c0-5.176,2.006-8.766,6.473-8.766c3.427,0.207,4.507,2.627,4.507,7.597v11.022H232.182z"/>
								<path d="M253.31,50.673c-0.01,0-0.014,0.005-0.022,0.005c-0.827,0-1.629,0.568-1.978,1.337l-5.397,16.278h-0.088l-5.282-16.27
																								                                    c-0.346-0.773-1.15-1.346-1.98-1.346c-0.008,0-0.013-0.005-0.02-0.005h-2.737l7.224,19.874c0.25,0.711,0.755,1.797,0.755,2.254
																								                                    c0,0.42-1.171,5.26-4.681,5.26c-0.085,0-0.171-0.01-0.259-0.016c-0.895-0.049-1.568,0.576-1.722,1.539l-0.105,1.359
																								                                    c0.709,0.125,1.422,0.293,2.675,0.293c5.176,0,6.72-4.721,8.184-8.811l7.849-21.753H253.31z"/>
							</g>
						</g>
					</g>
				</svg>
			</p>


			<p class="footer-company-name">© 2025 Copyright | Bafode Fofanas tous droits réservés.</p>


		</div>

		<div id="go-top">
			<a class="smoothscroll" title="Back to Top" href="#top">
				<i class="icon-UpArrow"></i>
			</a>
		</div>

	</footer>


	<!-- Java Script
			================================================== -->
	{# Scripts globaux déjà inclus par base.html.twig (jquery, plugin.js, main.js). #}
    {# reCAPTCHA v2 API #}
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
	<script>
	// Intercepte la soumission pour obtenir la réponse JSON et afficher un message de succès/erreur qui disparaît
	(function(){
	  var form = document.querySelector('form[name="form"]');
	  if (!form) return;
	  var successBox = document.getElementById('message-success');
	  var warningBox = document.getElementById('message-warning');

	  function fadeIn(el){
	    el.style.display = 'block';
	    el.style.opacity = '0';
	    el.style.transition = 'opacity 200ms ease';
	    requestAnimationFrame(function(){ el.style.opacity = '1'; });
	  }
	  function fadeOut(el){
	    if (!el) return;
	    el.style.opacity = '0';
	    setTimeout(function(){ el.style.display = 'none'; }, 220);
	  }
	  function showSuccess(msg){
	    if (!successBox) return;
	    successBox.innerHTML = '<i class="fa fa-check"></i>' + (msg || 'Votre demande a été envoyée.') + '<br>';
	    fadeIn(successBox);
	    setTimeout(function(){ fadeOut(successBox); }, 6000);
	  }
	  function showError(msg){
	    if (!warningBox) return;
	    warningBox.textContent = msg || 'Une erreur est survenue. Merci de réessayer.';
	    fadeIn(warningBox);
	    setTimeout(function(){ fadeOut(warningBox); }, 6000);
	  }

	  form.addEventListener('submit', function(e){
	    e.preventDefault();
	    fadeOut(warningBox); fadeOut(successBox);
	    var fd = new FormData(form);
	    // Visible reCAPTCHA v2: s'assurer que la case est cochée
	    if (window.grecaptcha) {
	      var resp = grecaptcha.getResponse();
	      if (!resp) {
	        showError('Veuillez cocher la case reCAPTCHA.');
	        return;
	      }
        // Ajoute explicitement le token au payload pour éviter tout oubli
        fd.set('g-recaptcha-response', resp);
	    }
			fetch(form.action, {
	      method: 'POST',
	      headers: { 'Accept': 'application/json' },
				credentials: 'same-origin',
	      body: new URLSearchParams(Array.from(fd.entries()))
	    }).then(function(res){
	      return res.json().catch(function(){ return {}; }).then(function(data){ return { ok: res.ok, data: data }; });
	    }).then(function(result){
	      var ok = result.ok; var data = result.data || {};
	      if (ok && data.success) {
	        showSuccess(data.message || 'Message envoyé avec succès.');
	        try { form.reset(); } catch(_) {}
	        // Reset reCAPTCHA v2 si présent
	        if (window.grecaptcha) { try { grecaptcha.reset(); } catch(_) {} }
	      } else {
	        var msg = data.message || '';
	        if (!msg && data.errors) {
	          try { msg = Object.values(data.errors).flat().join(' '); } catch(_) {}
	        }
	        showError(msg || 'Une erreur est survenue.');
	      }
	    }).catch(function(){
	      showError('Erreur réseau. Merci de réessayer.');
	    });
	  });
	})();
	</script>
	<!-- <script type="text/javascript">
			    $(window).load(function(){
			        $.cookieBar({
			        });
			    });
			</script> -->

{% endblock %}