{{-- Styles --}}
<style>
  /* Decorators */
    .border-title {
        border-bottom: 1.5px solid #acb6c1 !important;
    }

  /* Text */
    .title_form{
        color: #0d6889 !important;
        text-transform: uppercase !important;
        font-size: 1.3rem !important;
        font-weight: 600 !important;
        padding-top: 0.35rem;
    }

    .fw-semi-bold {
        font-weight: 600;
    }
</style>

{{-- Form Modal --}}
<div id="formModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body special-modal-body">

                {{-- Title --}}
                <div
                    class="px-2 row justify-content-center align-items-baseline border-bottom border-title"
                >
                    {{-- Text --}}
                    <div class="pt-1 col-11">
                        <h4 class="modal_title text-uppercase harsi-color font-weight-bolder"></h4>
                        <h6 class="modal_subtitle text-uppercase text-muted"></h6>
                    </div>

                    {{-- Buttons --}}
                    <div class="px-3 pt-1 text-center col-1">
                        <button type="button" class="mt-0 close" data-dismiss="modal"
                            style="float: none; font-size: 2.3rem;">&times;</button>
                    </div>
                </div>

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

                    {{-- Common Fields --}}
                    <section class="px-1 mb-3">

                        {{-- Nombre --}}
                        <div class="mb-3 input-group w-100">
                            <label for="s_name" class="text-center input-group-text control-label">
                                {{ __('entity_fields')['common']['name'] }}
                            </label>

                            <input  type="text" name="s_name" id="s_name" required
                                class="form-control" max="150" min="1"
                                placeholder="{{ __('entity_forms')['season']['name'] }}"
                            />
                        </div>

                        {{-- Is Cycled Season --}}
                        <div class="mb-3 ml-2 input-group form-check">
                            <input type="checkbox" name="is_cyclic" id="is_cyclic"
                                class="pt-1 form-check-input" onchange="setAsCyclic({mutate_periods: true})">
                            <label class="pt-0 form-check-label switch_label fw-semi-bold" for="is_cyclic">
                                {{ __('entity_forms')['season']['is_cyclic'] }}
                            </label>
                        </div>

                        {{-- Cycle Type --}}
                        <div class="pl-4 mb-3 input-group w-100" id="cycle_type_block" style="display:none">
                            <label for="cycle_type" class="text-center input-group-text control-label">
                                {{ __('entity_fields')['season']['cycle_type'] }}
                            </label>

                            <select id="cycle_type" name="cycle_type" required
                                class="form-control" onchange="resetPeriods()"
                            >
                                @foreach ($cycle_types as $types)
                                    <option value="{{ $types->value }}">
                                        {{ $types->label() }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                    </section>

                    {{-- Periods Section --}}
                    <section class="px-2 mb-2 d-flex justify-content-start align-items-center">

                        {{-- Title --}}
                        <h3 class="mr-2 title_form">
                            {{ __('entity_fields')['season']['periods'] }}
                        </h3>

                        {{-- Add Period Button --}}
                        <button type="button" id="add_period"
                            onclick="addPeriodRow()"
                            class="py-0 btn-harsi btn"
                        >✚</button>

                    </section>

                    {{-- Dynamic Periods --}}
                    <div id="periods" class="px-2 pb-2 mb-3"
                        style="max-height: 18.5rem; overflow-y: auto;"
                    ></div>

                    {{-- Buttons --}}
                    <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 btn boton" value="{{ __('common_actions')['add'] }}" />
                    </div>

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

{{-- Scripts --}}
@include('hotel.seasons.components.season-form-scripts')