{{-- Styles --}}
<style>

  /*/ Tags /*/
    label {
        color: #0d6889 !important;
        background-color: #f0f0f0;
        margin-bottom: 0.3rem !important;
        border-radius: 6px 0px 0px 6px;
        padding: 0.45rem 0.55rem 0.45rem 0.45rem;
    }

  /*/ Custom Classes /*/
    /* Forms */
        .form-group{
            padding-left: 0.5rem !important;
            padding-right: 0.5rem !important;
        }

        .form-season-group{
            padding-left: 0rem !important;
            padding-right: 0rem !important;
        }

        .form-control-harsi{
            border-radius: 0px 5px 5px 0px !important;
            border-left: 1.5px solid #0d6889;
        }

        .period_label{
            padding-top: 0.4rem !important;
            padding-right: 0.4rem !important;
            font-weight: 500 !important;
            background-color: #D9D9D9 !important;
        }

        .disabled-select {
            background-color: #FEFEFEBF !important;
        }

        .disabled-interactions {
            pointer-events: none !important;
            background-color: #F0F0F0BF  !important;
        }

    /* Text */
        .subtitle_form{
            color: #0d6889 !important;
            text-transform: uppercase !important;
            font-size: 0.9rem !important;
            font-weight: 500 !important;
            padding-top: 0.6rem;
        }

        .season_subtitle{
            color: #0d6889 !important;
            text-transform: capitalize !important;
            font-size: 1rem !important;
            font-weight: 600 !important;
            margin-bottom: 0.6rem;
        }
</style>

@if($has_otas)
    <style>
      /* Decorators */
        .border-left {
            border-left: 2px solid #ebebeb !important
        }
    </style>
@endif

{{-- Form Modal --}}
<div id="formModal" class="mt-5 modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body @if($has_otas) special-modal-body @endif">

                {{-- Title --}}
                <section class="row justify-content-center align-items-baseline border-bottom @if($has_otas) px-3 @endif" @if($has_otas) style="border-bottom: 1.5px solid #acb6c1 !important;" @endif>
                    <div class="pt-1 @if(!$has_otas) text-center @endif col-11">
                        <h4 class="modal_title @if($has_otas) text-uppercase pb-2 @endif" @if($has_otas) style="font-weight: 800; color: #0d6889; font-size: 1.95rem;" @endif></h4>
                        @if(!$has_otas)
                            <h6 class="modal_subtitle"></h6>
                        @endif
                    </div>
                    <div class="pt-1 text-center col-1">
                        @if ($has_otas)
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="float: none">
                                <span>
                                    <img src="{{ asset('icons/close_modal.svg') }}" aria-hidden="true"
                                        style="width: 2rem;">
                                </span>
                            </button>
                        @else
                            <button type="button" class="mt-0 close" data-dismiss="modal" style="float: none; font-size: 2.3rem;">&times;</button>
                        @endif
                    </div>
                </section>

                {{-- Form --}}
                <form method="post" id="sample_form" class="pt-3 form-horizontal" enctype="multipart/form-data" autocomplete="off">
                    @csrf

                    {{-- Basic Data --}}
                    <section class="px-0 mb-3 row justify-content-center align-items-baseline col-12">
                        {{-- Nombre --}}
                        <div class="row justify-content-center align-items-baseline form-group col-12">
                            <label for="num_room" class="text-center control-label col-3">
                                {{ __('entity_fields')['common']['name'] }}
                            </label>
                            <div class="col-9">
                                <input required type="text" name="num_room" id="num_room" class="form-control form-control-harsi"
                                    placeholder="{{ __('entity_forms')['room']['name'] }}" />
                            </div>
                        </div>

                        {{-- Estado --}}
                        <div class="row justify-content-center align-items-baseline form-group col-6">
                            <label for="room_status" class="text-center control-label col-4" >
                                {{ __('entity_fields')['common']['status'] }}
                            </label>
                            <div class="col-8">
                                <select required id="room_status" name="room_status" class="form-control form-control-harsi">
                                    <option value="Disponible">
                                        {{ __('neutral_words')['available'] }}
                                    </option>
                                    <option title="{{ __('entity_forms')['room']['deactivated_title'] }}" value="Desactivada">
                                        {{ __('neutral_words')['deactivated'] }}
                                    </option>
                                    <option title="{{ __('entity_forms')['room']['blocked_title'] }}" value="Bloqueada">
                                        {{ __('neutral_words')['blocked'] }}
                                    </option>
                                </select>
                            </div>
                        </div>

                        {{-- Piso --}}
                        <div class="row justify-content-center align-items-baseline form-group col-6">
                            <label for="room_floor" class="text-center control-label col-4" >
                                {{ __('entity_fields')['room']['floor'] }}
                            </label>
                            <div class="col-8">
                                <select id="room_floor" name="room_floor" class="form-control form-control-harsi" required>
                                    <option value="" selected disabled>0</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                </select>
                            </div>
                        </div>

                        {{-- Tipo --}}
                        <div class="row justify-content-center align-items-baseline form-group col-6">
                            <label for="room_type_id" class="text-center control-label col-4">
                                {{ __('entity_forms')['room']['room_type'] }}
                            </label>
                            <div class="col-8">
                                <select required id="room_type_id" name="room_type_id" class="form-control form-control-harsi">
                                    <option value="" selected disabled>-- {{ __('common_actions')['select'] }} --</option>
                                    @foreach($roomTypes as $ty)
                                        <option value="{{ $ty->id }}">{{ $ty->tr_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- Grupo --}}
                        <div class="row justify-content-center align-items-baseline form-group col-6">
                            <label for="room_group_id" class="text-center control-label col-4" >
                                {{ __('entity_forms')['room']['room_group'] }}
                            </label>
                            <div class="col-8">
                                <select required id="room_group_id" name="room_group_id" class="form-control form-control-harsi">
                                    <option value="" selected disabled>-- {{ __('common_actions')['select'] }} --</option>
                                    @foreach($roomGroups as $groom)
                                        <option value="{{ $groom->id }}">{{ $groom->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </section>

                    {{-- Prices --}}
                    <section class="px-0 mb-3 row justify-content-center align-items-baseline" id="periods_tariffs">

                        {{-- Tarifas & Disponibilidad OTAs --}}
                        <section class="px-0 col-5"
                            style="transform: scale(0.95); transform-origin: top left; width: 100%;"
                        >

                            {{-- Tarifas --}}
                            <div class="mb-4 justify-content-center align-items-baseline">
                                {{-- Title - Switch --}}
                                <div class="px-2 mb-1 d-flex align-items-center justify-content-between">
                                    <h3 class="mb-0 title_form">{{ __('entity_forms')['room']['rates'] }}</h3>

                                    <div class="d-flex align-items-center">
                                        <label for="using_default_prices" class="mb-0 mr-2 switch switch_label">
                                            <input type="checkbox"
                                                onchange="editTariffs(this.checked)"
                                                id="using_default_prices" name="using_default_prices">
                                            <span class="specific_slider slider round"></span>
                                        </label>

                                        <p class="pt-1 mb-0 subtitle_form">{{ __('entity_forms')['room']['customize'] }} *</p>
                                    </div>
                                </div>

                                {{-- Additional Charges --}}
                                @if ($has_additional_pax_charge || $has_express_reservations)
                                    <div>

                                        {{-- Additional PAX Charge --}}
                                        @if ($has_express_reservations)
                                            <div class="pt-2 ml-1 input-group w-85">
                                                <label for="additional_pax_charge" class="text-center input-group-text control-label">
                                                    {{ __('entity_fields')['room_type']['additional_pax_charge'] }}
                                                </label>

                                                <input type="number" id="additional_pax_charge" name="additional_pax_charge" required readonly
                                                    class="form-control" step="0.01" value="0.00" placeholder="0.00"
                                                    onchange="formatDecimal(this);"
                                                />
                                            </div>
                                        @endif

                                        {{-- Express Checkout Penalty --}}
                                        @if ($has_express_reservations)
                                            <div class="pt-2 ml-1 input-group w-85" id="express_checkout_penalty_block">
                                                <label for="express_checkout_penalty" class="text-center input-group-text control-label">
                                                    {{ __('entity_fields')['room_type']['express_checkout_penalty'] }}
                                                </label>

                                                <input type="number" id="express_checkout_penalty" name="express_checkout_penalty" required readonly
                                                    class="form-control" step="0.01" value="0.00" placeholder="0.00"
                                                    onchange="formatDecimal(this);"
                                                />
                                            </div>
                                        @endif

                                    </div>
                                @endif


                                {{-- Breakdown --}}
                                <div id="tariffs" class="pt-2 pr-2"
                                    @if($has_otas)
                                        style="max-height: 12rem; overflow-y: auto;"
                                    @else
                                        style="max-height: 28rem; overflow-y: auto;"
                                    @endif
                                ></div>

                            </div>

                            {{-- Disponibilidad OTAs --}}
                            @if($has_otas)
                                <div id="otas_availability">
                                    <p class="pl-2 harsi-color"><b>{{ __('entity_forms')['otas_connection']['room_addon']['available_on_otas'] }}</b></p>

                                    {{-- Status Channels Connection --}}
                                    <div class="pl-2 row" style="max-height: 11.5rem; overflow-y: auto;">
                                        @forelse ($activated_otas as $ota)
                                            <div class="mb-2 shadow-sm input-group col-8">
                                                <div class="input-group-prepend">
                                                    <div class="input-group-text bold-label">{{ $ota->name }}</div>
                                                </div>
                                                <select
                                                    id="available_room_on_{{ $ota->sample_name }}"
                                                    name="available_room_on_{{ $ota->sample_name }}"
                                                    class="form-control"
                                                >
                                                    <option value="0" selected>{{ __('neutral_words')['No'] }}</option>
                                                    <option value="1">{{ __('neutral_words')['yes'] }}</option>
                                                </select>
                                            </div>
                                        @empty
                                            <i class="pt-0 mt-0">{{ __('entity_forms')['otas_connection']['common']['no_active_channels'] }}...</i>
                                        @endforelse

                                    </div>
                                </div>
                            @endif

                        </section>

                        {{-- Periodos --}}
                        <section class="px-0 justify-content-center align-items-baseline col-7 border-left"
                            style="transform: scale(0.95); transform-origin: top left; width: 100%;"
                        >

                            {{-- Title - Switch --}}
                            <div class="px-4 mb-1 d-flex align-items-center justify-content-between">
                                <h3 class="mb-0 title_form">{{ __('entity_forms')['room']['seasons'] }}</h3>

                                <div class="d-flex align-items-center">
                                    <label for="using_default_periods" class="mb-0 mr-2 switch switch_label">
                                        <input type="checkbox"
                                            onchange="editSeasons(this.checked)"
                                            id="using_default_periods" name="using_default_periods">
                                        <span class="specific_slider slider round"></span>
                                    </label>

                                    <p class="pt-1 mb-0 subtitle_form">{{ __('entity_forms')['room']['customize'] }} *</p>
                                </div>
                            </div>

                            {{-- Breakdown --}}
                            <div id="periods" class="pt-2 pl-4"
                                style="max-height: 28rem; overflow-y: auto;"
                            ></div>

                        </section>

                    </section>

                    {{-- Buttons --}}
                    <br>
                    <div class="form-group" align="center">
                        <input type="hidden" name="action" id="action" />
                        <input type="hidden" name="hidden_id" id="hidden_id" />
                        <input type="submit" name="action_button" id="action_button" class="py-1 col-3 btn boton"
                            value="{{ __('common_actions')['add'] }}" />
                    </div>

                </form>

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

{{-- Scripts --}}
@include('hotel.rooms.components.room-form-scripts')