{% extends 'Shop/base.html.twig' %}

{% block title %}
	{{ 'app.shop_owner.pages.ordering_hours.title'|trans }}
{% endblock %}

{% block toolbar_actions %}
    <div>
        <a type="button" id="notice"
            data-bs-toggle="modal" data-bs-target="#foxorders_modal_form_shop"
            class="btn btn-sm fw-bold btn-primary notice">
            {{ 'app.shop_owner.pages.notice.title.closing'|trans }}
        </a>
    </div>
{% endblock %}

{% block component_body %}
    <div class="card card-flush">
        <div class="card-body">
            <h2>{{ 'app.shop_owner.pages.ordering_hours.title'|trans }}</h2>
            <div class="d-flex flex-wrap flex-stack gap-5 gap-lg-10">
                {% if [] == openingHours %}
                    <div class="d-flex flex-column mt-5">
                        <div class="alert alert-warning d-flex align-items-center px-2 py-1 mt-2">
                            <i class="ki-duotone ki-shield-tick fs-2hx text-warning me-4"><span class="fa-solid fa-triangle-exclamation"></span></i>
                            <div class="d-flex flex-column">
                                <span>{{ 'app.shop_owner.pages.ordering_hours.warning'|trans|raw }}</span>
                            </div>
                        </div>
                    </div>
                {% else %}
                    <div class="spinner-border text-primary" role="status" id="overlay-spinner-div" style="width: 4rem; height: 4rem;">
                        <span class="sr-only">Loading...</span>
                    </div>
                    <div class="d-flex flex-column">
                        {% include "Shop/Timetable_commons/form.html.twig" with {'path': 'foxorders_shop_ordering_hours_index'} %}
                        {% include "Shop/Ordering_hours/legend_shopMode_color.html.twig" %}
                        {% include "Shop/Opening_hours/summary_block.html.twig" %}
                        <div class="table-responsive div-time-table-scroll position-relative">
                            <table class="table-time">
                                {% include "Shop/Timetable_commons/hour_title.html.twig" %}
                                {% include "Shop/Ordering_hours/Day_detail/day_detail.html.twig" %}
                            </table>
                        </div>
                    </div>
                {% endif %}
            </div>
		</div>
	</div>
{% endblock %}

{% block modals %}
    {% include 'Modal/form.html.twig' with {
        'title': 'app.shop_owner.pages.ordering_hours.new.title'|trans,
        'id': 'shop',
    } %}
{% endblock %}

{% block javascripts %}
    <script type="text/javascript">
        var shop = "{{ shop.id }}";
        var isPickupMode = "{{ isPickupMode }}";
        var orderingHoursDelivery = "{{ orderingHoursDelivery|json_encode() }}";
        var orderingHoursOnSite = "{{ orderingHoursOnSite|json_encode() }}";
        var orderingHoursTakeOut = "{{ orderingHoursTakeOut|json_encode() }}";
        var pickupHours = "{{ pickupHours|json_encode() }}";
        var orderIntervals = "{{ orderIntervals|json_encode() }}";
        var ohListWithErrors = "{{ ohListWithErrors }}";
        var input = '#ordering_hours_day';
        var mode = 'ordering';
        var noticeType = "{{ noticeType }}";
        var notice = "{{ notice.id ?? '' }}";
        var firstRange = "{{ firstRange }}";
        var lastRange = "{{ lastRange }}";
        var translations = {
            'modes': {
                'pickup': '{{ 'app.global.tabs.mode.legends.pickup' | trans }}',
                'take_out': '{{ 'app.global.tabs.mode.legends.take-out' | trans }}',
                'delivery': '{{ 'app.global.tabs.mode.legends.delivery' | trans }}',
                'on_site': '{{ 'app.global.tabs.mode.legends.on-site' | trans }}',
                'opening': '{{ 'app.global.tabs.mode.legends.opening' | trans }}',
            },
            'validation': {
                'day': '{{ 'app.global.validation.ordering_hours.day' | trans }}',
            },
            "modal": {
                'notice': '{{ 'app.shop_owner.pages.ordering_hours.notice.title'|trans }}',
            }
        };
	</script>
    <script src="{{ asset('foxorders/js/ajax/toggle-status.js') }}"></script>
    <script src="{{ asset('foxorders/js/shop/notice.js') }}"></script>
    <script src="{{ asset('foxorders/js/shop/time-table-params.js') }}"></script>
    <script src="{{ asset('foxorders/js/shop/time-table.js') }}"></script>
    <script src="{{ asset('foxorders/js/validation/rules/shop/ordering-hours.js') }}"></script
{% endblock %}