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

{% block main %}
    {% set car = {
        'brand': 'Porsche',
        'model': 'Carrera GT',
        'subInfo': '5.7 V10 612',
        'year': '2005',
        'localisation': 'Perpignan',
        'price': '35 950'
    } %}
    {% set page_name = 'Je réserve' %}
    <section class="reservation-section" data-controller="components--reservation">
        {% include 'components/_title-reservation.html.twig' with page_name %}
        <div class="container" id="container">
            <div class="step show">
                <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="prenom" placeholder="Prénom*" />
                    <input type="text" name="nom" placeholder="Nom*" />
                    <input type="text" name="telephone" placeholder="Téléphone*" />
                    <input type="text" name="email" placeholder="Email*" />
                    <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">
                    <input type="checkbox" id="condition2" name="condition2" required>
                    <label for="condition2">Je déclare avoir pris connaissance et accepté les conditions générales
                        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">
                        <svg>
                            <use xlink:href="../assets/images/icons.svg#arrow"></use>
                        </svg>
                    </button>
                    <button class="next btn" data-action="click->components--reservation#nextStep">Continuer</button>
                </div>
            </div>
            <div class="step">
                <p class="text">
                    Pour valider ta réservation en exclusivité le temps de la finalisation de la transaction, nous te
                    demandons de verser un dépôt de réservation de 99€
                    <span>(cette somme te sera remboursée au moment de la livraison) :</span>
                </p>
                <div class="radio card">
                    <input type="radio" id="cb" name="paiement" value="paiement" />
                    <label for="cb">
                        <p>Par carte bancaire</p>
                        <img src="../assets/images/logo/carte-bleu.png" alt="cb" loading="lazy">

                    </label>
                    <input type="radio" id="crypto" name="paiement" value="crypto" />
                    <label for="crypto">
                        <p>Par cryptomonnaie</p>
                        <img src="../assets/images/logo/lyzi.png" alt="lyzi" loading="lazy">
                    </label>
                </div>
                <div class="container-next">
                    <a class="prev" href="./page-detail-vehicule.html">
                        <svg>
                            <use xlink:href="../assets/images/icons.svg#arrow"></use>
                        </svg>
                    </a>
                    <button class="next btn" data-action="click->components--reservation#nextStep">Continuer</button>
                </div>
            </div>
            <div class="step valid">
                <img class="img" src="./../assets/images/logo/valid-cloud.png" alt="img" />
                <p class="text big">
                    Ta banque a validé </br>le paiement de 99€
                </p>
                <p>Ton véhicule est bien réservé, passe à la prochaine étape : </br>le financement de ton véhicule</p>
                <div class="container-next">
                    <button class="next btn" data-action="click->components--reservation#nextStep">Continuer</button>

                </div>
            </div>
            <div class="step valid">
                <p class="text bold">
                    Comment souhaites-tu financer ton véhicule ?
                </p>
                <div class="radio card">
                    <input type="radio" id="dejafinance" name="financement" value="dejafinance" />
                    <label for="dejafinance">
                        <p>J’ai déjà mon financement</p>
                    </label>

                    <input type="radio" id="classique" name="financement" value="classique" />
                    <label for="classique">
                        <p>
                            Je souhaite une solution de crédit instantané,
                            <span class="little">
                            je peux rembourser à mon rythme sur une durée
                            de mon choix pouvant aller jusqu’à 84 mois;
                            </br>
                            je choisis l'open banking Younited
                            </span>
                        </p>
                        <img src="./../assets/images/logo/younited.png" alt="younited">
                    </label>
                    <input type="radio" id="autre" name="financement" value="autre" />
                    <label for="autre">
                        <p>Je souhaite qu’on me propose une autre solution de financement</p>
                    </label>
                </div>
                <div class="container-next">
                    <button class="next btn" data-action="click->components--reservation#nextStep">Continuer</button>

                </div>
            </div>
            <div class="step last">
                <p class="text center bold">
                    Question ultime : où envisages-tu de récupérer ton véhicule ?
                </p>
                <div class="radio card">
                    <input type="radio" id="lieuDuVehicule" name="livraison" value="lieuDuVehicule" />
                    <label for="lieuDuVehicule">
                        <p>A Monopole Perpignan</p>
                        <p class="price">Gratuit</p>
                    </label>

                    <input type="radio" id="domicile" name="livraison" value="domicile" />
                    <label for="domicile">
                        <p>À mon domicile </br><span class="blue">(France métropolitaine uniquement)</span></p>
                    </label>
                    <div class="legend">
                        <div class="row"><p>Moins de 50km</p>
                            <p>100 €</p></div>
                        <div class="row"><p>De 20km à 100km</p>
                            <p>200 €</p></div>
                        <div class="row"><p>De 100km à 300km</p>
                            <p>300 €</p></div>
                        <div class="row"><p>De 300km à 600km</p>
                            <p>400 €</p></div>
                        <div class="row"><p>Plus de 600km</p>
                            <p>500 €</p></div>
                    </div>

                </div>
                <div class="container-next">
                    <button class="prev" data-action="click->components--reservation#prevStep">
                        <svg>
                            <use xlink:href="../assets/images/icons.svg#arrow"></use>
                        </svg>
                    </button>
                    <button class="next btn"
                            onclick="window.location.href = '/page-mes-reservations.html'">
                        Continuer
                    </button>
                </div>
            </div>
        </div>
    </section>

{% endblock %}