<?php include("views/components/head.php") ?>

<main class="principal" id="app" v-cloak>
    <section class="nav">
        <div class="admin">
            <a href="compte-connexion">Gestion du site</a>
        </div>
        <div class="liens">
            <div class="gauche">
                <a href="">Accueil</a>
                <a href="">Blog</a>
                <a href="">Boutique</a>
            </div>
            <div class="centre">
                <p>RESTO/BAR</p>
            </div>
            <div class="droite">
                <a href="">Panier</a>
                <a href="">Réservation</a>
            </div>
            <div class="mobile">
                <hr>
                <hr>
                <hr>
            </div>
        </div>

    </section>
    <section class="baniere">
        <div class="logo">
            <img src="public/img/logo/logo.png" alt="">
        </div>
        <div class="boutons">
            <div class="bouton">
                <div>
                    <a href="#menu">Voir le menu</a>
                </div>
            </div>
            <div class="bouton">
                <div>
                    <a href="#infolettre">Infolettre</a>
                </div>
            </div>
        </div>
    </section>
    <section class="infos">
        <div class="localisation">
            <h1>Bienvenue chez PUB G6</h1>
            <p>Venez nous retrouver !
                297, rue St-Georges
                Saint-Jérôme (Québec)
                J7Z 5A2
            </p>
            <div><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2782.746598946635!2d-74.00559052338006!3d45.776268412562445!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4ccf2ca136664c05%3A0x90430ecdc061500!2s297%20Rue%20Saint-Georges%2C%20Saint-J%C3%A9r%C3%B4me%2C%20QC%20J7Z%205A2!5e0!3m2!1sen!2sca!4v1719423223384!5m2!1sen!2sca" width="100%" height="300" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></div>
            <p class="numero">450 436-1531</p>
        </div>
        <div class="separator"></div>
        <div class="horaire">
            <h1>Heures d'ouvertures</h1>
            <div class="heures">
                <h2>Lundi</h2>
                <p>2h pm à 11h pm</p>
                <h2>Lundi</h2>
                <p>2h pm à 11h pm</p>
                <h2>Lundi</h2>
                <p>2h pm à 11h pm</p>
                <h2>Lundi</h2>
                <p>2h pm à 11h pm</p>
                <h2>Lundi</h2>
                <p>2h pm à 11h pm</p>
                <h2>Lundi</h2>
                <p>2h pm à 11h pm</p>
                <h2>Lundi</h2>
                <p>2h pm à 11h pm</p>
            </div>
        </div>
    </section>
    <section id="menu" class="menu">
        <h1>Notre menu</h1>
        <div class="categorie">
            <h2 @click="activerEntree()" :style="{backgroundColor: boutonEntree}">Entrées</h2>
            <h2 @click="activerRepas()" :style="{backgroundColor: boutonRepas}">Plats</h2>
            <h2 @click="activerDessert()" :style="{backgroundColor: boutonDessert}">Desserts</h2>
        </div>

        <div @click="activerEntree()" :style="{display: carteEntree}" class="page">
            <?php foreach ($entrees as $entree) : ?>
                <div class="carte">
                    <div class="image">
                        <img src="<?= $entree->image ?>" alt="">
                    </div>
                    <div class="plats">
                        <div class="nom">
                            <p><?= $entree->nom ?></p>
                            <p><?= $entree->prix ?>$</p>
                        </div>
                        <div class="description">
                            <p><?= $entree->description ?></p>
                            <div class="tag">
                                <p><?= $entree->tags ?></p>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>

        <div @click="activerRepas()" :style="{display: carteRepas}" class="page">
            <?php foreach ($repas as $repa) : ?>
                <div class="carte">
                    <div class="image">
                        <img src="<?= $repa->image ?>" alt="">
                    </div>
                    <div class="plats">
                        <div class="nom">
                            <p><?= $repa->nom ?></p>
                            <p><?= $repa->prix ?>$</p>
                        </div>
                        <div class="description">
                            <p><?= $repa->description ?></p>
                            <div class="tag">
                                <p><?= $repa->tags ?></p>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>

        <div @click="activerDessert()" :style="{display: carteDessert}" class="page">
            <?php foreach ($desserts as $dessert) : ?>
                <div class="carte">
                    <div class="image">
                        <img src="<?= $dessert->image ?>" alt="">
                    </div>
                    <div class="plats">
                        <div class="nom">
                            <p><?= $dessert->nom ?></p>
                            <p><?= $dessert->prix ?>$</p>
                        </div>
                        <div class="description">
                            <p><?= $dessert->description ?></p>
                            <div class="tag">
                                <p><?= $dessert->tags ?></p>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </section>
    <section class="apropos">
        <h1>À propos de nous !</h1>
        <div class="colonne">
            <div class="gauche">
                <div class="image un"></div>
                <p>Un établissement emblématique qui a su séduire les gourmets depuis sa
                    fondation il y a 20 ans.</p>
                <div class="rond"></div>
                <p>Niché au cœur de notre charmante ville, notre restaurant propose une expérience culinaire unique,
                    alliant tradition et innovation.</p>
                <div class="rond"></div>
                <p>Chaque plat est préparé avec des ingrédients frais et locaux, reflétant notre engagement envers
                    la qualité et l'authenticité.</p>
                <div class="image deux"></div>
            </div>
            <div class="droite">
                <p>Au fil des années, Pub G6 est devenu un lieu de rencontre incontournable pour les amoureux de la
                    bonne cuisine.</p>
                <div class="rond"></div>
                <p>Notre équipe passionnée et talentueuse, dirigée par notre chef renommé, met un point d'honneur à
                    offrir un service chaleureux et attentif.</p>
                <div class="rond"></div>
                <p>Que vous veniez pour un dîner romantique, une réunion entre amis ou un événement spécial, notre
                    atmosphère conviviale et élégante vous accueillera toujours avec plaisir.</p>
                <div class="image trois"></div>
                <p>Nous sommes fiers de notre héritage et de notre évolution constante.</p>
                <div class="rond"></div>
                <p>En célébrant deux décennies
                    de succès, nous continuons à innover et à réinventer nos menus pour surprendre et ravir nos
                    clients fidèles.</p>
                <div class="rond"></div>
            </div>
        </div>
        <div class="fin">
            <p>Venez découvrir pourquoi le Bistro du Vieux-Port est une véritable institution culinaire, où chaque
                visite est une fête pour les sens.</p>
        </div>
    </section>
    <section id="infolettre" class="infolettre">

        <?php if (isset($_GET["succes_inscription_infolettre"])) : ?>
            <p class="msg succes">
                <i class="bi bi-check-circle-fill"></i> Vous etes bien inscrit à l'infolettre !
            </p>
        <?php endif; ?>

        <?php if (isset($_GET["echec_inscription_infolettre"])) : ?>
            <p class="msg erreur">
                <i class="bi bi-exclamation-circle-fill"></i> La création du compte a échoué... réessayez plus tard.
            </p>
        <?php endif; ?>

        <?php if (isset($_GET["infos_requises"])) : ?>
            <p class="msg erreur">
                <i class="bi bi-exclamation-circle-fill"></i> Toutes les informations sont requises
            </p>
        <?php endif; ?>
        <div class="formulaire">
            <div class="bordure">
                <p>Abonnez-vous à notre infolettre pour rester informé de toutes nos nouveautés et être les premiers
                    à les découvrir !</p>
                <form action="infolettre-enregistrer" method="POST">
                    <input type="text" name="nomComplet" placeholder="Nom complet...">
                    <input type="text" name="courriel" placeholder="Adresse mail ...">
                    <input type="submit" value="S'inscrire">
                </form>
            </div>
        </div>
    </section>
    <section class="commentaires">
        <h1>Vos commentaires</h1>
        <div>
            <?php $i = 0; foreach ($commentaires as $commentaire) : $i++ ?>
                <div class="commentaire <?= ($i == 2) ? 'com2' : '' ?>">
                    <p><?= $commentaire->texte ?></p>
                    <div class="etoile" style="--rating: <?= $commentaire->note ?>;"></div>
                </div>
            <?php endforeach; ?>
        </div>
    </section>
    <section class="footer">
        <div class="reseaux">
            <img src="public\img\logo\logo_footer.png" alt="">
        </div>
        <div class="icons">
            <a href="https://www.facebook.com/"><i class="bi bi-facebook"></i></a>
            <a href="https://x.com/"><i class="bi bi-twitter-x"></i></a>
            <a href="https://www.instagram.com/"><i class="bi bi-instagram"></i></a>
        </div>
        <div class="liens">
            <a href="">Home</a>
            <a href="">Blog</a>
            <a href="">Boutique</a>
        </div>
    </section>
</main>


<?php include("views/components/foot.php") ?>