{% extends 'base.html.twig' %}
{% form_theme form 'bootstrap_5_layout.html.twig' %}

{% block title %}Settings{% endblock %}

{% set block_to_render = 'body' %}
{% block body %}

    {% include 'general/components/navigation_menu_main.html.twig' with { 'activeTab': 'settings' } %}

    <div class="settings-container-test mb-5 mt-4">
        <div class="container">
            <div class="row">
                <div class="menu-settings h-auto col-12 col-lg-3 d-none d-lg-block">
                    <ul>
                        <li id="link-settings">
                            {{ 'lang.settings' | trans }}
                            <svg class="svg-arrow" width="20" height="20" viewBox="0 0 20 20" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path d="M7.5 4.16659L13.3333 9.99992L7.5 15.8333" stroke="currentColor"
                                      stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </li>
                        <li id="link-background">
                            {{ 'lang.backgrounds' | trans }}
                            <svg class="svg-arrow" width="20" height="20" viewBox="0 0 20 20" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path d="M7.5 4.16659L13.3333 9.99992L7.5 15.8333" stroke="currentColor"
                                      stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </li>
                        <li id="link-email-template">
                            {{ 'lang.emailTemplate' | trans }}
                            <svg class="svg-arrow" width="20" height="20" viewBox="0 0 20 20" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path d="M7.5 4.16659L13.3333 9.99992L7.5 15.8333" stroke="currentColor"
                                      stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </li>
                        <li id="link-social-media">
                            {{ 'lang.socialMediaLinks' | trans }}
                            <svg class="svg-arrow" width="20" height="20" viewBox="0 0 20 20" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path d="M7.5 4.16659L13.3333 9.99992L7.5 15.8333" stroke="currentColor"
                                      stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </li>
                        <li id="link-trusted-domains">
                            <a href="{{ path('app_trusted_ip_index', { userSettingsId: user_setting.id }) }}" class="text-decoration-none">
                                {{ 'lang.trustedIps' | trans }}
                                <svg class="svg-arrow" width="20" height="20" viewBox="0 0 20 20" fill="none"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <path d="M7.5 4.16659L13.3333 9.99992L7.5 15.8333" stroke="currentColor"
                                          stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="col-12 col-lg-9 p-3 p-lg-5 setting-container">
                    {{ form_start(form, {'attr': {'id': 'form_setting'}}) }}

                    {{ form_row(form._token) }}
                    <div class="setting-section p-3 display-block" id="settings-block">
                        <h1 class="d-flex d-lg-none">{{ 'lang.settings' | trans }}</h1>
                        <div class="input-wrap position-relative custom-link-popover">
                            <label>My link</label>

                            <input
                                    type="text"
                                    id="fullLink"
                                    class="form-control"
                                    value="{{ user_setting.myLink }}"
                                    readonly
                            />

                            <button
                                    id="copyMyLink"
                                    type="button"
                                    class="btn position-absolute copy-link"
                                    tabindex="0"
                                    data-bs-toggle="popover"
                                    data-bs-trigger="hover focus"
                                    data-bs-placement="top"
                                    data-bs-content="Copy Link"
                            >
                                <i class="icofont-copy text-color"></i>
                            </button>
                            <div id="output_myLink"></div>
                        </div>

                        <div class="input-wrap">
                            <label for="newLink">{{ 'lang.editMyLink' | trans }}</label>
                            <input type="text" id="newLink" class="form-control" minlength="2"/>
                        </div>

                        <div class="d-none">
                            {{ form_row(form.myLink) }}
                        </div>

                            {{ form_row(form.companyName) }}
                            {{ form_row(form.urlWebsite) }}

                        <div class="d-none d-lg-block">
                            <div class="row">
                                <div class="col-12">
                                    {{ form_row(form.uploadTitle) }}

                                    <div class="display-flex-start gap-5 mt-3">
                                        <div class="d-flex align-items-center mt-3" style="max-width: 100%">
                                            <label>{{ 'lang.textColor' | trans }}</label>
                                            {{ form_widget(form.uploadTitleColor) }}
                                            {{ form_errors(form.uploadTitleColor) }}
                                        </div>

                                        <div class="d-flex align-items-center mt-3">
                                            <label>{{ 'lang.textSize' | trans }}:</label>
                                            {{ form_widget(form.uploadTitleSize, {
                                                'type': 'number',
                                                'attr': {
                                                    'min' : 16,
                                                    'max': 150,
                                                    'oninput': 'javascript: if (parseInt(this.value) > parseInt(this.getAttribute("max"))) this.value = this.getAttribute("max");'
                                                }
                                            }) }} px
                                        </div>
                                    </div>

                                    {{ form_errors(form.uploadTitleSize) }}
                                </div>
                                <div class="col-8">
                                    <p id="preview" style="overflow: scroll;" class="text-center"></p>
                                </div>
                            </div>
                        </div>
                        <div class="mb-5 mt-5">
                            {{ form_widget(form.enableSms) }}
                            {{ form_label(form.enableSms) }}
                        </div>
                            {{ form_row(form.smsText) }}
                    </div>
                    <h1 class="d-flex d-lg-none"> {{ 'lang.backgrounds' | trans }} </h1>

                    <div class="setting-section p-3 display-none background-section" id="background-block">
                        <h1 class="d-flex d-lg-none">{{ 'lang.backgrounds' | trans }}</h1>

                        <style>
                            .bg-cards {
                                display: grid;
                                grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
                                gap: 20px;
                            }
                            .bg-card {
                                display: flex;
                                flex-direction: column;
                                gap: 12px;
                                padding: 16px;
                                border: 1px solid rgba(180, 83, 9, 0.18);
                                border-radius: 18px;
                                background: #fff;
                            }
                            .bg-card__title {
                                margin: 0;
                                font-size: 15px;
                                font-weight: 600;
                                color: var(--orange-color);
                            }
                            .bg-card__preview {
                                position: relative;
                                display: block;
                                width: 100%;
                                aspect-ratio: 16 / 10;
                                overflow: hidden;
                                border-radius: 14px;
                                background: var(--white-gray);
                                cursor: pointer;
                            }
                            .bg-card__preview img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                display: block;
                            }
                            .bg-card__overlay {
                                position: absolute;
                                inset: 0;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                background: rgba(0, 39, 102, 0.45);
                                color: #fff;
                                font-size: 14px;
                                font-weight: 500;
                                opacity: 0;
                                transition: opacity 0.2s ease;
                            }
                            .bg-card__preview:hover .bg-card__overlay {
                                opacity: 1;
                            }
                            .bg-card__meta {
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                gap: 8px;
                                min-height: 28px;
                            }
                            .bg-card__name {
                                flex: 1;
                                min-width: 0;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                font-size: 13px;
                                font-weight: 400;
                                color: var(--orange-color);
                            }
                            .bg-card__actions {
                                display: flex;
                                gap: 10px;
                                flex-wrap: wrap;
                                align-items: center;
                            }
                            .bg-card__actions .button,
                            .bg-card__actions .button-blue,
                            .bg-card__actions label.button {
                                display: inline-flex;
                                align-items: center;
                                justify-content: center;
                                min-width: 0;
                                margin: 0;
                                padding: 10px 18px;
                                font-size: 14px;
                                font-weight: 500;
                                line-height: 1.2;
                                border-radius: 38px;
                                cursor: pointer;
                            }
                            .bg-card__actions .button-danger-outline {
                                border: 1px solid var(--orange-color);
                                background: transparent;
                                color: var(--orange-color);
                                border-radius: 38px;
                                padding: 10px 18px;
                                font-size: 14px;
                                font-weight: 500;
                                cursor: pointer;
                            }
                            .bg-card__actions .button-danger-outline:hover {
                                background: rgba(180, 83, 9, 0.08);
                                color: var(--orange-hover);
                                border-color: var(--orange-hover);
                            }
                            .bg-card .error-message {
                                min-height: 18px;
                                font-size: 12px;
                                color: #b3261e;
                            }
                        </style>

                        <div class="bg-cards">
                            {# LOGIN #}
                            <div class="bg-card" data-bg-type="login">
                                <h3 class="bg-card__title">{{ 'lang.uploadLoginBackground' | trans }}</h3>
                                <div class="d-none">
                                    {{ form_widget(form.background_login) }}
                                </div>
                                <label class="bg-card__preview" for="user_settings_background_login">
                                    <img id="loginBackgroundPreview"
                                         src="{% if user_setting.backgroundLogin %}{{ asset('images/' ~ user_setting.backgroundLogin) }}{% else %}/images/default_setting_background_image.svg{% endif %}"
                                         alt="{{ 'lang.uploadLoginBackground' | trans }}"
                                         onerror="this.onerror=null;this.src='/images/default_setting_background_image.svg';">
                                    <span class="bg-card__overlay">{{ 'lang.changeBackground' | trans }}</span>
                                </label>
                                <div class="bg-card__meta">
                                    <span class="bg-card__name" id="loginBackgroundPreviewName">
                                        {% if user_setting.backgroundLogin %}
                                            {{ user_setting.backgroundLogin }}
                                        {% else %}
                                            {{ 'lang.noBackgroundSelected' | trans }}
                                        {% endif %}
                                    </span>
                                </div>
                                <div class="bg-card__actions">
                                    <label for="user_settings_background_login" class="button button-blue mb-0">
                                        {{ 'lang.selectImage' | trans }}
                                    </label>
                                    <button type="button"
                                            class="button-danger-outline {% if not user_setting.backgroundLogin %}d-none{% endif %}"
                                            id="del_background_login">
                                        {{ 'lang.delete' | trans }}
                                    </button>
                                </div>
                                <div id="loginBackgroundError" class="error-message text-danger"></div>
                                <div id="output_del_background_login"></div>
                                {{ form_errors(form.background_login) }}
                            </div>

                            {# UPLOAD #}
                            <div class="bg-card" data-bg-type="upload">
                                <h3 class="bg-card__title">{{ 'lang.uploadUploadBackground' | trans }}</h3>
                                <div class="d-none">
                                    {{ form_widget(form.background_upload) }}
                                </div>
                                <label class="bg-card__preview" for="user_settings_background_upload">
                                    <img id="uploadBackgroundPreview"
                                         src="{% if user_setting.backgroundUpload %}{{ asset('images/' ~ user_setting.backgroundUpload) }}{% else %}/images/default_setting_background_image.svg{% endif %}"
                                         alt="{{ 'lang.uploadUploadBackground' | trans }}"
                                         onerror="this.onerror=null;this.src='/images/default_setting_background_image.svg';">
                                    <span class="bg-card__overlay">{{ 'lang.changeBackground' | trans }}</span>
                                </label>
                                <div class="bg-card__meta">
                                    <span class="bg-card__name" id="uploadBackgroundPreviewName">
                                        {% if user_setting.backgroundUpload %}
                                            {{ user_setting.backgroundUpload }}
                                        {% else %}
                                            {{ 'lang.noBackgroundSelected' | trans }}
                                        {% endif %}
                                    </span>
                                </div>
                                <div class="bg-card__actions">
                                    <label for="user_settings_background_upload" class="button button-blue mb-0">
                                        {{ 'lang.selectImage' | trans }}
                                    </label>
                                    <button type="button"
                                            class="button-danger-outline {% if not user_setting.backgroundUpload %}d-none{% endif %}"
                                            id="del_background_upload">
                                        {{ 'lang.delete' | trans }}
                                    </button>
                                </div>
                                <div id="uploadBackgroundError" class="error-message text-danger"></div>
                                <div id="output_del_background_upload"></div>
                                {{ form_errors(form.background_upload) }}
                            </div>

                            {# DOWNLOAD #}
                            <div class="bg-card" data-bg-type="download">
                                <h3 class="bg-card__title">{{ 'lang.uploadDownloadBackground' | trans }}</h3>
                                <div class="d-none">
                                    {{ form_widget(form.background_download) }}
                                </div>
                                <label class="bg-card__preview" for="user_settings_background_download">
                                    <img id="downloadBackgroundPreview"
                                         src="{% if user_setting.backgroundDownload %}{{ asset('images/' ~ user_setting.backgroundDownload) }}{% else %}/images/default_setting_background_image.svg{% endif %}"
                                         alt="{{ 'lang.uploadDownloadBackground' | trans }}"
                                         onerror="this.onerror=null;this.src='/images/default_setting_background_image.svg';">
                                    <span class="bg-card__overlay">{{ 'lang.changeBackground' | trans }}</span>
                                </label>
                                <div class="bg-card__meta">
                                    <span class="bg-card__name" id="downloadBackgroundPreviewName">
                                        {% if user_setting.backgroundDownload %}
                                            {{ user_setting.backgroundDownload }}
                                        {% else %}
                                            {{ 'lang.noBackgroundSelected' | trans }}
                                        {% endif %}
                                    </span>
                                </div>
                                <div class="bg-card__actions">
                                    <label for="user_settings_background_download" class="button button-blue mb-0">
                                        {{ 'lang.selectImage' | trans }}
                                    </label>
                                    <button type="button"
                                            class="button-danger-outline {% if not user_setting.backgroundDownload %}d-none{% endif %}"
                                            id="del_background_download">
                                        {{ 'lang.delete' | trans }}
                                    </button>
                                </div>
                                <div id="downloadBackgroundError" class="error-message text-danger"></div>
                                <div id="output_del_background_download"></div>
                                {{ form_errors(form.background_download) }}
                            </div>
                        </div>
                    </div>

                    <div class="setting-section p-3 display-none" id="email-template-block">
                        <h1 class="d-flex d-lg-none"> E-Mail Template </h1>
                        <div class="row email-template-settings">
                            <div class="col-12 col-lg-4">
                                <div class="input-wrap">
                                    {{ form_label(form.companySignature) }}
                                    {{ form_widget(form.companySignature) }}
                                    {{ form_errors(form.companySignature) }}
                                </div>
                                <div class="input-wrap">
                                    {{ form_label(form.emailSubject) }}
                                    {{ form_widget(form.emailSubject) }}
                                    {{ form_errors(form.emailSubject) }}

                                </div>
                                <div class="d-none">
                                    {{ form_widget(form.emailLogo) }}
                                </div>
                                {% if user_setting.emailLogo %}
                                    <div class="mt-4 mb-2 custom-border display-flex-between">
                                        {{ user_setting.emailLogo }}
                                        <label for="user_settings_emailLogo">
                                            <svg width="48" height="48" viewBox="0 0 48 48" fill="none"
                                                 xmlns="http://www.w3.org/2000/svg">
                                                <rect width="48" height="48" rx="6" fill="#919191"/>
                                                <path transform="scale(0.5) translate(30, 30)"
                                                      fill-rule="evenodd" clip-rule="evenodd"
                                                      d="M20.6704 7.99651L26.5883 2.07861C27.9216 0.74528 28.5883 0.0786133 29.4167 0.0786133C30.2451 0.0786133 30.9118 0.74528 32.2451 2.07861L34.9216 4.7551C36.2549 6.08843 36.9216 6.75509 36.9216 7.58352C36.9216 8.41195 36.2549 9.07861 34.9216 10.4119L29.0486 16.285C25.595 14.2634 22.7166 11.4063 20.6704 7.99651ZM19.2161 9.45072L3.18973 25.4771C2.76467 25.9022 2.55214 26.1147 2.4124 26.3758C2.27267 26.6369 2.21372 26.9317 2.09583 27.5211L0.397104 36.0148C0.330582 36.3474 0.297321 36.5137 0.391929 36.6083C0.486537 36.7029 0.652842 36.6696 0.985452 36.6031L9.4791 34.9044C10.0686 34.7865 10.3633 34.7275 10.6244 34.5878C10.8855 34.4481 11.098 34.2355 11.5231 33.8105L27.5906 17.7429C24.1878 15.6573 21.3236 12.8133 19.2161 9.45072Z"
                                                      fill="white"/>
                                            </svg>
                                        </label>
                                    </div>
                                    <div class="display-flex-start">
                                        <button class="button-no-style text-color p-0" type="button"
                                                id="del_email_logo">
                                            {{ 'lang.deleteLogo' | trans }}
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                 xmlns="http://www.w3.org/2000/svg">
                                                <path d="M10 15L10 12" stroke="currentColor" stroke-width="2"
                                                      stroke-linecap="round"/>
                                                <path d="M14 15L14 12" stroke="currentColor" stroke-width="2"
                                                      stroke-linecap="round"/>
                                                <path d="M3 7H21V7C20.0681 7 19.6022 7 19.2346 7.15224C18.7446 7.35523 18.3552 7.74458 18.1522 8.23463C18 8.60218 18 9.06812 18 10V16C18 17.8856 18 18.8284 17.4142 19.4142C16.8284 20 15.8856 20 14 20H10C8.11438 20 7.17157 20 6.58579 19.4142C6 18.8284 6 17.8856 6 16V10C6 9.06812 6 8.60218 5.84776 8.23463C5.64477 7.74458 5.25542 7.35523 4.76537 7.15224C4.39782 7 3.93188 7 3 7V7Z"
                                                      stroke="currentColor" stroke-width="2"
                                                      stroke-linecap="round"/>
                                                <path d="M10.0681 3.37059C10.1821 3.26427 10.4332 3.17033 10.7825 3.10332C11.1318 3.03632 11.5597 3 12 3C12.4403 3 12.8682 3.03632 13.2175 3.10332C13.5668 3.17033 13.8179 3.26427 13.9319 3.37059"
                                                      stroke="currentColor" stroke-width="2"
                                                      stroke-linecap="round"/>
                                            </svg>
                                        </button>
                                    </div>
                                {% else %}
                                    <div class="display-flex-between p-1">
                                        <span class="m-0">
                                            {{ form_label(form.emailLogo) }}
                                        </span>
                                    </div>
                                    <div id="fileName"></div>

                                    <label class="mt-2" for="user_settings_emailLogo">
                                        <img src="/images/logo_upload.svg"/>
                                    </label>
                                {% endif %}
                                {{ form_errors(form.emailLogo) }}
                                <div id="output_del_email_logo"></div>
                            </div>

                            <div class="col-5 d-none d-lg-block p-4 email-settings-preview">
                                <div>
                                    <div class="title-wrap">
                                        <p id="subject-preview">{{ 'lang.yourSubjectHere' | trans }}</p>
                                    </div>
                                    <div class="email-settings-preview-container">
                                        <div class="display-flex-center">
                                            {% if user_setting.emailLogo %}
                                                <img class="logo" id="logoPreview"
                                                     src='{{ asset('images/' ~ user_setting.emailLogo) }}'
                                                     alt="Loading..."/>
                                            {% else %}
                                                <img id="logoPreview" class="logo" src="/images/cumas_logo.svg"
                                                     alt="Your Logo">
                                            {% endif %}
                                        </div>
                                        <div class="text-wrap7777">
                                            <p class="text-center mt-5 mb-5">{{ 'lang.text' | trans }}</p>
                                            <p class="text-center pt-3"
                                               id="signature-preview">{{ 'lang.yourSignatureHere' | trans }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="setting-section p-3 display-none" id="social-media-block">
                        <h1 class="d-flex d-lg-none"> Social Media Links </h1>
                            {{ form_row(form.urlInstagram) }}
                            {{ form_row(form.urlLinkedin) }}
                            {{ form_row(form.urlFacebook) }}
                    </div>

                    <input type="hidden" id="id" value="{{ user_setting.id }}">
                    <div class="display-flex-center p-3 mt-3">
                        <button class="button button-blue" type="submit">{{ 'lang.save' | trans }}</button>
                    </div>
                    {{ form_end(form, {'render_rest': false}) }}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('settings') }}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const inputs = document.querySelectorAll('input[type="text"], input[type="number"], input[type="email"], input[type="password"], textarea');
            const pencilIconPath = "{{ asset('/images/pencil.svg') }}";
            const fullLinkInput = document.getElementById('fullLink');
            const userSettingsUploadTitleSize = document.getElementById('user_settings_uploadTitleSize');
            const user_settings_emailSubject = document.getElementById('user_settings_emailSubject');
            const user_settings_companySignature = document.getElementById('user_settings_companySignature');


            inputs.forEach(input => {
                // Проверяем, является ли текущий инпут инпутом fullLink
                if (input !== fullLinkInput && input !== userSettingsUploadTitleSize && input !== user_settings_companySignature && input !== user_settings_emailSubject ) {
                    input.readOnly = true;
                    input.classList.add('readonly-input');

                    const inputWrapper = document.createElement('div');
                    inputWrapper.style.position = 'relative';
                    input.parentNode.insertBefore(inputWrapper, input);
                    inputWrapper.appendChild(input);

                    const svgContainer = document.createElement('div');
                    svgContainer.style.position = 'absolute';
                    svgContainer.style.right = '5px';
                    svgContainer.style.top = '50%';
                    svgContainer.style.transform = 'translateY(-50%)';
                    svgContainer.style.cursor = 'pointer';
                    svgContainer.innerHTML = `<img src="${pencilIconPath}" width="20" height="20" alt="Edit">`;
                    inputWrapper.appendChild(svgContainer);

                    const svgImage = svgContainer.querySelector('img');
                    if (svgImage) {
                        svgImage.addEventListener('click', function () {
                            input.readOnly = false;
                            input.classList.remove('readonly-input');
                            input.focus();
                        });
                    }
                }
            });
        });
    </script>
{% endblock %}