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

{% block title %}Réserver les produits de la ferme de la bouille!{% endblock %}

{% block body %}

    {%  include 'front/partials/subheader.html.twig' %}

    <main class="container page-home">
        <div class="row">
            <div class="full-content col-md-8 p-5">
                <p class="text-center">
                    <img src="/img/menu-titre.jpg"  alt="Au Menu">
                </p>
                <p class="alert alert-info my-3">
                    Pour réserver nos produits, sélectionnez les quantités souhaitées pour chaque produit, puis cliquer sur le bouton "suivant".
                </p>
                <form action="{{ path('recap_commande') }}" method="POST">
                    <h2 class="m-0 d-flex justify-content-between"><div class="titre">{{ menu.name }}</div><div class="prix">{{menu.price}}€</div></h2>
                    <p class="mb-2 text-primary"><em>{{menu.description}}</em></p>
                    <ul class="menu-list list-inline">
                        {% for item in menus %}
                        <li class="d-flex justify-content-between">
                            <div class="plat">
                                {{item.name}}
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                    <div class="alert alert-warning">
                        <strong>{{ menu.name }} :</strong>
                        <label for="menu">Quantité :</label>
                        <select name="menu" id="menu">
                            <option value="0">0</option>
                            <option value="Menu de la semaine - x 1">01</option>
                            <option value="Menu de la semaine - x 2">02</option>
                            <option value="Menu de la semaine - x 3">03</option>
                            <option value="Menu de la semaine - x 4">04</option>
                            <option value="Menu de la semaine - x 5">05</option>
                            <option value="Menu de la semaine - x 6">06</option>
                            <option value="Menu de la semaine - x 7">07</option>
                            <option value="Menu de la semaine - x 8">08</option>
                            <option value="Menu de la semaine - x 9">09</option>
                            <option value="Menu de la semaine - x 10">10</option>
                        </select>
                    </div>

                    <h2 class="mt-5 mb-0"><div class="titre">{{ plat.name }}</div></h2>
                    <p class="mb-2 text-primary"><em>{{ plat.description }}</em></p>
                    <ul class="menu-list list-inline">
                        {% for item in plats %}
                            <li class="d-flex justify-content-between">
                                <div class="plat">
                                    {{item.name}}
                                    <p class="mb-2 text-primary"><em>{{item.description}}</em></p>
                                    <div class="alert alert-warning">
                                        <label for="plat{{ item.id }}">Quantité <small>({{ item.name }})</small>:</label>
                                        <select name="plat{{ item.id }}" id="plat{{ item.id }}">
                                            <option value="0">0</option>
                                            <option value="{{ item.name }} - x 1">01</option>
                                            <option value="{{ item.name }} - x 2">02</option>
                                            <option value="{{ item.name }} - x 3">03</option>
                                            <option value="{{ item.name }} - x 4">04</option>
                                            <option value="{{ item.name }} - x 5">05</option>
                                            <option value="{{ item.name }} - x 6">06</option>
                                            <option value="{{ item.name }} - x 7">07</option>
                                            <option value="{{ item.name }} - x 8">08</option>
                                            <option value="{{ item.name }} - x 9">09</option>
                                            <option value="{{ item.name }} - x 10">10</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="prix">{{item.price}}€<small>/{{item.priceUnit}}</small></div>
                            </li>
                        {% endfor %}
                    </ul>

                    <h2 class="mt-5 mb-0"><div class="titre">{{douceur.name}} </div></h2>
                    <p class="mb-2 text-primary"><em>{{douceur.description}}</em></p>
                    <ul class="menu-list list-inline">
                        {% for item in douceurs %}
                            <li class="d-flex justify-content-between">
                                <div class="plat">
                                    {{item.name}}
                                    <p class="mb-2 text-primary"><em>{{item.description}}</em></p>
                                    <div class="alert alert-warning">
                                        <label for="plat{{ item.id }}">Quantité <small>({{ item.name }})</small>:</label>
                                        <select name="plat{{ item.id }}" id="plat{{ item.id }}">
                                            <option value="0">0</option>
                                            <option value="{{ item.name }} - x 1">01</option>
                                            <option value="{{ item.name }} - x 2">02</option>
                                            <option value="{{ item.name }} - x 3">03</option>
                                            <option value="{{ item.name }} - x 4">04</option>
                                            <option value="{{ item.name }} - x 5">05</option>
                                            <option value="{{ item.name }} - x 6">06</option>
                                            <option value="{{ item.name }} - x 7">07</option>
                                            <option value="{{ item.name }} - x 8">08</option>
                                            <option value="{{ item.name }} - x 9">09</option>
                                            <option value="{{ item.name }} - x 10">10</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="prix">{{item.price}}€<small>/{{item.priceUnit}}</small></div>
                            </li>
                        {% endfor %}
                    </ul>

                    <h2 class="mt-5 mb-0"><div class="titre">{{viande.name}}</div></h2>
                    <p class="mb-2 text-primary"><em>{{ viande.description }}</em></p>
                    <ul class="menu-list list-inline">
                        {% for item in viandes %}
                            <li class="d-flex justify-content-between">
                                <div class="plat">
                                    {{item.name}}
                                    <p class="mb-2 text-primary"><em>{{item.description}}</em></p>
                                    <div class="alert alert-warning">
                                        <label for="plat{{ item.id }}">Quantité <small>({{ item.name }})</small>:</label>
                                        <select name="plat{{ item.id }}" id="plat{{ item.id }}">
                                            <option value="0">0</option>
                                            <option value="{{ item.name }} - x 1">01</option>
                                            <option value="{{ item.name }} - x 2">02</option>
                                            <option value="{{ item.name }} - x 3">03</option>
                                            <option value="{{ item.name }} - x 4">04</option>
                                            <option value="{{ item.name }} - x 5">05</option>
                                            <option value="{{ item.name }} - x 6">06</option>
                                            <option value="{{ item.name }} - x 7">07</option>
                                            <option value="{{ item.name }} - x 8">08</option>
                                            <option value="{{ item.name }} - x 9">09</option>
                                            <option value="{{ item.name }} - x 10">10</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="prix">{{item.price}}€<small>/{{item.priceUnit}}</small></div>
                            </li>
                        {% endfor %}
                    </ul>

                    <h2 class="mt-5 mb-0"><div class="titre">{{charcut.name}}</div></h2>
                    <p class="mb-2 text-primary"><em>{{ charcut.description }}</em></p>
                    <ul class="menu-list list-inline">
                        {% for item in charcuts %}
                            <li class="d-flex justify-content-between">
                                <div class="plat">
                                    {{item.name}}
                                    <p class="mb-2 text-primary"><em>{{item.description}}</em></p>
                                    <div class="alert alert-warning">
                                        <label for="plat{{ item.id }}">Quantité <small>({{ item.name }})</small>:</label>
                                        <select name="plat{{ item.id }}" id="plat{{ item.id }}">
                                            <option value="0">0</option>
                                            <option value="{{ item.name }} - x 1">01</option>
                                            <option value="{{ item.name }} - x 2">02</option>
                                            <option value="{{ item.name }} - x 3">03</option>
                                            <option value="{{ item.name }} - x 4">04</option>
                                            <option value="{{ item.name }} - x 5">05</option>
                                            <option value="{{ item.name }} - x 6">06</option>
                                            <option value="{{ item.name }} - x 7">07</option>
                                            <option value="{{ item.name }} - x 8">08</option>
                                            <option value="{{ item.name }} - x 9">09</option>
                                            <option value="{{ item.name }} - x 10">10</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="prix">{{item.price}}€<small>/{{item.priceUnit}}</small></div>
                            </li>
                        {% endfor %}
                    </ul>

                    <h2 class="mt-5 mb-0"><div class="titre">{{suggestion.name}}</div></h2>
                    <p class="mb-2 text-primary"><em>{{ suggestion.description }}</em></p>
                    <ul class="menu-list list-inline">
                        {% for item in suggestions %}
                            <li class="d-flex justify-content-between">
                                <div class="plat">
                                    {{item.name}}
                                    <p class="mb-2 text-primary"><em>{{item.description}}</em></p>
                                    <div class="alert alert-warning">
                                        <label for="plat{{ item.id }}">Quantité <small>({{ item.name }})</small>:</label>
                                        <select name="plat{{ item.id }}" id="plat{{ item.id }}">
                                            <option value="0">0</option>
                                            <option value="{{ item.name }} - x 1">01</option>
                                            <option value="{{ item.name }} - x 2">02</option>
                                            <option value="{{ item.name }} - x 3">03</option>
                                            <option value="{{ item.name }} - x 4">04</option>
                                            <option value="{{ item.name }} - x 5">05</option>
                                            <option value="{{ item.name }} - x 6">06</option>
                                            <option value="{{ item.name }} - x 7">07</option>
                                            <option value="{{ item.name }} - x 8">08</option>
                                            <option value="{{ item.name }} - x 9">09</option>
                                            <option value="{{ item.name }} - x 10">10</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="prix">{{item.price}}€<small>/{{item.priceUnit}}</small></div>
                            </li>
                        {% endfor %}
                    </ul>

                    <div class="py-3 text-center">
                        <button type="submit" class="btn btn-primary btn-lg" name="send_selec" id="send_selec">suivant</button>
                    </div>
                </form>




                <p class="info">Nos tarifs sont en euros, prix net.</p>
            </div>

            {%  include 'front/partials/aside.html.twig' %}
        </div>
    </main>
{% endblock %}