{{-- Form Modal --}}
<div id="formModal" role="dialog" tabindex="-1"
    aria-hidden="true" class="modal fade"
>
    <div class="modal-dialog modal-xl">
        <div class="p-0 modal-content">
            <div class="modal-body special-modal-body">

                {{-- Header --}}
                <section class="modal-header">
                    <h3 class="modal-title">
                        {{ __('neutral_words')['new'] }} {{ __('entities')['hotel']['reservation'] }}
                    </h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">
                            <img src="{{ asset('icons/close_modal.svg') }}" alt="">
                        </span>
                    </button>
                </section>

                {{-- Nav tabs --}}
                    {{-- Tabs --}}
                    <ul class="pl-3 nav nav-tabs" id="tabContent">
                        <li class="nav-item active">
                            <a id="defaultTab" class="nav-link sanserif active" href="#reservationsimple" data-toggle="tab">
                                {{ __('entity_forms')['reservation']['sections']['basic_data'] }}
                            </a>
                        </li>
                        &nbsp;&nbsp;
                        <li id="lodging_control_tab">
                            <a class="nav-link sanserif lodging" href="#lodging" data-toggle="tab">
                                {{ __('entity_forms')['reservation']['sections']['lodging'] }}
                            </a>
                        </li>
                        &nbsp;&nbsp;
                        <li>
                            <a class="nav-link sanserif consume" href="#consume" data-toggle="tab">
                                {{ __('entity_forms')['reservation']['sections']['consumption'] }}
                            </a>
                        </li>
                        &nbsp;&nbsp;
                        <li>
                            <a class="nav-link sanserif extras" href="#extras" data-toggle="tab">
                                {{ __('entity_forms')['reservation']['sections']['extras'] }}
                            </a>
                        </li>
                    </ul>

                    {{--Contenido--}}
                    <section class="tab-content">
                        {{-- Reserva Avanzada --}}
                        <div class="tab-pane fade show active" id="reservationsimple">
                            @include('shared.utils.reservation-form.basic.reservation')
                        </div>

                        {{-- Hospedaje --}}
                        <div class="tab-pane fade" id="lodging">
                            @include('shared.utils.reservation-form.basic.lodging')
                        </div>

                        {{-- Consumo --}}
                        <div class="tab-pane fade" id="consume">
                            @include('shared.utils.reservation-form.basic.consumption')
                        </div>

                        {{-- Extra --}}
                        <div class="tab-pane fade" id="extras">
                            @include('shared.utils.reservation-form.basic.extra')
                        </div>
                    </section>

            </div>
        </div>
    </div>
</div>

{{-- Imports --}}
@if ($is_external)
    <script src="{{ asset('js/hotel/reservationForm.js') }}"></script>
@endif