{% extends '@Installer/installer/base.html.twig' %}

{% block base_content %}
    <div class="card__title">
        <h2>{{ "shopware.installer.configuration_header"|trans }}</h2>
    </div>

    <form id="shop-configuration" action="{{ url('installer.configuration') }}" method="post">
        <div class="card__body">
            {% if error %}
                <div class="alert alert-error">
                    <pre>{{ error }}</pre>
                </div>
            {% endif %}

            <p>{{ "shopware.installer.configuration_sconfig_text"|trans }}</p>

            <!-- Shop data section -->
            <div class="section-header">
                <h3 class="section-title">{{ "shopware.installer.configuration_admin_shop_headline"|trans }}</h3>
            </div>

            <p>
                <label for="config_shopName">{{ "shopware.installer.configuration_sconfig_name"|trans }}</label>
                <input type="text"
                       value="{{ parameters.config_shopName ?? '' }}"
                       name="config_shopName"
                       id="config_shopName"
                       required="required"
                       autofocus/>
            </p>

            <p>
                <label for="config_mail">
                    {{ "shopware.installer.configuration_sconfig_mail"|trans }}
                    <a class="help-badge"
                       href="#"
                       data-tooltip="{{ "shopware.installer.configuration_email_help_text"|trans }}">
                        <i class="icon-help"></i>
                    </a>
                </label>
                <input type="email"
                       value="{{ parameters.config_mail ?? '' }}"
                       name="config_mail"
                       id="config_mail"
                       required="required"/>
            </p>

            <div class="form-group form-group--50">
                <div class="input-group">
                    <label for="config_shop_language">{{ "shopware.installer.configuration_sconfig_language"|trans }}</label>
                    <div class="select-wrapper">
                        <select name="config_shop_language" id="config_shop_language" onchange="syncDefaultLanguage()">
                            {% for language in languageIsos %}
                                <option value="{{ language.id }}" {% if parameters.config_shop_language == language.id %}selected{% endif %}>
                                    {{ ("shopware.installer.select_language_" ~ language.id) |trans }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <div class="input-group">
                    <label for="config_shop_currency">{{ "shopware.installer.configuration_sconfig_currency"|trans }}</label>
                    <div class="select-wrapper">
                        <select name="config_shop_currency"
                                id="config_shop_currency"
                                onchange="toggleDefaultCurrency()">
                            {% for iso in currencyIsos %}
                                <option value="{{ iso }}" {% if parameters.config_shop_currency ?? '' == iso %}selected{% endif %}>
                                    {{ ("shopware.installer.configuration_admin_currency_" ~ (iso|lower)) |trans }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    <span class="help-block" style="display: none">
                        {{ "shopware.installer.configuration_sconfig_currency_info"|trans }}
                    </span>
                </div>

                <div class="input-group">
                    <label for="config_shop_country">{{ "shopware.installer.configuration_sconfig_country"|trans }}</label>
                    <div class="select-wrapper">
                        <select name="config_shop_country" id="config_shop_country">
                            {% for country in countryIsos %}
                                <option value="{{ country.iso3 }}" {% if country.default %}selected{% endif %}>
                                    {{ country.translated }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </div>

            <div class="alert alert-warning">
                <span class="icon-warning"></span>
                {{ "shopware.installer.configuration_defaults_warning"|trans }}
            </div>

            <!-- Languages section -->
            <div class="section-header">
                <h3 class="section-title">{{ "shopware.installer.configuration_admin_language_headline"|trans }}</h3>
            </div>

            <div class="languages-block">
                <p class="available-languages__text">
                    {{ "shopware.installer.configuration_admin_language_text"|trans }}
                </p>

                <!-- Search row -->
                <div class="languages-search-row">
                    <div class="languages-search">
                        <div class="search-input-wrapper">
                            <input id="language-search"
                                   class="form-control languages-search__control"
                                   placeholder="{{ "shopware.installer.configuration_admin_language_search_placeholder"|trans }}">
                            <i class="icon-search search-icon"></i>
                        </div>
                    </div>

                    <div class="languages-actions">
                        <a href="#" onclick="selectAllLanguages(event)">{{ "shopware.installer.configuration_admin_language_select_all"|trans }}</a>
                        <a href="#" onclick="clearAllLanguages(event)">{{ "shopware.installer.configuration_admin_language_clear_all"|trans }}</a>
                    </div>
                </div>

                <div class="languages-box">
                    <div class="languages-list auto-columns">
                        {% for locale, language in allAvailableLanguages %}
                            <div class="custom-checkbox language-item"
                                 data-language-name="{{ language.label|lower }}">
                                <input type="checkbox"
                                       class="language-toggle"
                                       id="lang_{{ locale|lower|replace({'-': '_'}) }}"
                                       name="selected_languages[]"
                                       value="{{ locale }}"
                                       {% if locale in ['en-GB','de-DE'] %}checked disabled data-default-locales{% elseif locale in selectedLanguages %}checked{% endif %}
                                       onclick="event.target.classList.add('toggled')" />
                                <label for="lang_{{ locale|lower|replace({'-': '_'}) }}">
                                    {{ language.label }}
                                </label>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <!-- Currencies section -->
            <div class="section-header">
                <h3 class="section-title">{{ "shopware.installer.configuration_admin_currency_headline"|trans }}</h3>
            </div>
            <p class="available-currencies__text">{{ "shopware.installer.configuration_admin_currency_text"|trans }}</p>

            <div class="available-currencies__container">
                {% for iso in currencyIsos %}
                    <div class="custom-checkbox">
                        <input type="checkbox"
                               class="currency-toggle"
                               id="{{ iso|lower }}"
                               name="available_currencies[]"
                               value="{{ iso }}"
                               onclick="event.target.classList.add('toggled')"
                        />
                        <label for="{{ iso|lower }}">{{ ("shopware.installer.configuration_admin_currency_" ~ (iso|lower)) |trans }}</label>
                    </div>
                {% endfor %}
            </div>

            <!-- Admin user data section -->
            <div class="section-header">
                <h3 class="section-title">{{ "shopware.installer.configuration_admin_user_headline"|trans|default('Admin user data') }}</h3>
            </div>

            <p>
                <label for="config_admin_email">{{ "shopware.installer.configuration_admin_mail"|trans }}</label>
                <input type="email"
                       value="{{ parameters.config_admin_email ?? '' }}"
                       name="config_admin_email"
                       id="config_admin_email"
                       required="required"/>
            </p>

            <div class="form-group form-group--50">
                <p>
                    <label for="config_admin_firstName">{{ "shopware.installer.configuration_admin_firstName"|trans }}</label>
                    <input type="text"
                           value="{{ parameters.config_admin_firstName ?? '' }}"
                           name="config_admin_firstName"
                           id="config_admin_firstName"
                           required="required"/>
                </p>

                <p>
                    <label for="config_admin_lastName">{{ "shopware.installer.configuration_admin_lastName"|trans }}</label>
                    <input type="text"
                           value="{{ parameters.config_admin_lastName ?? '' }}"
                           name="config_admin_lastName"
                           id="config_admin_lastName"
                           required="required"/>
                </p>
            </div>

            <div class="form-group form-group--50">
                <p>
                    <label for="config_admin_username">{{ "shopware.installer.configuration_admin_username"|trans }}</label>
                    <input type="text"
                           value="{{ parameters.config_admin_username ?? '' }}"
                           name="config_admin_username"
                           id="config_admin_username"
                           required="required"/>
                </p>

                <p>
                    <label for="config_admin_password">{{ "shopware.installer.configuration_admin_password"|trans }}</label>
                    <input type="password"
                           value="{{ parameters.config_admin_password ?? '' }}"
                           name="config_admin_password"
                           id="config_admin_password"
                           required="required"/>
                </p>
            </div>
        </div>


        <div class="card__footer flex-container">
            <a href="{{ url('installer.database-import') }}" class="btn btn-default flex-item">{{ "shopware.installer.back"|trans }}</a>
            <button type="submit"
                    class="btn btn-primary flex-item flex-right"
                    onclick="document.getElementById('shop-configuration').classList.add('is--submitted'); setLastActivity();">
            {{ "shopware.installer.forward"|trans }}
            </button>
        </div>
    </form>

    <script>
        let previousDefaultLanguage = null;

        toggleDefaultCurrency();
        syncDefaultLanguage();
        function toggleDefaultCurrency() {
            const toggles = document.getElementsByClassName('currency-toggle');
            for (let toggle of toggles) {
                if (toggle.getAttribute('disabled') === null) {
                    // skip all toggles that were previously not the default
                    continue;
                }

                toggle.removeAttribute('disabled');
                toggle.classList.remove('is--selected');
                if (!toggle.classList.contains('toggled')) {
                    // only uncheck if it was not manually toggled
                    toggle.removeAttribute('checked');
                }
            }

            const newDefaultToggle = document.getElementById(
                document.getElementById('config_shop_currency').value.toLowerCase()
            );
            newDefaultToggle.setAttribute('checked', '');
            newDefaultToggle.setAttribute('disabled', '');
            newDefaultToggle.classList.add('is--selected');
        }

        // Language search functionality
        document.addEventListener('DOMContentLoaded', function() {
            const searchInput = document.getElementById('language-search');
            if (searchInput) {
                searchInput.addEventListener('input', function() {
                    const searchTerm = this.value.toLowerCase();
                    const languageItems = document.querySelectorAll('.language-item');

                    languageItems.forEach(function(item) {
                        const languageName = item.getAttribute('data-language-name');
                        if (languageName.includes(searchTerm)) {
                            item.style.display = 'block';
                        } else {
                            item.style.display = 'none';
                        }
                    });
                });
            }
        });

        function selectAllLanguages(event) {
            event.preventDefault();
            document.querySelectorAll('.language-toggle').forEach((toggle) => {
                const row = toggle.closest('.language-item');
                if (row && row.style.display !== 'none' && !toggle.disabled) {
                    toggle.checked = true;
                    toggle.classList.add('toggled');
                }
            });
        }

        function clearAllLanguages(event) {
            event.preventDefault();
            document.querySelectorAll('.language-toggle').forEach((toggle) => {
                const row = toggle.closest('.language-item');
                if (row && row.style.display !== 'none' && !toggle.disabled) {
                    toggle.checked = false;
                    toggle.classList.remove('toggled');
                }
            });
        }

        function setLastActivity() {
            localStorage.setItem('lastActivity', `${Date.now()}`);
        }

        function syncDefaultLanguage() {
            const selectedLanguage = document.getElementById('config_shop_language').value;
            const current = document.querySelector(`input[name="selected_languages[]"][value="${selectedLanguage}"]`);

            // Uncheck previous language if different
            if (previousDefaultLanguage && previousDefaultLanguage !== selectedLanguage) {
                const previousLanguage = document.querySelector(`input[name="selected_languages[]"][value="${previousDefaultLanguage}"]`);
                if (previousLanguage && !previousLanguage.hasAttribute('data-default-locales')) {
                    previousLanguage.checked = false;
                    previousLanguage.disabled = false;
                }
            }

            if (current && !current.disabled) {
                current.checked = true;
                current.disabled = true;
            }

            previousDefaultLanguage = selectedLanguage;
        }
    </script>
{% endblock %}