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

{% import 'macros/breadcrumbs.html.twig' as breadcrumbs %}
{% set crumbs = [
    { 'title': 'Accueil'|trans, 'url': path('home_index') },
    { 'title': 'Réservation'|trans, 'url':  null },
] %}

{% block title %}{{ 'Réservation'|trans }}{% endblock %}

{% block body %}
    <div class="">
        <div class="container">
            {{ breadcrumbs.breadcrumb(crumbs) }}
        </div>
        <div class="section_light top_snow">
            <section class="container">
                <div class="row">
                    <div class="col-md-6 col-lg-3 mb-3">
                        <div class="card">
                            <div class="card-header">
                                <h1 class="h5">{{ 'Réservation'|trans }}</h1>
                            </div>
                            <div class="card-body">
                                {{ form_start(bookingForm) }}
                                <div class="row">
                                    <div class="col-12 mb-3">
                                        {{ form_row(bookingForm.dateRange) }}
                                        <b id="js-booking_rooms_available"
                                           class="{{ availableRooms.className|default('') }}">{{ availableRooms.text|default('') }}</b>
                                    </div>
                                    <div class="col-6">{{ form_label(bookingForm.adults) }}</div>
                                    <div class="col-6">{{ form_widget(bookingForm.adults) }}</div>
                                    <div class="col-6">{{ form_label(bookingForm.children) }}</div>
                                    <div class="col-6">{{ form_widget(bookingForm.children) }}</div>
                                    <div class="col-6">{{ form_label(bookingForm.nbRooms) }}</div>
                                    <div class="col-6">{{ form_widget(bookingForm.nbRooms) }}</div>
                                    <div class="col-12 mb-3">
                                        {{ form_help(bookingForm.nbRooms) }}
                                    </div>
                                    <div class="flex-between-center col-6 mt-3">{{ form_label(bookingForm.catering) }}</div>
                                    <div class="flex-between-center col-6 mt-3">{{ form_widget(bookingForm.catering) }}</div>
                                    <div class="flex-between-center col-12 ">{{ form_help(bookingForm.catering) }}</div>
                                    {#                                <div class="flex-between-center col-6 mt-3">{{ form_label(bookingForm.requestedRoomType) }}</div> #}
                                    {#                                <div class="flex-between-center col-6 mt-3">{{ form_widget(bookingForm.requestedRoomType) }}</div> #}
                                    <div class="col-12 mt-3">{{ form_widget(bookingForm.options) }}</div>
                                    <div class="col-12 mt-3">{{ form_row(bookingForm.comment) }}</div>
                                </div>
                                <div class="flex-between-center">
                                    <button type="reset" class="btn btn-sm btn-secondary">{{ 'Effacer'|trans }}</button>
                                    <button type="submit" class="btn btn-primary">{{ 'Mettre à jour'|trans }}</button>
                                </div>
                                {{ form_errors(bookingForm) }}
                                {{ form_end(bookingForm) }}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-9">
                        <div class="card">
                            <div class="card-header">
                                <h2 class="h5">{{ 'Résumé de votre réservation'|trans }}</h2>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col col-lg-6 col-xl-8">
                                        <div class="row">
                                            <div class="col col-lg-6">
                                                <ul class="list-group mb-3">
                                                    <li class="list-group-item flex-between-center">
                                                        <span>{{ 'Séjour'|trans }}</span>
                                                        <span><b>{{ booking.dateRange }}</b></span>
                                                    </li>
                                                    <li class="list-group-item flex-between-center">
                                                        <span><b>{{ booking.duration }}</b> {{ 'nuits'|trans }}</span>
                                                        <span><b>{{ booking.nbRooms }}</b> {{ 'chambre(s)'|trans }}</span>
                                                    </li>
                                                    <li class="list-group-item flex-between-center">
                                                        <span><b>{{ booking.adults }}</b> {{ 'adulte(s)'|trans }}</span>
                                                        <span><b>{{ booking.children }}</b> {{ 'enfant(s)'|trans }}</span>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="col col-lg-6">
                                                <ul class="list-group mb-3">
                                                    <li class="list-group-item flex-between-center">
                                                        <span>{{ 'Total adultes'|trans }}</span>
                                                        <span><b>{{ resumeBooking.totalPriceAdults|formatPriceDevise }}</b></span>
                                                    </li>
                                                    <li class="list-group-item flex-between-center">
                                                        <span>{{ 'Total enfants'|trans }}</span>
                                                        <span><b>{{ resumeBooking.totalPriceChildren|formatPriceDevise }}</b></span>
                                                    </li>
                                                    <li class="list-group-item flex-between-center">
                                                        <span>{{ 'Total options'|trans }}</span>
                                                        <span><b>{{ resumeBooking.totalPriceOptions|formatPriceDevise }}</b></span>
                                                    </li>
                                                    <li class="list-group-item flex-between-center">
                                                        <span>{{ 'Total restauration'|trans }}</span>
                                                        <span><b>{{ resumeBooking.totalPriceCatering|formatPriceDevise }}</b></span>
                                                    </li>
                                                    {% if resumeBooking.totalMembership > 0 %}
                                                        <li class="list-group-item flex-between-center">
                                                            <span>{{ 'Total adhésion'|trans }}</span>
                                                            <span><b>{{ resumeBooking.totalMembership|formatPriceDevise }}</b></span>
                                                        </li>
                                                    {% endif %}
                                                    <li class="list-group-item flex-between-center">
                                                        <span>{{ 'Total réservation'|trans }}</span>
                                                        <span><b>{{ resumeBooking.totalPrice|formatPriceDevise }}</b></span>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="col-12 mb-3">
                                                <ul class="list-group mb-3">
                                                    <li class="list-group-item flex-between-center">
                                                        <span>{{ 'Restauration'|trans }} : <b>{{ booking.catering.name|default('Sans restauration') }}</b></span>
                                                    </li>
                                                    {% for bookingOption in bookingOptions %}
                                                        <li class="list-group-item flex-between-center">
                                                            {% if bookingOption.is_membership is defined and bookingOption.is_membership %}
                                                                <span>{{ 'Adhésion'|trans }} : <b>{{ bookingOption.name }}</b></span>
                                                            {% else %}
                                                                <span>{{ 'Option'|trans }} : <b>{{ bookingOption.name }}</b></span>
                                                            {% endif %}
                                                        </li>
                                                    {% endfor %}
                                                </ul>
                                                <div>Votre message : <i>{{ booking.comment|default('-- NC --') }}</i></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col col-lg-12 col-xl-4">
                                        <p><b id="js-booking_rooms_available"
                                              class="{{ availableRooms.className|default('') }}">{{ availableRooms.text|default('') }}</b>
                                        </p>
                                        {% if availableRooms.hasAvailableRooms %}
                                            <div>
                                                <p>Pour finaliser votre réservation, un règlement est nécessaire. Ce
                                                    paiement
                                                    garantit la disponibilité de votre séjour et permet de valider
                                                    définitivement
                                                    votre demande.</p>
                                                <p> Une fois effectué, vous recevrez une confirmation par email.</p>
                                                <p>Merci de votre confiance !</p>
                                                <div class="w-100">
                                                    <div>
                                                        <form action="{{ path('@Booking_confirm') }}" method="post">
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" value=""
                                                                       id="checkRules" name="checkRules" required>
                                                                <label class="form-check-label" for="checkRules">
                                                                    J’accepte la <a target="_blank"
                                                                                    href="{{ path('@CMS_show', {'slug':'charte-de-vie-ete-hiver'}) }}"
                                                                    >charte de vie du chalet</a>
                                                                </label>
                                                            </div>
                                                            <div>
                                                                <input type="submit" name="payment"
                                                                       value="{{ 'Payer'|trans }}"
                                                                       class="btn btn-primary">
                                                            </div>
                                                            {% if app.user.profile and app.user.profile.hasEstimate %}
                                                                <div class="mt-3">
                                                                    <input type="submit" name="estimate"
                                                                           value="{{ 'Demander un devis'|trans }}"
                                                                           class="btn btn-secondary">
                                                                </div>
                                                            {% endif %}
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <div class="section_dark">
            <section class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="card my-3">
                            <div class="card-header">
                                <h2 class="h5">{{ 'Les activités locales'|trans }}</h2>
                            </div>
                            <div class="card-body">
                                <div class="row row-cols-2 row-cols-md-1 row-cols-lg-2 row-cols-xl-4"
                                     id="js-home_booking_activites">
                                    {{ include('@Booking/front/activity/_card_activities.html.twig') }}
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h2 class="h5">{{ 'Nos chambres'|trans }}</h2>
                            </div>
                            <div class="card-body">
                                <div class="row row-cols-1 row-cols-lg-2 row-cols-xl-4" id="js-home_booking_rooms">
                                    {{ include('@Booking/front/room/_card_items.html.twig') }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
{% endblock %}