{% sw_extends '@Storefront/storefront/page/account/index.html.twig' %}

{% block page_account_overview_welcome %}
    <div class="account-welcome">
        {% set shopStudioPersonalizedCustomerGreetingCloudConfig = config('ShopStudioPersonalizedCustomerGreetingCloud.config') %}
        {% if shopStudioPersonalizedCustomerGreetingCloudConfig.staticGreetingEnabled and shopStudioPersonalizedCustomerGreetingCloudConfig.staticGreetingTranslationKey %}
            {% if shopStudioPersonalizedCustomerGreetingCloudConfig.staticGreetingByFirstNameEnabled %}
                <h1>{{ shopStudioPersonalizedCustomerGreetingCloudConfig.staticGreetingTranslationKey|trans({'%name%': context.customer.firstName})|sw_sanitize }}</h1>
            {% elseif shopStudioPersonalizedCustomerGreetingCloudConfig.staticGreetingByFirstNameAndLastNameEnabled %}
                <h1>{{ shopStudioPersonalizedCustomerGreetingCloudConfig.staticGreetingTranslationKey|trans({'%name%': context.customer.firstName ~ ' ' ~ context.customer.lastName})|sw_sanitize }}</h1>
            {% elseif context.customer.salutation.salutationKey != 'not_specified' %}
                <h1>{{ shopStudioPersonalizedCustomerGreetingCloudConfig.staticGreetingTranslationKey|trans({'%name%': context.customer.salutation.translated.displayName ~ ' ' ~ context.customer.lastName})|sw_sanitize }}</h1>
            {% else %}
                <h1>{{ "account.overviewTitle"|trans|sw_sanitize }}</h1>
            {% endif %}
        {% elseif shopStudioPersonalizedCustomerGreetingCloudConfig.greetingByTimeEnabled %}
            <script>
                function shopStudioPersonalizedCustomerGreetingCloudDocumentReady(fn) {
                    if (document.readyState === 'complete' || document.readyState === 'interactive') {
                        setTimeout(fn, 1);
                    } else {
                        document.addEventListener('DOMContentLoaded', fn);
                    }
                }

                shopStudioPersonalizedCustomerGreetingCloudDocumentReady(function () {
                    var date = new Date();
                    var time = date.getHours() + ':' + date.getMinutes();
                    var timeBoundaries = {
                        morningStart: "{{ shopStudioPersonalizedCustomerGreetingCloudConfig.greetingByTimeMorningStart|sw_sanitize }}",
                        morningEnd: "{{ shopStudioPersonalizedCustomerGreetingCloudConfig.greetingByTimeMorningEnd|sw_sanitize }}",
                        afternoonStart: "{{ shopStudioPersonalizedCustomerGreetingCloudConfig.greetingByTimeAfternoonStart|sw_sanitize }}",
                        afternoonEnd: "{{ shopStudioPersonalizedCustomerGreetingCloudConfig.greetingByTimeAfternoonEnd|sw_sanitize }}",
                        eveningStart: "{{ shopStudioPersonalizedCustomerGreetingCloudConfig.greetingByTimeEveningStart|sw_sanitize }}",
                        eveningEnd: "{{ shopStudioPersonalizedCustomerGreetingCloudConfig.greetingByTimeEveningEnd|sw_sanitize }}"
                    };

                    var selector = null;
                    if (time >= timeBoundaries.morningStart && time <= timeBoundaries.morningEnd) {
                        selector = '.shop-studio-personalized-customer-greeting-cloud-greeting-by-time-morning';
                    } else if (time >= timeBoundaries.afternoonStart && time <= timeBoundaries.afternoonEnd) {
                        selector = '.shop-studio-personalized-customer-greeting-cloud-greeting-by-time-afternoon';
                    } else if (time >= timeBoundaries.eveningStart && time <= timeBoundaries.eveningEnd) {
                        selector = '.shop-studio-personalized-customer-greeting-cloud-greeting-by-time-evening';
                    }

                    if (selector) {
                        document.querySelector(selector).removeAttribute('style');
                    }
                });
            </script>

            {% if shopStudioPersonalizedCustomerGreetingCloudConfig.greetingByTimeByFirstNameEnabled %}
                <h1 class="shop-studio-personalized-customer-greeting-cloud-greeting-by-time-morning" style="display: none;">{{ shopStudioPersonalizedCustomerGreetingCloudConfig.greetingByTimeMorningTranslationKey|trans({'%name%': context.customer.firstName})|sw_sanitize }}</h1>
            {% elseif shopStudioPersonalizedCustomerGreetingCloudConfig.greetingByTimeByFirstNameAndLastNameEnabled %}
                <h1 class="shop-studio-personalized-customer-greeting-cloud-greeting-by-time-morning" style="display: none;">{{ shopStudioPersonalizedCustomerGreetingCloudConfig.greetingByTimeMorningTranslationKey|trans({'%name%': context.customer.firstName ~ ' ' ~ context.customer.lastName})|sw_sanitize }}</h1>
            {% elseif context.customer.salutation.salutationKey != 'not_specified' %}
                <h1 class="shop-studio-personalized-customer-greeting-cloud-greeting-by-time-morning" style="display: none;">{{ shopStudioPersonalizedCustomerGreetingCloudConfig.greetingByTimeMorningTranslationKey|trans({'%name%': context.customer.salutation.translated.displayName ~ ' ' ~ context.customer.lastName})|sw_sanitize }}</h1>
            {% else %}
                <h1 class="shop-studio-personalized-customer-greeting-cloud-greeting-by-time-morning" style="display: none;">{{ "account.overviewTitle"|trans|sw_sanitize }}</h1>
            {% endif %}

            {% if shopStudioPersonalizedCustomerGreetingCloudConfig.greetingByTimeByFirstNameEnabled %}
                <h1 class="shop-studio-personalized-customer-greeting-cloud-greeting-by-time-afternoon" style="display: none;">{{ shopStudioPersonalizedCustomerGreetingCloudConfig.greetingByTimeAfternoonTranslationKey|trans({'%name%': context.customer.firstName})|sw_sanitize }}</h1>
            {% elseif shopStudioPersonalizedCustomerGreetingCloudConfig.greetingByTimeByFirstNameAndLastNameEnabled %}
                <h1 class="shop-studio-personalized-customer-greeting-cloud-greeting-by-time-afternoon" style="display: none;">{{ shopStudioPersonalizedCustomerGreetingCloudConfig.greetingByTimeAfternoonTranslationKey|trans({'%name%': context.customer.firstName ~ ' ' ~ context.customer.lastName})|sw_sanitize }}</h1>
            {% elseif context.customer.salutation.salutationKey != 'not_specified' %}
                <h1 class="shop-studio-personalized-customer-greeting-cloud-greeting-by-time-afternoon" style="display: none;">{{ shopStudioPersonalizedCustomerGreetingCloudConfig.greetingByTimeAfternoonTranslationKey|trans({'%name%': context.customer.salutation.translated.displayName ~ ' ' ~ context.customer.lastName})|sw_sanitize }}</h1>
            {% else %}
                <h1 class="shop-studio-personalized-customer-greeting-cloud-greeting-by-time-afternoon" style="display: none;">{{ "account.overviewTitle"|trans|sw_sanitize }}</h1>
            {% endif %}

            {% if shopStudioPersonalizedCustomerGreetingCloudConfig.greetingByTimeByFirstNameEnabled %}
                <h1 class="shop-studio-personalized-customer-greeting-cloud-greeting-by-time-evening" style="display: none;">{{ shopStudioPersonalizedCustomerGreetingCloudConfig.greetingByTimeEveningTranslationKey|trans({'%name%': context.customer.firstName})|sw_sanitize }}</h1>
            {% elseif shopStudioPersonalizedCustomerGreetingCloudConfig.greetingByTimeByFirstNameAndLastNameEnabled %}
                <h1 class="shop-studio-personalized-customer-greeting-cloud-greeting-by-time-evening" style="display: none;">{{ shopStudioPersonalizedCustomerGreetingCloudConfig.greetingByTimeEveningTranslationKey|trans({'%name%': context.customer.firstName ~ ' ' ~ context.customer.lastName})|sw_sanitize }}</h1>
            {% elseif context.customer.salutation.salutationKey != 'not_specified' %}
                <h1 class="shop-studio-personalized-customer-greeting-cloud-greeting-by-time-evening" style="display: none;">{{ shopStudioPersonalizedCustomerGreetingCloudConfig.greetingByTimeEveningTranslationKey|trans({'%name%': context.customer.salutation.translated.displayName ~ ' ' ~ context.customer.lastName})|sw_sanitize }}</h1>
            {% else %}
                <h1 class="shop-studio-personalized-customer-greeting-cloud-greeting-by-time-evening" style="display: none;">{{ "account.overviewTitle"|trans|sw_sanitize }}</h1>
            {% endif %}
        {% else %}
            <h1>{{ "account.overviewTitle"|trans|sw_sanitize }}</h1>
        {% endif %}

        {{ block('page_account_overview_welcome_intro') }}

        {% if page.customer.requestedGroup %}
            {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
                type: 'info',
                content: 'account.overviewCustomerGroupRequest'|trans({
                    '%group%': page.customer.requestedGroup.translated.name
                })
            } %}
        {% endif %}
    </div>
{% endblock %}