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

{% block main %}
    <section data-controller="components--estimation">
        <div class="estimation-title">
            <div class="container-img-tilte">
                <h1>J'estime et je vends</br> mon véhicule</h1>
                <img class="img" src="./../assets/images/title/wallet.png" alt="img" />
            </div>

            <div class="container-step-info">
                <div class="first-step step-menu active">
                    <div class="circle">1</div>
                    <p>Je renseigne mon véhicule</p>
                </div>
                <div class="trait"></div>
                <div class="second-step step-menu">
                    <div class="circle">2</div>
                    <p>Je confirme mes coordonées</p>
                </div>
                <div class="trait"></div>

                <div class="third-step step-menu">
                    <div class="circle">3</div>
                    <p>Je reçois mon estimation gratuite</p>
                </div>
            </div>
        </div>

        <div class="container-step">
            <div class="step car-info-part show choice">
{#                <div class="infos">#}
{#                    <div class="info">#}
{#                        <svg>#}
{#                            <use xlink:href="../assets/images/icons.svg#heart"></use>#}
{#                        </svg>#}
{#                        <p><span class="bold">Estimation précise</span></br> & entièrement <span#}
{#                                    class="bold">gratuite</span></p>#}
{#                    </div>#}
{#                    <div class="info">#}
{#                        <svg>#}
{#                            <use xlink:href="../assets/images/icons.svg#heart"></use>#}
{#                        </svg>#}
{#                        <p><span class="bold">Meilleur prix</span></br> qu'une reprise</p>#}
{#                    </div>#}
{#                    <div class="info">#}
{#                        <svg>#}
{#                            <use xlink:href="../assets/images/icons.svg#heart"></use>#}
{#                        </svg>#}
{#                        <p><span class="bold">Vente rapide</span></br> en 2 semaines en moyenne</p>#}
{#                    </div>#}
{#                </div>#}
                <p class="text center bold">Renseigne ton numéro de plaque d'immatriculation</p>
                <div class="immat-plaque">
                    <div class="blue">
                        <img src="../assets/images/immat.png" alt="immatriculation logo" loading="lazy">
                    </div>
                    <input type="text" placeholder="AA-000-AA" class="immat-input" />
                    <div class="blue"></div>
                </div>
                <div class="container-next">
                    <button class="btn next center" data-action="components--estimation#nextStep">Continuer</button>
                </div>
                <p class="text center bold">Tu ne connais pas ta plaque ? pas de soucis clique-ici :</p>
                <button class="link" data-target="unknow-plaque" data-action="components--estimation#nextStep">Je ne connais pas ma plaque</button>
            </div>

            <div class="step car-info-part manual" data-target="">
                <p class="text center bold">Renseigne les informations de ton véhicule</p>
                <div class="container-input">

                    <select name="marque" id="marque">
                        <option value="">Marque</option>
                        <option value="">Renault</option>
                        <option value="">Peugeot</option>
                        <option value="">Citroen</option>
                        <option value="">Audi</option>
                    </select>

                    <select name="modele" id="modele">
                        <option value="">Modèle</option>
                        <option value="">Twingo</option>
                        <option value="">Clio</option>
                        <option value="">Megane</option>
                        <option value="">Captur</option>
                    </select>

                    <select name="energie" id="energie">
                        <option value="">Electrique</option>
                        <option value="">Energie</option>
                        <option value="">Essence</option>
                        <option value="">Diesel</option>
                        <option value="">Hybride</option>
                    </select>
                    <select name="boite" id="boite">
                        <option value="">Boite de vitesse</option>
                        <option value="">Automatique</option>
                        <option value="">Manuel</option>
                    </select>

                    <select name="annee" id="annee">
                        <option value="">Année de mise en circulation</option>
                        <option value="">2021</option>
                        <option value="">2020</option>
                        <option value="">2019</option>
                        <option value="">2018</option>
                    </select>

                    <select name="mois" id="mois">
                        <option value="">Mois de mise en circulation</option>
                        <option value="">Janvier</option>
                        <option value="">Février</option>
                        <option value="">Mars</option>
                        <option value="">Avril</option>
                        <option value="">Mai</option>
                        <option value="">Juin</option>
                        <option value="">Juillet</option>
                        <option value="">Août</option>
                        <option value="">Septembre</option>
                        <option value="">Octobre</option>
                        <option value="">Novembre</option>
                        <option value="">Décembre</option>
                    </select>
                </div>
                <div class="container-next">
                    <button class="prev" data-action="components--estimation#prevStep">
                        <svg>
                            <use xlink:href="../assets/images/icons.svg#arrow"></use>
                        </svg>
                    </button>
                    <button class="btn next" data-action="components--estimation#nextStep">Continuer</button>
                </div>
            </div>

            <div class="step car-info-part">
                <p class="text center bold">Récapitulatif du véhicule à estimer</p>
                <div class="immat-plaque">
                    <div class="blue">
                        <img src="../assets/images/immat.png" alt="immatriculation logo" loading="lazy">
                    </div>
                    <p type="text" class="immat-input">AA-000-AA</p>
                    <div class="blue"></div>
                </div>
                <ul class="detail-car-info">
                    <li class="text bold">RENAULT TWINGO E-tech</li>
                    <li class="text">Electrique</li>
                    <li class="text">Janvier 2021</li>
                    <li class="text">Automatique</li>
                    <li class="text">5 portes</li>
                </ul>
                <p class="text center bold">Est-ce bien ton véhicule ?</p>
                <div class="container-next">
                    <button class="btn white" data-action="components--estimation#prevStep">Non</button>
                    <button class="btn next" data-action="components--estimation#nextStep">Oui</button>
                </div>
            </div>
            <div class="step car-info-part">
                <p class="text center bold">Séléctionne la version de ton véhicule <span class="not-bold">(champs D sur la carte grise)</span>
                </p>
                <div class="container-input">
                    <select name="version" id="version" class="center">
                        <option value="">Version 1</option>
                        <option value="">Version 2</option>
                        <option value="">Version 3</option>
                        <option value="">Version 4</option>
                    </select>
                </div>

                <div class="container-next">
                    <button class="prev" data-action="components--estimation#prevStep">
                        <svg>
                            <use xlink:href="../assets/images/icons.svg#arrow"></use>
                        </svg>
                    </button>
                    <button class="btn next" data-action="components--estimation#nextStep">Continuer</button>
                </div>
            </div>
            <div class="step car-info-part">
                <p class="text center bold">Kilométrage <span class="not-bold">(plus ou moins à 1000 km près)</span></p>
                <div class="kilometrage-input">
                    <input type="text" name="kilometre" />
                </div>
                <div class="container-next">
                    <button class="prev" data-action="components--estimation#prevStep">
                        <svg>
                            <use xlink:href="../assets/images/icons.svg#arrow"></use>
                        </svg>
                    </button>
                    <button class="btn next" data-action="components--estimation#nextStep">Continuer</button>
                </div>
            </div>
            <div class="step car-info-part">
                <p class="text center bold">Es-tu bien propriétaire du véhicule ?</p>
                <div class="container-next">
                    <button class="prev" data-action="components--estimation#prevStep">
                        <svg>
                            <use xlink:href="../assets/images/icons.svg#arrow"></use>
                        </svg>
                    </button>
                    <button class="btn white">Non</button>
                    <button class="btn next" data-action="components--estimation#nextStep">Oui</button>
                </div>
            </div>

            <div class="step car-info-part">
                <p class="text center bold">Ce véhicule est-il gagé ?</p>
                <div class="container-next">
                    <button class="prev" data-action="components--estimation#prevStep">
                        <svg>
                            <use xlink:href="../assets/images/icons.svg#arrow"></use>
                        </svg>
                    </button>
                    <button class="btn white">Non</button>
                    <button class="btn next" data-action="components--estimation#nextStep">Oui</button>
                </div>
            </div>

            <div class="step user-part">
                {#                <p class="text bold">Tes coordonnées</p> #}
                <div class="radio">
                    <input type="radio" id="mr" name="genre" value="Monsieur" />
                    <label for="mr">M.</label>
                    <input type="radio" id="mme" name="genre" value="Monsieur" />
                    <label for="mme">Mme.</label>
                </div>
                <div class="container-input">
                    <input type="text" name="nom" placeholder="Nom*" />
                    <input type="text" name="prenom" placeholder="Prénom*" />
                    <input type="email" name="email" placeholder="Email*" />
                    <input type="text" name="telephone" placeholder="Téléphone*" />
                    <input type="text" name="adresse" placeholder="Adresse" />
                    <input type="text" name="ville" placeholder="Ville" />
                    <input type="text" name="codepostal" placeholder="Code Postal">
                    <p class="text mt-0 little w-100">* champs obligatoires</p>
                </div>
                <div class="checkbox text">
                    <input type="checkbox" id="condition2" name="condition2" required>
                    <label for="condition2">Je déclare avoir pris connaissance et accepté les <a href="#" class="white underline">conditions générales</a> LikeAuto.fr</label>
                </div>
                <div class="checkbox">
                    <input type="checkbox" id="condition3" name="condition3" required>
                    <label for="condition3">J’accepte que Like Auto récolte mes informations personnelles.</label>
                </div>
                <div class="checkbox">
                    <input type="checkbox" id="condition1" name="condition1" required>
                    <label for="condition1">J’accepte de recevoir des communications et des offres personnalisées de
                        la part de Like Auto</label>
                </div>
                <div class="container-next">
                    <button class="prev" data-action="components--estimation#prevStep">
                        <svg>
                            <use xlink:href="../assets/images/icons.svg#arrow"></use>
                        </svg>
                    </button>
                    <button class="btn next" data-action="components--estimation#nextStep">Continuer</button>
                </div>
            </div>

            <div class="step estimation-part">
                <p class="text bold center blue uppercase">Récapitulatif du véhicule estimé</p>
                <ul class="detail-car-info center uppercase">
                    <li class="bold">XX-000-XX</li>
                    <li>RENAULT TWINGO E-tech électrique</li>
                    <li>150 000 km</li>
                    <li>Mai 2021</li>
                </ul>

                <div class="container-estimation">
                    <p class="text bold uppercase">Estimation de reprise provisoire</p>
                    <p class="price mt-0">15 410 €</p>
                    <p class="text mt-0 center little">*Sous réserve d’une expertise du véhicule en concession.</p>
                    <p class="text">Estimation valable jusqu'au [DATE 15 Jours après]</p>
                    <p class="text mb-0">Cette estimation de reprise t'est offerte à titre indicatif, elle te sera
                        confirmée :</p>
                    <ul class="text">
                        <li>lors d'une expertise chez l'un de nos professionnels</li>
                        <li>après une estimation de potentiels frais de remise en état</li>
                        <li>selon le marchcé de revente à date</li>
                    </ul>
                </div>
                <p class="text bold blue center">Vous souhaitez une estimation ferme ?</p>
                <p class="text bold center">Un conseiller peut vous appeler sous 24 heures</p>


                <div class="container-next">
                    <button class="prev" data-action="components--estimation#prevStep">
                        <svg>
                            <use xlink:href="../assets/images/icons.svg#arrow"></use>
                        </svg>
                    </button>
                    <button class="btn next mw-20" onclick="window.location.href = '/page-estimation-vehicule-valid.html'">Je
                        souhaite être rappelé(e)
                    </button>
                </div>
            </div>

        </div>

    </section>
{% endblock %}