{% form_theme offerForm 'partials/form/offer_form.html.twig' %}

<section class="offer-area svg-ctn toScroll" data-id="tarifs">
    <span class="anchor" id="tarifs"></span>
    <span class="anchor" id="offer"></span>
    <div class="offer-flex">
        <div class="offer-ctn" data-aos="fade-left" data-aos-duration="500" data-aos-once="true">
        
            <!-- multistep form -->
            {{form_start(offerForm, {'attr': {'id': 'msform'}})}}
                <!-- progressbar -->
                <ul id="progressbar">
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <!-- fieldsets -->
                 <fieldset id="msform-start-field">
                    <h4 class="fs-title"><b>Formulaire de simulation de prix</b></h4>
                    <h3 class="fs-subtitle">Obtenez une fourchette de prix</h3> 
                    <small><em>Vous aurez la possibilité de soumettre vos réponses après la simulation si vous souhaitez recevoir un devis.</em></small>
                    <input type="button" name="start" class="next action-button" value="C'est parti !" />
                </fieldset>

                <fieldset>
                    <h4 class="fs-title"><b>1</b></h4>
                    <h3 class="fs-subtitle">Objectif du site ?</h3>
                    <div class="fs-flash"></div>
                    {{form_row(offerForm.goal)}}
                    <input type="button" name="previous" class="previous action-button" value="Précédent" />
                    <input type="button" name="next" class="next action-button" value="Suivant" />
                </fieldset>

                <fieldset>
                    <h4 class="fs-title"><b>2</b></h4>
                    <h3 class="fs-subtitle">Création ou refonte de site ?</h3>
                    <div class="fs-flash"></div>
                    {{form_row(offerForm.toCreate)}}
                    <input type="button" name="previous" class="previous action-button" value="Précédent" />
                    <input type="button" name="next" class="next action-button" value="Suivant" />
                </fieldset>

                <fieldset>
                    <h4 class="fs-title"><b>3</b></h4>
                    <h3 class="fs-subtitle">Quel design ?</h3>
                    <div class="fs-flash"></div>
                    {{form_row(offerForm.design)}}
                    <input type="button" name="previous" class="previous action-button" value="Précédent" />
                    <input type="button" name="next" class="next action-button" value="Suivant" />
                </fieldset>

                <fieldset>
                    <h4 class="fs-title"><b>4</b></h4>
                    <h3 class="fs-subtitle">Combien de pages contiendra le site ?</h3>
                    <div class="fs-flash"></div>
                    {{form_row(offerForm.number)}}
                    <input type="button" name="previous" class="previous action-button" value="Précédent" />
                    <input type="button" name="next" class="next action-button" value="Suivant" />
                </fieldset>

                 <fieldset>
                    <h4 class="fs-title"><b>5</b></h4>
                    <h3 class="fs-subtitle">Le site devra t-il comporter un blog ?</h3>
                    <div class="fs-flash"></div>
                    {{form_row(offerForm.blog)}}
                    <input type="button" name="previous" class="previous action-button" value="Précédent" />
                    <input type="button" name="next" class="next action-button" value="Suivant" />
                </fieldset>

                <fieldset>
                    <h4 class="fs-title"><b>6</b></h4>
                    <h3 class="fs-subtitle">Interface d'administration ?<br>(Inclut pour e-commerce)</h3>
                    <div class="fs-flash"></div>
                    {{form_row(offerForm.admin)}}
                    <input type="button" name="previous" class="previous action-button" value="Précédent" />
                    <input type="button" name="next" class="next action-button" value="Suivant" />
                </fieldset>

                <fieldset>
                    <h4 class="fs-title"><b>7</b></h4>
                    <h3 class="fs-subtitle">Multilingue ?</h3>
                    <div class="fs-flash"></div>
                    {{form_row(offerForm.multilingue)}}
                    <input type="button" name="previous" class="previous action-button" value="Précédent" />
                    <input type="button" name="next" class="next action-button" value="Suivant" />
                </fieldset>

                 <fieldset>
                    <h4 class="fs-title"><b>8</b></h4>
                    <h3 class="fs-subtitle">Fournissez-vous le contenu du site ?<br>(Images, vidéos, textes, ...)</h3>
                    <div class="fs-flash"></div>
                    {{form_row(offerForm.contents)}}
                    <input type="button" name="previous" class="previous action-button" value="Précédent" />
                    <input type="button" name="next" class="next action-button" value="Suivant" />
                </fieldset>
                
                <fieldset>
                    <h4 class="fs-title"><b>9</b></h4>
                    <h3 class="fs-subtitle">Suivie des statistiques ?<br>(Google Analytics)</h3>
                    <div class="fs-flash"></div>
                    {{form_row(offerForm.stats)}}
                    <input type="button" name="previous" class="previous action-button" value="Précédent" />
                    <input type="button" name="next" class="next action-button" value="Suivant" />
                </fieldset>               
                
                <fieldset>
                    <h4 class="fs-title"><b>10</b></h4>
                    <h3 class="fs-subtitle">Qui gère l'hébergement ?</h3>
                    <div class="fs-flash"></div>
                    {{form_row(offerForm.host)}}
                    <input type="button" name="previous" class="previous action-button" value="Précédent" />
                    <input type="submit" name="simulation" id="msform-sim" class="next action-button" value="Simuler" />
                </fieldset>

                <fieldset class="msform-result-field">
                    <h4 class="fs-title"><b>Résultat</b></h4>
                    <h3 class="fs-subtitle">Votre fourchette de prix</h3>
                    <p id="sim-result">
                        {# simulation result #}
                    </p>
                    <button type="button" name="devis" id="msform-offer-send" class="next action-button">Devis <i class="fas fa-file"></i></button>
                </fieldset>

                <fieldset class="msform-offer-field">
                    <div class="msform-loader"></div>
                    <h4 class="fs-title"><b>Demande de devis</b></h4>
                    <h3 class="fs-subtitle">Envoi du formulaire</h3>
                    {{form_row(offerForm.lastName)}}
                    {{form_row(offerForm.firstName)}}
                    {{form_row(offerForm.email)}}
                    {{form_row(offerForm.message)}}
                    <input type="hidden" name="msform-recaptcha_response" id="msform-recaptchaResponse">
                    <input type="button" name="previous" class="previous action-button" value="Précédent" />
                    <button type="submit" name="send-submit" id="msform-submit" class="submit action-button" />
                        Envoyer
                        <i class="fas fa-paper-plane"></i>
                    </button> 
                </fieldset>
            {{form_end(offerForm)}}
        </div>
        <article class="offer-text" data-aos="fade-right" data-aos-duration="500" data-aos-once="true">
            <h2>Simulation de prix</h2>
            <div class="last-p">
                <div>
                    <p>
                        Vous avez un projet mais il vous est difficile de savoir si il rentre dans votre budget ?
                        <br>
                        Remplissez le formulaire de simulation et recevez une fourchette de prix gratuitement !
                    </p>
                    <p>
                        Vous n'avez pas besoin de simulation ? 
                        <br>
                        Contactez moi directement par mail ou téléphone via 
                        <a href="#contact">contact</a>.
                    </p>
                </div>
            </div>
        </article>
    </div>
    <img src="/images/body/bodyshape8.svg" class="body-shape" id="shape-8" style="position:absolute; top:0; right:0; z-index:-10" alt="forme">
</section>