{# load scripts and styles via CDN #}
{% if oViewConf.getActiveClassName() != "order" %}
    {% block checkout_delivery_date_picker_scripts %}
        {% set iso_lang = oView.getActiveLangAbbr() %}

        {% if "c4s" in oViewConf.getActiveTheme() and not oViewConf.getViewThemeParam("blUseCDN") %}
            {{ script({ include: "libs/vanillajs-datepicker/js/datepicker-full.min.js", priority: 15, dynamic: __oxid_include_dynamic }) }}
            {% if iso_lang %}
                {{ script({ include: "libs/vanillajs-datepicker/js/i18n/" ~ iso_lang ~ ".min.js", priority: 15, dynamic: __oxid_include_dynamic }) }}
            {% endif %}
        {% else %}
            {{ script({ include: "https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/js/datepicker-full.min.js", priority: 15, dynamic: __oxid_include_dynamic }) }}
            {% if iso_lang %}
                {% if iso_lang == "en" %}{% set iso_lang = "en-GB" %}{% endif %}
                {{ script({ include: "https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/js/locales/" ~ iso_lang ~ ".min.js", priority: 15, dynamic: __oxid_include_dynamic }) }}
            {% endif %}
        {% endif %}
        {{ script({ include: oViewConf.getVersionedModuleUrl("c4s_basket_extension", "out/src/js/c4s_basket_extension_datepicker.js"), priority: 16, dynamic: __oxid_include_dynamic }) }}
    {% endblock %}

    {% block checkout_delivery_date_picker_styles %}
        {% if "c4s" in oViewConf.getActiveTheme() and not oViewConf.getViewThemeParam("blUseCDN") %}
            {{ style({ include: "libs/vanillajs-datepicker/css/datepicker.min.css" }) }}
            {{ style({ include: "libs/vanillajs-datepicker/css/datepicker-bs5.min.css" }) }}
        {% else %}
            {{ style({ include: "https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/css/datepicker.min.css" }) }}
            {{ style({ include: "https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/css/datepicker-bs5.min.css" }) }}
        {% endif %}
    {% endblock %}
{% endif %}

{% if oxcmp_basket.getCustomFieldSetEntry("sRequestedDeliveryDate") != '' %}
    {% set sRequestedDeliveryDate = oxcmp_basket.getCustomFieldSetEntry("sRequestedDeliveryDate") %}
{% endif %}

{# show datepicker #}
<form id="c4s-basket-additional-delivery-date-form" action="{{ oViewConf.getSslSelfLink()|raw }}" method="post">
    {{ oViewConf.getHiddenSid()|raw }}
    <input type="hidden" name="cl" value="{{ oViewConf.getTopActiveClassName() }}">
    <input type="hidden" name="fnc" value="setRequestedDeliveryDate">

    <div class="mb-3">
        {% if oViewConf.getActiveClassName() != "order" %}
            {% set blRequired = oViewConf.isFunctionalityEnabled("blC4SBasketExtensionRequestedDeliveryDateRequired") %}
            {% block checkout_basket_delivery_date_picker %}
                <label for="c4s-basket-requested-delivery-date" class="form-label small">{{ translate({ ident: "C4S_BASKET_EXTENSION_DESIRED_DELIVERYDATE" }) }}{% if blRequired %} *{% endif %}</label>
                <div class="input-group input-group-sm">
                    <input name="sRequestedDeliveryDate"
                           id="c4s-basket-requested-delivery-date"
                           class="form-control"
                           placeholder="{{ translate({ ident: "C4S_BASKET_EXTENSION_DESIRED_DELIVERYDATE_PLACEHOLDER" }) }}"
                           value="{{ sRequestedDeliveryDate|date_format("%d.%m.%Y") }}"
                           readonly
                           {% if blRequired %}required{% endif %}
                    >
                    <button id="c4s-basket-requested-delivery-date-button"
                            class="btn btn-outline-secondary"
                            type="button"
                    >
                        <i class="fa-solid fa-calendar"></i>
                    </button>
                    {% ifcontent ident "c4s_deliveryDatePopover" set oCont %}
                        <div class="input-group-text bg-light">
                            <i class="fa-solid fa-circle-info"
                               data-bs-toggle="tooltip"
                               data-bs-trigger="click hover"
                               data-bs-container="body"
                               data-bs-html="true"
                               title="{{ include(template_from_string(oCont.oxcontents__oxcontent.value)) }}">
                            </i>
                        </div>
                    {% endifcontent %}
                    <button class="btn btn-outline-secondary"
                            type="submit"
                            data-bs-toggle="tooltip"
                            data-bs-placement="top"
                            data-bs-container="body"
                            title="{{ translate({ ident: "SAVE" }) }}"
                    >
                        <i class="fa-solid fa-floppy-disk"></i>
                    </button>
                </div>
            {% endblock %}
        {% else %}
            {% block checkout_order_delivery_date_picker %}
                <label for="c4s-basket-requested-delivery-date" class="form-label small">{{ translate({ ident: "C4S_BASKET_EXTENSION_DESIRED_DELIVERYDATE" }) }}</label>
                <div class="input-group input-group-sm">
                    <input name="sRequestedDeliveryDate"
                           id="c4s-basket-requested-delivery-date"
                           class="form-control"
                            {# placeholder="{{ translate({ ident: "C4S_BASKET_EXTENSION_DESIRED_DELIVERYDATE_PLACEHOLDER" }) }}" #}
                           value="{{ sRequestedDeliveryDate|date_format("%d.%m.%Y") }}"
                           readonly
                    >
                    <a class="btn btn-outline-secondary c4s-basket-change-btn"
                       href="{{ seo_url({ ident: oViewConf.getBasketLink()|raw }) }}"
                       data-bs-toggle="tooltip"
                       data-bs-placement="top"
                       data-bs-container="body"
                       title="{{ translate({ ident: "C4S_BASKET_EXTENSION_DESIRED_DELIVERYDATE_CHANGE_TOOLTIP" }) }}"
                    >
                        <i class="fa-solid fa-pen-to-square"></i>
                    </a>
                </div>
            {% endblock %}
        {% endif %}
    </div>
</form>

{# 
 Docs:
 https://mymth.github.io/vanillajs-datepicker/#/

 Configurator:
 http://raw.githack.com/mymth/vanillajs-datepicker/v1.2.0/demo/index.html

 Hint for "data-date-days-of-week-disabled":
 Alway an array, containing minimum 2 values. Example for disabling sundays: "0,0"
 #}