{% import 'shared/componnents/_macros/_alerts.html.twig' as alerts %}

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

{% block title %}Recherche hotels{% endblock %}

{% block stylesheets %}
    {{ parent() }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        $(document).ready(function() {
            $('.pension.active').each(function() {
                let finalPrice = 0;
                let hotelContractId = $(this).data('contract');
                let pensionId = $(this).data('pension');
                $('input[data-class=room_' + pensionId + '_' + hotelContractId).each(function() {
                    if ($(this).is(':checked')) {
                        finalPrice += parseFloat($(this).val());
                        $("div[data-class=finalPrice_"+hotelContractId+"]").html(finalPrice);
                    }
                });
                $('.hotel-contract-'+hotelContractId+'-pension-id').val(pensionId);
            });

            $('.pension.active').each(function() {
                let hotelContractId = $(this).data('contract');
                let pensionId = $(this).data('pension');
                $('input[data-class=room_' + pensionId + '_' + hotelContractId).click(function() {
                    let finalPrice = 0;
                    $('input[data-class=room_' + pensionId + '_' + hotelContractId).each(function() {
                        if ($(this).is(':checked')) {
                            finalPrice += parseFloat($(this).val());
                            $("div[data-class=finalPrice_"+hotelContractId+"]").html(finalPrice);
                        }
                    });
                });
                $('.hotel-contract-'+hotelContractId+'-pension-id').val(pensionId);
            });

            $('.pension').click(function() {
                let hotelContractId = $(this).data('contract');
                let pensionId = $(this).data('pension');
                $('input[data-class=room_' + pensionId + '_' + hotelContractId).click(function() {
                    let finalPrice = 0;
                    $('input[data-class=room_' + pensionId + '_' + hotelContractId).each(function() {
                        if ($(this).is(':checked')) {
                            finalPrice += parseFloat($(this).val());
                            $("div[data-class=finalPrice_"+hotelContractId+"]").html(finalPrice);
                        }
                    });
                });

                let finalPrice = 0;
                $('input[data-class=room_' + pensionId + '_' + hotelContractId).each(function() {
                    if ($(this).is(':checked')) {
                        finalPrice += parseFloat($(this).val());
                        $("div[data-class=finalPrice_"+hotelContractId+"]").html(finalPrice);
                    }
                });
                $('.hotel-contract-'+hotelContractId+'-pension-id').val(pensionId);
            });

            $('.detail-hotel').click(function() {
                let path = $(this).data('path');
                let hotelContractId = $(this).data('id');
                let pensionId = $('.hotel-contract-'+hotelContractId+'-pension-id').val();
                let beginDate = $('input[data-class=beginDate]').val();
                let endDate = $('input[data-class=endDate]').val();
                let roomIds = [];
                $("input[data-room=contract_"+hotelContractId+"_pension_"+pensionId+"]").each(function() {
                    if ($(this).is(':checked')) {
                        roomIds.push($(this).data('id'));
                    }
                });
                let roomIdValues = roomIds.join(', ');
                $('.step-booking').removeClass('active');
                $('#step-booking-3').addClass('active');
                displayFormToCreateBooking(path, hotelContractId, beginDate, endDate, pensionId, roomIdValues);
            })
            $(this).submit(function () {
                sessionStorage.setItem('formSubmitted', 'true');
            });
        });

        $(window).on('load', function() {
            if (sessionStorage.getItem('formSubmitted') === 'true') {
                //$('#_alert-id').remove();
                sessionStorage.removeItem('formSubmitted');
            }
        })
    </script>
{% endblock %}

{% block content %}
    {% set form = form ?? null %}
    {% set step_booking = step_booking ?? null %}
    {% set errors_validator = form_errors(form.roomFromAdmin) ~ '' ~ form_errors(form.beginDate) %}

    {% if errors_validator is not empty %}
        {{ alerts.notification(errors_validator, 'info') }}
    {% endif %}

    {% include 'shared/componnents/_step_payment.html.twig' with {'step': step_booking} %}
    {% include 'booking/search/new.html.twig' with {'form': form} %}

    <div class="notification-errors" style="z-index: inherit"></div>
    <div class="hotel-booking-form">
        {% set atLeastOneHotelAvailable = false %}
        {% for hotelDetail in hotelsDetail %}
            {% if hotelDetail.prices is not empty and hotelDetail['prices']['days_not_available'] is not defined %}
                {% set atLeastOneHotelAvailable = true %}
                <section class="content">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="box box-default">
                                    <div class="row no-gutters">
                                        <div class="col-md-2">
                                            <img src="https://image.resabooking.com/images/image_panoramique/monarque_dar_jerba_narjes_3.jpg"
                                                 class="img-fluid rounded-left"
                                                 alt="Image de l'hôtel"
                                                 style="
                                                 height: 160px;
                                                 width: 120%;
                                                 object-fit: cover;
                                                 border-top-left-radius: 5px;
                                                 border-bottom-left-radius: 5px;">
                                        </div>
                                        <div class="col-md-7">
                                            <div class="box-body">
                                                <div class="page-header">
                                                    <p>
                                                        <small>{{ hotelDetail['name'] }}, {{ hotelDetail['city']['name'] }}</small>
                                                        <span style="font-size: 15px; color: burlywood;" class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
                                                        <span style="font-size: 15px; color: burlywood;" class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
                                                        <span style="font-size: 15px; color: burlywood;" class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
                                                        <span style="font-size: 15px; color: burlywood;" class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
                                                    </p>
                                                </div>
                                                <ul class="nav nav-pills" style="margin-top: -10px;">
                                                    <input type="hidden" class="hotel-contract-{{ hotelDetail['hotel_contract_id'] }}-pension-id" value="">
                                                    {% for key,price in hotelDetail.prices %}
                                                        <li
                                                                data-pension="{{ price['pension_id'] }}"
                                                                data-contract="{{ hotelDetail['hotel_contract_id'] }}"
                                                                class="pension {% if key == 0 %} active{% endif %}">
                                                            <a
                                                                data-toggle="pill"
                                                                href="#{{ hotelDetail['hotel_contract_id'] }}_{{ price['pension_id'] }}">
                                                                {{ price['pension_name'] }}
                                                            </a>
                                                        </li>
                                                    {% endfor %}
                                                </ul>
                                                <div class="tab-content">
                                                    {% for key,price in hotelDetail.prices %}
                                                        <div
                                                                id="{{ hotelDetail['hotel_contract_id'] }}_{{ price['pension_id'] }}"
                                                                class="tab-pane fade {% if key == 0 %}in active{% endif %}">
                                                            <ul class="list-group">
                                                                {% set order = '' %}
                                                                {% set roomLabelOrder = 1 %}
                                                                {% for roomKey,room in price.rooms_per_pension %}
                                                                    {% set checked = false %}
                                                                    {% if order != room['order'] and (0 == room['order'] or 1 == room['order'] or 2 == room['order'] or 3 == room['order']) %}
                                                                        {% set checked = true %}
                                                                        <li
                                                                            style="background-color: #F3F5F7"
                                                                            class="list-group-item">
                                                                            <i class="fa fa-fw fa-hotel"></i>
                                                                            Chambre {{ roomLabelOrder }}
                                                                        </li>
                                                                        {% set roomLabelOrder = roomLabelOrder + 1 %}
                                                                    {% endif %}
                                                                    {% set order =  room['order'] %}
                                                                    <li class="list-group-item pointer">
                                                                        <input
                                                                                type="radio"
                                                                                class="room pointer"
                                                                                name="room_{{ hotelDetail['hotel_contract_id'] }}_{{ price['pension_id'] }}_{{ room['order'] }}"
                                                                                {% if checked %} checked {% endif %}
                                                                                data-class="room_{{ price['pension_id'] }}_{{ hotelDetail['hotel_contract_id'] }}"
                                                                                data-room="contract_{{ hotelDetail['hotel_contract_id'] }}_pension_{{ price['pension_id'] }}"
                                                                                data-id="{{ room['id'] }}"
                                                                                value="{{ room['final_price'] }}">
                                                                        {{ room['name'] }}
                                                                    </li>
                                                                {% endfor %}
                                                            </ul>
                                                        </div>
                                                    {% endfor %}
                                                </div>
                                            </div>
                                        </div>
                                        <div style="margin-top: 3em" class="col-md-3">
                                            <div data-class="finalPrice_{{ hotelDetail['hotel_contract_id'] }}" class="mb-3 price_room" style="margin-left: 3em;margin-bottom: 1em;margin-top: 2em;"></div>
                                            <input
                                                style="margin-left: 2em;"
                                                type="submit"
                                                class="btn btn-primary btn-lg detail-hotel"
                                                data-id="{{ hotelDetail['hotel_contract_id'] }}"
                                                data-path="{{ path('app_booking_display_form_booking') }}"
                                                value="Étape suivante >">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            {% endif %}
        {% endfor %}
        {% if atLeastOneHotelAvailable is not true %}
            {{ alerts.alert('no_hotel_available'|trans, 'info', 'fa fa-fw fa-warning', 'Warning !') }}
        {% endif %}
    </div>
{% endblock %}