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

{% block title %}
    {{ 'app.shop_owner.pages.closing_days.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>
        <a class="btn btn-sm fw-bold btn-primary new-entity" data-bs-toggle="modal" data-bs-target="#foxorders_modal_form_shop">
            {{ 'app.global.buttons.add'|trans }}
        </a>
    </div>
{% endblock %}

{% block component_body %}
    <div class="card card-flush">
        <div class="card-body pt-0">
            <div class="table-responsive">
                <table class="table table-row-bordered table-row-dashed gy-4 align-middle fw-bold">
                    <thead class="fs-7 text-gray-400 text-uppercase">
                        <tr>
                            <th class="ps-4 rounded-start">{{ 'app.global.fields.status'|trans }}</th>
                            <th class="ps-4 min-w-100px text-center">{{ 'app.global.fields.start'|trans }}</th>
                            <th class="ps-4 min-w-100px text-center">{{ 'app.global.fields.end'|trans }}</th>
                            <th class="ps-4 text-end">{{ 'app.global.fields.actions'|trans }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for closingDay in closingDays %}
                            <tr>
                                <td>
                                    <label class="form-check form-switch form-check-custom form-check-solid">
                                        <input class="form-check-input toggleStatus"
                                            data-entity-id="{{ closingDay.id }}"
                                            data-route="foxorders_shop_closing_days_enable"
                                            type="checkbox" {% if closingDay.enabled %} checked="checked" {% endif %}
                                            value="1">
                                    </label>
                                </td>
                                <td class="text-center">
                                    <span class="text-dark fw-bolder text-hover-primary d-block fs-6">{{ closingDay.startingDate|date('Y/m/d') }}</span>
                                </td>
                                <td class="text-center">
                                    <span class="text-dark fw-bolder text-hover-primary d-block fs-6">{{ closingDay.endingDate|date('Y/m/d') }}</span>
                                </td>
                                <td class="text-end">
                                    <div class="d-flex justify-content-end flex-shrink-0">
                                        {{ link('edit','modal', 'success', {'entity-id' : closingDay.id, 'modalId': 'foxorders_modal_form_shop' }) }}
                                        {% include 'Includes/Shop/delete.html.twig' with {
                                            'route':path('foxorders_shop_closing_days_delete', {'id': closingDay.id}) ,
                                            'token': csrf_token('delete' ~ closingDay.id),
                                            'button': 'list_delete'} %}
                                    </div>
                                </td>
                            </tr>
                        {% else %}
                            <tr>
                                <td colspan="3" style='color:orange'>{{ 'app.global.detail.no_record_found'|trans }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% include 'List/pagination.html.twig' with { 'data' : closingDays } %}
        </div>
    </div>
{% endblock %}

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

{% block javascripts %}
    <script type="text/javascript">
        var shop = "{{ shop.id }}";
        var noticeType = "{{ noticeType }}";
        var notice = "{{ notice.id ?? '' }}";
        var translations = {
            'startingDate': '{{ 'app.global.validation.starting_date' | trans }}',
            'endingDate': '{{ 'app.global.validation.ending_date' | trans }}',
            'greaterThan': '{{ 'app.global.validation.greater_than.starting_date' | trans }}',
            "modal": {
                'add': '{{ 'app.shop_owner.pages.closing_days.new.title'|trans }}',
                'edit': '{{ 'app.shop_owner.pages.closing_days.edit.title'|trans }}',
                'notice': '{{ 'app.shop_owner.pages.closing_days.notice.title'|trans }}',
            }
        }
    </script>
    <script src="{{ asset('foxorders/js/shop/closing-days.js') }}"></script>
    <script src="{{ asset('foxorders/js/shop/notice.js') }}"></script>
    <script src="{{ asset('foxorders/js/ajax/toggle-status.js') }}"></script>
    <script src="{{ asset('foxorders/js/validation/rules/shop/closing-days.js') }}"></script>
{% endblock %}