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

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

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const collectionHolder = document.getElementById('rooms-collection');
        const addButton = document.getElementById('add-room');

        let index = collectionHolder.querySelectorAll('.room-item').length;

        addButton.addEventListener('click', function () {
            const prototype = collectionHolder.dataset.prototype;
            const newForm = prototype.replace(/__name__/g, index);
            index++;

            const div = document.createElement('div');
            div.innerHTML = newForm;

            const removeButton = div.querySelector('.btn-remove');
            if (removeButton) {
                removeButton.addEventListener('click', function () {
                    div.remove();
                });
            }

            collectionHolder.appendChild(div);
        });

        document.querySelectorAll('.btn-remove').forEach(btn => {
            btn.addEventListener('click', function () {
                btn.closest('.room-item').remove();
            });
        });
    });
</script>

<section class="content">
    <div class="box box-default">
        <div class="box-header"></div>
            <form action="{{ path }}" method="post">
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                {{ form_label(form.destination) }}
                                {{ form_widget(form.destination) }}
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                {{ form_label(form.roomFromAdmin) }}
                                {{ form_widget(form.roomFromAdmin) }}
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                {{ form_label(form.pension) }}
                                {{ form_widget(form.pension) }}
                            </div>
                        </div>
                        <div class="col-md-2 form-start-datepicker">
                            <label>Date début</label>
                            <div class="input-group">
                                <div class="input-group-addon">
                                    <i class="fa fa-calendar"></i>
                                </div>
                                {{ form_widget(form.beginDate, {'attr': {'data-class': 'beginDate', 'class': 'form-control end-datepicker', 'placeholder': 'aaaa-mm-jj'}}) }}
                            </div>
                        </div>
                        <div class="col-md-2 form-end-datepicker">
                            <label>Date fin</label>
                            <div class="input-group">
                                <div class="input-group-addon">
                                    <i class="fa fa-calendar"></i>
                                </div>
                                {{ form_widget(form.endDate, {'attr': {'data-class': 'endDate', 'class': 'form-control end-datepicker', 'placeholder': 'aaaa-mm-jj'}}) }}
                            </div>
                        </div>
                    </div>
                    <div id="rooms-collection"
                         data-prototype="
                            <div class='room-item mb-3'>
                                <div class='row align-items-end'>
                                    <div class='col-md-2'>
                                        <div class='d-flex align-items-center gap-2'>
                                            <label class='form-label mb-0' for='form_room___name___adult'>Adulte</label>
                                            {{ form_widget(form.room.vars.prototype.adult, {'attr': {'class': 'form-control w-auto'}})|e('html_attr') }}
                                        </div>
                                    </div>
                                    <div class='col-md-2'>
                                        <div class='d-flex align-items-center gap-2'>
                                            <label class='form-label mb-0' for='form_room___name___child'>Enfant</label>
                                            {{ form_widget(form.room.vars.prototype.child, {'attr': {'class': 'form-control w-auto'}})|e('html_attr') }}
                                        </div>
                                    </div>
                                    <div class='col-md-2 d-flex justify-content-end align-self-end'>
                                        <button type='button' class='btn btn-danger btn-sm btn-remove'>Supprimer</button>
                                    </div>
                                </div>
                            </div>">
                        {% for roomForm in form.room %}
                            <div class="room-item mb-3">
                                <div class="row align-items-end">
                                    <div class="col-md-2">
                                        <div class="d-flex align-items-center gap-2">
                                            <label for="{{ roomForm.adult.vars.id }}" class="form-label mb-0">
                                                {{ roomForm.adult.vars.label }}
                                            </label>
                                            {{ form_widget(roomForm.adult, {
                                                'attr': {'class': 'form-control w-auto'}
                                            }) }}
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="d-flex align-items-center gap-2">
                                            <label for="{{ roomForm.child.vars.id }}" class="form-label mb-0">
                                                {{ roomForm.child.vars.label }}
                                            </label>
                                            {{ form_widget(roomForm.child, {
                                                'attr': {'class': 'form-control w-auto'}
                                            }) }}
                                        </div>
                                    </div>
                                    <div class="col-md-2 d-flex justify-content-end align-self-end">
                                        <button type="button" class="btn btn-danger btn-sm btn-remove">Supprimer</button>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                    <div class="col-12 mt-3">
                        <button type="button" id="add-room" class="btn btn-primary">Ajouter une chambre</button>
                    </div>
                    <div class="row">
                    <div class="box-footer pull-right">
                        {{ form_widget(form.submit, {'label': label_btn, attr: {'class':'btn btn-primary'} }) }}
                    </div>
                </div>
            </div>
        </form>
    </div>
</section>