{% set path = path ?? null %}
{% set path_list =  path_list ?? null %}
{% set label_btn = label_btn ?? '' %}
{% set title = title ?? '' %}

<script>
    $(document).ready(function() {
        $('#booking_room_submit').click(function (event) {
            event.preventDefault();
            let path = $(this).data('path');
            let pathToConfirmation = $(this).data('path-confirmation-page');
            let formData = {
                civility:    $('select[data-class=civility]').val(),
                firstName:   $('input[data-class=firstName]').val(),
                lastName:    $('input[data-class=lastName]').val(),
                email:       $('input[data-class=email]').val(),
                phone:       $('input[data-class=phone]').val(),
                address:     $('input[data-class=address]').val(),
                country:     $('input[data-class=country]').val(),
                city:        $('input[data-class=city]').val(),
                paymentType: $('input[data-class=payment_mode]:checked').val(),
                agencyId:    $('input[data-class=agency_id]:checked').val()
            };

            createBookingFromAdmin(path, formData, pathToConfirmation);
        });

        $('input[data-class="payment_mode"]').on('change', function () {
            let selected = $(this).val();

            if (selected === 'payment_transfer') {
                $('#rib-block').show();
            } else {
                $('#rib-block').hide();
            }

            if (selected === 'payment_agency') {
                $('#agencyList').collapse('show');
            } else {
                $('#agencyList').collapse('hide');
            }
        });
    });
</script>

<section class="content">
    <div class="box box-default">
        <div class="box-header with-border"><h3 class="box-title">{{ title }}</h3></div>
            <div id="booking-form">
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                {{ form_label(form.civility) }}
                                {{ form_widget(form.civility, {'attr': {'data-class': 'civility', 'class': 'form-control'}}) }}
                                {{ form_errors(form.civility) }}
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                {{ form_label(form.firstName) }}
                                {{ form_widget(form.firstName, {'attr': {'data-class': 'firstName', 'class': 'form-control'}}) }}
                                {{ form_errors(form.firstName) }}
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group {% if form.lastName.vars.valid == false %} has-error {% endif %}">
                                {{ form_label(form.lastName) }}
                                {{ form_widget(form.lastName, {'attr': {'data-class': 'lastName', 'class': 'form-control'}}) }}
                                {{ form_errors(form.lastName) }}
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group {% if form.email.vars.valid == false %} has-error {% endif %}">
                                {{ form_label(form.email) }}
                                {{ form_widget(form.email, {'attr': {'data-class': 'email', 'class': 'form-control'}}) }}
                                {{ form_errors(form.email) }}
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                {{ form_label(form.phone) }}
                                {{ form_widget(form.phone, {'attr': {'data-class': 'phone', 'class': 'form-control'}}) }}
                                {{ form_errors(form.phone) }}
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                {{ form_label(form.address) }}
                                {{ form_widget(form.address, {'attr': {'data-class': 'address', 'class': 'form-control'}}) }}
                                {{ form_errors(form.address) }}
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                {{ form_label(form.country) }}
                                {{ form_widget(form.country, {'attr': {'data-class': 'country', 'class': 'form-control'}}) }}
                                {{ form_errors(form.country) }}
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                {{ form_label(form.city) }}
                                {{ form_widget(form.city, {'attr': {'data-class': 'city', 'class': 'form-control'}}) }}
                                {{ form_errors(form.city) }}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label><strong>Mode de paiement :</strong></label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group" data-toggle="buttons">
                                {% for child in form.paymentType %}
                                    <label class="btn btn-default {% if child.vars.checked %}active{% endif %}">
                                        {{ form_widget(child, {'attr': {'autocomplete': 'off'}}) }}
                                        {% if child.vars.value == 'payment_agency' %}
                                            <span class="glyphicon glyphicon-home text-primary"></span>
                                            <strong> Paiement à l'agence</strong>
                                        {% elseif child.vars.value == 'payment_cb' %}
                                            <span class="glyphicon glyphicon-credit-card text-success"></span>
                                            <strong> Paiement par carte bancaire</strong>
                                        {% elseif child.vars.value == 'payment_transfer' %}
                                            <span class="glyphicon glyphicon-transfer text-warning"></span>
                                            <strong> Versement bancaire</strong>
                                        {% endif %}
                                    </label>
                                {% endfor %}
                            </div>

                            <div id="agencyList" class="collapse in">
                                {% if form.agencyId is defined %}
                                    {% set first = true %}
                                    {{ form_label(form.agencyId) }}
                                    <br>
                                    {% for agency in form.agencyId %}
                                        {{ form_widget(agency, {attr: {checked: first ?? false}}) }}
                                        <span class="glyphicon glyphicon-map-marker text-info"></span>
                                        {{ agency.vars.label }}
                                        <br>
                                        {% set first = false %}
                                    {% endfor %}
                                {% endif %}
                            </div>
                            <div id="rib-block" class="alert alert-info" style="display: none; margin-top: 10px;">
                                <strong>Coordonnées bancaires :</strong><br>
                                Banque : BNP PARIBAS<br>
                                IBAN : FR76 3000 4000 0001 2345 6789 012<br>
                                BIC : BNPAFRPPXXX
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="box-footer pull-right">
                            {{ form_widget(form.submit, {
                                'label': label_btn,
                                attr: {
                                    'data-path-confirmation-page': path('app_booking_display_confirmation_booking'),
                                    'data-path': path('app_booking_create_booking_from_admin'),
                                    'class':'btn btn-primary'
                                }
                            })}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>