<div class="panel panel-default m-t-lg">
    <div class="panel-heading">
        <span class="font-sbold" translate>{{ 'app.admin.settings.reservations_parameters' }}</span>
    </div>
    <div class="panel-body">
        <div>
            <div class="row">
                <h3 class="m-l" translate>{{ 'app.admin.settings.confine_the_booking_agenda' }}</h3>
                <div class="col-md-2">
                    <h4 translate>{{ 'app.admin.settings.opening_time' }}</h4>
                    <uib-timepicker ng-model="windowStart.value" hour-step="timepicker.hstep" minute-step="timepicker.mstep" show-meridian="false"></uib-timepicker>
                </div>
                <div class="col-md-4 m-t">
                    <button name="button" class="btn btn-warning m-l" ng-click="save(windowStart)" translate>{{ 'app.shared.buttons.save' }}</button>
                </div>
                <div class="col-md-2">
                    <h4 translate>{{ 'app.admin.settings.closing_time' }}</h4>
                    <uib-timepicker ng-model="windowEnd.value" hour-step="timepicker.hstep" minute-step="timepicker.mstep" show-meridian="false"></uib-timepicker>
                </div>
                <div class="col-md-4 m-t">
                    <button name="button" class="btn btn-warning m-l" ng-click="save(windowEnd)" translate>{{ 'app.shared.buttons.save' }}</button>
                </div>
            </div>
            <div class="section-separator"></div>
            <div class="row">
                <h3 class="m-l m-t-lg" translate>{{ 'app.admin.settings.max_visibility' }}</h3>
                <number-setting name="visibility_yearly"
                                settings="allSettings"
                                label="app.admin.settings.visibility_for_yearly_members"
                                classes="col-md-4"
                                fa-icon="fa-calendar"
                                min="1"
                                required="true">
                </number-setting>
                <number-setting name="visibility_others"
                                settings="allSettings"
                                label="app.admin.settings.visibility_for_other_members"
                                classes="col-md-4 col-md-offset-2"
                                fa-icon="fa-calendar"
                                min="1"
                                required="true">
                </number-setting>
            </div>
            <div class="section-separator"></div>
            <div class="row">
                <h3 class="m-l m-t-lg" translate>{{ 'app.admin.settings.ability_for_the_users_to_move_their_reservations' }}</h3>
                <div class="col-md-6">
                    <boolean-setting name="'booking_move_enable'"
                                     label="'app.admin.settings.reservations_shifting' | translate"
                                     on-success="onSuccess"
                                     on-error="onError">
                    </boolean-setting>
                </div>
                <div class="col-md-6" ng-show="allSettings.booking_move_enable === 'true'">
                    <number-setting name="booking_move_delay"
                                    settings="allSettings"
                                    label="app.admin.settings.prior_period_hours"
                                    classes="col-md-8"
                                    fa-icon="fas fa-clock"
                                    min="0"
                                    required="allSettings.booking_move_enable === 'true'">
                    </number-setting>
                </div>
            </div>
            <div class="row">
                <h3 class="m-l m-t-lg" translate>{{ 'app.admin.settings.ability_for_the_users_to_cancel_their_reservations' }}</h3>
                <div class="col-md-6">
                    <boolean-setting name="'booking_cancel_enable'"
                                     label="'app.admin.settings.reservations_cancelling' | translate"
                                     on-success="onSuccess"
                                     on-error="onError">
                    </boolean-setting>
                </div>
                <div class="col-md-6" ng-show="allSettings.booking_cancel_enable === 'true'">
                    <number-setting name="booking_cancel_delay"
                                    settings="allSettings"
                                    label="app.admin.settings.prior_period_hours"
                                    classes="col-md-8"
                                    fa-icon="fas fa-clock"
                                    min="0"
                                    required="allSettings.booking_cancel_enable === 'true'">
                    </number-setting>
                </div>
            </div>
            <div class="section-separator"></div>
            <div class="row">
                <h3 class="m-l m-t-lg" translate>{{ 'app.admin.settings.book_overlapping_slots_info' }}</h3>
                <div class="col-md-6">
                    <boolean-setting name="'book_overlapping_slots'"
                                     label="'app.admin.settings.allow_booking' | translate"
                                     on-success="onSuccess"
                                     on-error="onError">
                    </boolean-setting>
                    <div class="alert alert-warning" ng-show="allSettings.book_overlapping_slots !== 'true'" translate>
                        {{ 'app.admin.settings.overlapping_categories_info' }}
                    </div>
                </div>
                <div class="col-md-6" ng-show="allSettings.book_overlapping_slots !== 'true'">
                    <check-list-setting name="'overlapping_categories'"
                                        label="'app.admin.settings.overlapping_categories' | translate"
                                        available-options="availableOverlappingOptions"
                                        on-success="onSuccess"
                                        on-error="onError">
                    </check-list-setting>
                </div>
            </div>
            <div class="section-separator"></div>
            <div class="row">
                <h3 class="m-l m-t-lg" translate>{{ 'app.admin.settings.reservation_deadline' }}</h3>
                <p class="alert alert-warning m-h-md" translate>{{ 'app.admin.settings.reservation_deadline_help' }}</p>
                <number-setting name="machine_reservation_deadline"
                                settings="allSettings"
                                label="app.admin.settings.machine_deadline_minutes"
                                classes="col-md-4"
                                fa-icon="fas fa-clock"
                                min="0"
                                required="true">
                </number-setting>
                <number-setting name="training_reservation_deadline"
                                settings="allSettings"
                                label="app.admin.settings.training_deadline_minutes"
                                classes="col-md-4"
                                fa-icon="fas fa-clock"
                                min="0"
                                required="true">
                </number-setting>
                <number-setting name="event_reservation_deadline"
                                settings="allSettings"
                                label="app.admin.settings.event_deadline_minutes"
                                classes="col-md-4"
                                fa-icon="fas fa-clock"
                                min="0"
                                required="true">
                </number-setting>
                <number-setting name="space_reservation_deadline"
                                settings="allSettings"
                                label="app.admin.settings.space_deadline_minutes"
                                classes="col-md-4"
                                fa-icon="fas fa-clock"
                                min="0"
                                required="true">
                </number-setting>
            </div>
            <div class="section-separator"></div>
            <div class="row">
                <h3 class="m-l m-t-lg" translate>{{ 'app.admin.settings.default_slot_duration' }}</h3>
                <p class="alert alert-warning m-h-md" translate>{{ 'app.admin.settings.default_slot_duration_info' }}</p>
                <number-setting name="slot_duration"
                                settings="allSettings"
                                label="app.admin.settings.duration_minutes"
                                classes="col-md-4"
                                fa-icon="fas fa-clock"
                                min="1"
                                required="true">
                </number-setting>
            </div>

            <div class="section-separator"></div>
            <div class="row">
                <h3 class="m-l" translate>{{ 'app.admin.settings.pack_only_for_subscription_info' }}</h3>
                <p class="alert alert-warning m-h-md" ng-bind-html="'app.admin.settings.pack_only_for_subscription_info_html' | translate"></p>
                <boolean-setting name="'pack_only_for_subscription'"
                                 label="'app.admin.settings.pack_only_for_subscription' | translate"
                                 class-name="'m-l'"
                                 on-success="onSuccess"
                                 on-error="onError">
                </boolean-setting>
            </div>

            <div class="section-separator"></div>
            <div class="row">
                <h3 class="m-l" translate>{{ 'app.admin.settings.extended_prices' }}</h3>
                <p class="alert alert-warning m-h-md" ng-bind-html="'app.admin.settings.extended_prices_info_html' | translate"></p>
                <boolean-setting name="'extended_prices_in_same_day'"
                                 label="'app.admin.settings.extended_prices_in_same_day' | translate"
                                 class-name="'m-l'"
                                 on-success="onSuccess"
                                 on-error="onError">
                </boolean-setting>
            </div>
        </div>
    </div>
</div>

<div class="panel panel-default m-t-lg">
    <div class="panel-heading">
        <span class="font-sbold" translate>{{ 'app.admin.settings.reservations_reminders' }}</span>
    </div>
    <div class="panel-body">
        <div class="row">
            <h3 class="m-l" translate>{{ 'app.admin.settings.notification_sending_before_the_reservation_occurs' }}</h3>
            <boolean-setting name="'reminder_enable'"
                             label="'app.admin.settings.reservations_reminders' | translate"
                             class-name="'m-l'"
                             on-success="onSuccess"
                             on-error="onError">
            </boolean-setting>
        </div>
        <div class="row" ng-show="allSettings.reminder_enable === 'true'">
            <number-setting name="reminder_delay"
                            settings="allSettings"
                            label="app.admin.settings.prior_period_hours"
                            classes="col-md-4"
                            fa-icon="fas fa-clock"
                            helper-text="app.admin.settings.default_value_is_24_hours"
                            min="0">
            </number-setting>
        </div>
    </div>
</div>


<div class="panel panel-default m-t-lg">
    <div class="panel-heading">
        <span class="font-sbold" translate>{{ 'app.admin.settings.display' }}</span>
    </div>
    <div class="panel-body">
        <div class="row" ng-show="$root.modules.machines">
            <h3 class="m-l" translate>{{ 'app.admin.settings.display_reservation_user_name' }}</h3>
            <p class="alert alert-warning m-h-md" ng-bind-html="'app.admin.settings.display_name_info_html' | translate"></p>
            <boolean-setting name="'display_name_enable'"
                             label="'app.admin.settings.display_name' | translate"
                             class-name="'m-l'"
                             on-success="onSuccess"
                             on-error="onError">
            </boolean-setting>
        </div>
      <div class="row">
        <h3 class="m-l" translate>{{ 'app.admin.settings.events_in_the_calendar' }}</h3>
        <p class="alert alert-warning m-h-md" translate>{{ 'app.admin.settings.events_in_calendar_info' }}</p>
        <boolean-setting name="'events_in_calendar'"
                         label="'app.admin.settings.show_event' | translate"
                         on-success="onSuccess"
                         on-error="onError"
                         class-name="'m-l'"></boolean-setting>
      </div>

      <div class="section-separator"></div>
      <div class="row">
          <h3 class="m-l" translate>{{ 'app.admin.settings.display_invite_to_renew_pack' }}</h3>
          <p class="alert alert-warning m-h-md" ng-bind-html="'app.admin.settings.packs_threshold_info_html' | translate"></p>
        <number-setting name="renew_pack_threshold"
                        settings="allSettings"
                        label="app.admin.settings.renew_pack_threshold"
                        classes="col-md-4"
                        fa-icon="fa-sliders-h"
                        min="0"
                        step="0.01">
        </number-setting>
      </div>
    </div>
</div>

<div class="panel panel-default m-t-lg">
    <div class="panel-heading">
        <span class="font-sbold" translate>{{ 'app.admin.settings.reservation_context_feature_title' }}</span>
    </div>
    <div class="panel-body">
        <div class="row">
            <p class="alert alert-warning m-h-md" ng-bind-html="'app.admin.settings.reservation_context_feature_info' | translate"></p>
            <boolean-setting name="'reservation_context_feature'"
                             label="'app.admin.settings.reservation_context_feature' | translate"
                             class-name="'m-l'"
                             on-success="onSuccess"
                             on-error="onError"
                             on-change="onReservationContextFeatureChange">
            </boolean-setting>
        </div>
        <div class="row p-l p-r" ng-if="reservationContextFeature.value === 'true'">
            <h3 class="" translate>{{ 'app.admin.settings.reservation_context_options' }}</h3>

            <button type="button" class="btn btn-warning m-b m-t" ng-click="addReservationContext()" translate>{{ 'app.admin.settings.add_a_reservation_context' }}</button>
            <table class="table">
                <thead>
                <tr>
                    <th style="width:40%" translate>{{ 'app.admin.reservation_contexts.name' }}</th>
                    <th style="width:40%" translate>{{ 'app.admin.reservation_contexts.applicable_on' }}</th>
                    <th style="width:20%"></th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="reservationContext in reservationContexts">
                    <td>
                        <span editable-text="reservationContext.name" e-cols="100" e-name="name" e-form="rowform" e-required>
                        {{ reservationContext.name }}
                        </span>
                    </td>
                    <td>
                        <div editable-ui-select="reservationContext.applicable_on" e-multiple e-form="rowform" e-name="applicable_on" e-ng-model="reservationContext.applicable_on" e-style="min-width: 200px">
                            {{ translateApplicableOnValue(reservationContext.applicable_on) }}
                            <editable-ui-select-match placeholder="">
                                {{ translateApplicableOnValue($item) }}
                            </editable-ui-select-match>
                            <editable-ui-select-choices repeat="ao in reservationContextApplicableOnValues | filter: $select.search track by $index">
                                {{ translateApplicableOnValue(ao) }}
                            </editable-ui-select-choices>
                        </div>
                    </td>
                    <td>
                    <!-- form -->
                    <form editable-form name="rowform" onbeforesave="saveReservationContext($data, reservationContext.id)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="newReservationContext == reservationContext">
                        <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-warning">
                        <i class="fa fa-check"></i>
                        </button>
                        <button type="button" ng-disabled="rowform.$waiting" ng-click="cancelReservationContext(rowform, $index)" class="btn btn-default">
                        <i class="fa fa-times"></i>
                        </button>
                    </form>
                    <div class="buttons" ng-show="!rowform.$visible">
                        <button class="btn btn-default" ng-click="rowform.$show()">
                        <i class="fa fa-edit"></i> <span class="hidden-xs hidden-sm" translate>{{ 'app.shared.buttons.edit' }}</span>
                        </button>
                        <button class="btn btn-danger" ng-click="removeReservationContext($index)">
                        <i class="fa fa-trash-o"></i>
                        </button>
                    </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
