import

{strip}
    <div class="lpc-block lpc-code-block" data-elem-type="block" id="_lp_block_{$e.block_id}" data-block-layout="{$e.layout_id}">
<style>
{literal}
@charset "UTF-8";
.btn-advanced-data {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  z-index: 10;
  background: repeating-linear-gradient(-45deg, rgb(255, 255, 255), rgb(219, 219, 219) 5px, rgb(219, 219, 219) 5px, rgb(235, 235, 235) 10px);
  border-radius: 5px;
  border: 1px solid rgb(143, 143, 143);
}

.btn-advanced-data i {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 50px;
  height: 50px;
  display: inline-block;
  -webkit-mask-image: url("/my/s3/images/svg_icons/ic_ol_settings.svg");
  mask-image: url("/my/s3/images/svg_icons/ic_ol_settings.svg");
  -webkit-mask-size: 30px 30px;
  mask-size: 30px 30px;
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat no-repeat;
  mask-repeat: no-repeat no-repeat;
  background: rgb(92, 95, 131);
}

.get-data-modal-wrapper {
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1000;
  background: rgba(30, 30, 30, 0.30);
}

/* Стили модального окна */
.get-data-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  max-width: 400px;
  width: 100%;
  text-align: center;
  border-radius: 8px;
}


.get-data-modal h2 {
  color: #333;
}

.get-data-modal label {
  display: block;
  margin-top: 10px;
  margin-bottom: 5px;
  color: #555;
}

.get-data-modal input {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.get-data-modal button {
  background-color: #4caf50;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
}

.get-data-modal button:hover {
  background-color: #45a049;
}

.get-data-modal .get-data-modal-enter {
  background-color: #007bff;
}

.get-data-modal .get-data-modal-enter:hover {
  background-color: #0056b3;
}
{/literal}
</style>
<script>
{literal}

var LoadDataLPC = {
    appInit: function($_self){
        class appCreate {
            constructor(_self) {
                this.block = _self;
                this.openModal = null;

                this.frameTemporary = null;
                this.frameGatewayUrl = 'https://gateway.oml.ru';
                this.frameElement = null;

                this.haveImage = 0,
                this.templateBoxHtml = '';
                this.googleMethod = {
                    link: null,
                    list: null,
                    isGoogleValid: false
                };
                this.idFolderImg = null;
                this.csvFile = false;
                this.helper = {
                    checkClass(element, classElement ){
                        return element.classList.contains(classElement)
                    },
                    isLikeImage( obj ) {
                        if( obj.substr( 0, 4) == 'http' && obj.length > 3 ){

                            let url = obj.substr(obj.length - 5);

                            // Создайте регулярное выражение для сопоставления расширений файлов
                            let allowedExtensions = /\.(jpeg|jpg|png|ico|gif|tiff|webp|eps|svg|psd|indd|cdr|ai|raw)$/i;

                            // Используйте метод test() для проверки URL-адреса
                            if (allowedExtensions.test(url)) {
                                this.haveImage = 1;
                                return obj.split(',')[0];

                            }
                            return obj
                        }
                        return obj
                    },
                    escapeHtml(str) {
                        return str.replace(/[&<>"'/]/g, function(match) {
                            switch (match) {
                            case '&':
                                return '&amp;';
                            case '<':
                                return '&lt;';
                            case '>':
                                return '&gt;';
                            case '"':
                                return '&quot;';
                            case "'":
                                return '&#39;'; // Можно использовать &apos; вместо &#39;, если хотите
                            default:
                                return match;
                                }
                        })
                    },
                    decodeHtmlEntities(input) {
                        var doc = new DOMParser().parseFromString(input, "text/html");
                        return doc.documentElement.textContent;
                    },
                    getByUrlData(textData){
                        // Получаем URL-адрес из строки браузера
                        var url = window.location.href.replace('?', '&');

                        // Разбиваем URL-адрес по символу "&" для получения всех параметров
                        var params = url.split('&');

                        // Перебираем параметры и ищем параметр "access"
                        var accessValue = null;
                        for (var i = 0; i < params.length; i++) {
                            var param = params[i];
                            if (param.indexOf(`${textData}=`) === 0) {
                                // Нашли параметр "access"
                                // Извлекаем его значение и декодируем URL-кодирование
                                accessValue = decodeURIComponent(param.substring( textData.length + 1 ));
                                break; // Выходим из цикла после нахождения параметра
                            }
                        }

                        // Теперь значение accessValue содержит значение свойства "access"
                        return accessValue;

                    }
                }

            };
            modalClose(){
                var _this = this;
                if(!!_this.openModal){
                    document.body.removeChild( _this.openModal );
                }
            };
            createButton() {
                var _this = this;

                var btnAdvancedData = document.createElement('div');
                btnAdvancedData.classList.add('btn-advanced-data');

                // Создаем элемент "i" и добавляем его внутрь "btnAdvancedData"
                var iElement = document.createElement('i');
                btnAdvancedData.appendChild(iElement);

                // Вставляем созданный элемент в конец целевого элемента
                this.block.appendChild(btnAdvancedData);

                // Добавляем обработчик события клика
                btnAdvancedData.addEventListener('click', function() {
                    _this.modal();
                });
            };
            modal(){
                var _this = this;
                var templateModal = `
                <div class="get-data-modal">
                    <h2>Импорт данных</h2>
                    <label for="tableLink" class="get-data-modal-label">Ссылка на таблицу:</label>
                    <input type="text" id="tableLink" class="get-data-modal-input">

                    <label for="sheetName" class="get-data-modal-label">Название листа из таблицы:</label>
                    <input type="text" id="sheetName" class="get-data-modal-input">

                    <label for="csvFile" class="get-data-modal-label">Выберите файлы CSV:</label>
                    <input type="file" id="csvFile" class="get-data-modal-input" accept=".csv">

                    <label for="idFolderImg" class="get-data-modal-label">ID категории для картинок</label>
                    <input type="text" id="idFolderImg" class="get-data-modal-input">
                    <button class="get-data-modal-enter" >Получить данные</button>
                    <button class="get-data-modal-close">Закрыть</button>
                </div>
                `;
                var modal = document.createElement('div');
                modal.classList.add('get-data-modal-wrapper');
                modal.innerHTML = templateModal;

                document.body.appendChild(modal);

                _this.openModal = modal;
                window.sss = _this.openModal
                modal.addEventListener('click', function(e) {
                    let el = e.target
                    let chClass = _this.helper.checkClass;
                    if(chClass(el,'get-data-modal-close') || chClass(el,'get-data-modal-wrapper')){
                        _this.modalClose();
                    }else if(chClass(el,'get-data-modal-enter')){

                        _this.googleMethod.link = _this.openModal.querySelector('#tableLink').value;
                        _this.googleMethod.list = _this.openModal.querySelector('#sheetName').value;
                        this.idFolderImg = _this.openModal.querySelector('#idFolderImg').value;
                        _this.csvFile = modal.querySelector('#csvFile').files[0];

                        _this.appRun();

                    }
                });
            };
            createIframe() {
                this.frameElement = document.createElement('iframe');
                this.frameGatewayUrl = 'https://gateway.oml.ru';
                const handlerPage = '/gateway-sheets?';
                let amp = encodeURI('&')
                let googleSheetsLink = `${amp}sheetsLink=${ encodeURI( this.googleMethod.link ) }`;
                let googleSheetsList = `${amp}sheetslist=${ encodeURI( this.googleMethod.list ) }`;
                const selfUrl = window.location.origin + '/';
                this.frameElement.src = this.frameGatewayUrl + handlerPage + `onnerprovoking=${ encodeURI( selfUrl ) }${googleSheetsLink}${googleSheetsList}`;

                // Скрываем this.frameElement
                this.frameElement.style.display = 'none';

                // Добавляем this.frameElement на страницу
                document.body.appendChild(this.frameElement);

                return true;
            };
            error(numb) {
                switch (numb) {
                    case 1:
                        console.log('file not');
                        return false;
                        break;
                    case 2:
                        console.log('google sheets not');
                        return false;
                        break;
                    case 3:
                        alert('Перебор');
                        return false;
                        break;
                    default:
                        alert("Нет таких значений");
                }
            };
            parseCSVToJson(csvData) {
                const array = csvData.split('\r\n'); // Разбиваем CSV на строки
                const headers = array[0].split(','); // Получаем заголовки столбцов
                const result = [];

                for (let i = 1; i < array.length - 1; i++) {
                    let obj = {};

                    let str = array[i]; // Текущая строка CSV
                    let s = '';

                    let flag = 0;
                    for (let ch of str) {
                        if (ch === '"' && flag === 0) {
                            flag = 1; // Если встречаем открывающую кавычку, устанавливаем флаг
                        } else if (ch === '"' && flag == 1) {
                            flag = 0; // Если встречаем закрывающую кавычку, снимаем флаг
                        }
                        if (ch === ',' && flag === 0) {
                            ch = '|'; // Заменяем запятые на вертикальные черты, если они не внутри кавычек
                        }
                        if (ch !== '"') {
                            s += ch;
                        }
                    }

                    // Разбиваем строку на значения, используя вертикальные черты
                    let properties = s.split("|");

                    // Для каждого заголовка столбца сохраняем значение в объект
                    for (let j in headers) {
                        obj[headers[j]] = properties[j];
                    }

                    // Добавляем объект в результат
                    result.push(obj);
                }

                return result;
            };
            async getDataByFile() {
                if (!this.csvFile) {
                    return this.error(1);
                }

                return new Promise((resolve, reject) => {
                    const reader = new FileReader(); // Создаем объект для чтения файла

                    reader.onload = (event) => {
                        const csvData = event.target.result; // Получаем данные CSV из файла
                        this.MAINDATA = this.parseCSVToJson(csvData); // Преобразуем CSV в JSON
                        resolve(this.MAINDATA);
                    };

                    reader.onerror = (event) => {
                        reject(new Error("Ошибка чтения файла"));
                    };

                    reader.readAsText(this.csvFile); // Читаем файл как текст
                });
            };
            createIframe() {
                this.frameElement = document.createElement('iframe');
                this.frameGatewayUrl = 'https://gateway.oml.ru';
                const handlerPage = '/gateway-sheets?';
                let amp = encodeURI('&')
                let googleSheetsLink = `${amp}sheetsLink=${ encodeURI( this.googleMethod.link ) }`;
                let googleSheetsList = `${amp}sheetslist=${ encodeURI( this.googleMethod.list ) }`;
                const selfUrl = window.location.origin + '/';
                this.frameElement.src = this.frameGatewayUrl + handlerPage + `onnerprovoking=${ encodeURI( selfUrl ) }${googleSheetsLink}${googleSheetsList}`;

                // Скрываем this.frameElement
                this.frameElement.style.display = 'none';

                // Добавляем this.frameElement на страницу
                document.body.appendChild(this.frameElement);

                return true;
            };
            // Метод для обработки сообщений и получения данных
            async handlerMessageGr(event) {
                if (event.origin === this.frameGatewayUrl) {
                    this.MAINDATA = event.data;

                    // Разрешаем обещание с полученными данными
                    if (this.dataPromiseResolve) {
                        this.dataPromiseResolve(this.MAINDATA);

                        // Удаляем слушатель после получения данных
                        window.removeEventListener('message', this.handlerMessageGr);
                    }
                }
            };
            async getCompleteData() {
                try {
                    var data = null;

                    if( this.csvFile ){
                        data = await this.getDataByFile();
                    }else if( true ){
                        data = await this.getDataByGoogle();
                    }
                    // Выполняйте какие-либо действия с данными
                    return data;
                } catch (error) {
                    // Обработка ошибок, если необходимо
                    return null;
                }
            };
            async getDataByGoogle() {
                if (typeof this.googleMethod.link === 'undefined') return this.error(2);
                if (typeof this.googleMethod.list === 'undefined') return this.error(2);

                if (this.createIframe()) {
                    // Создаем новое обещание для получения данных
                    this.dataPromise = new Promise((resolve, reject) => {
                        // Сохраняем функцию resolve внутри объекта для использования позже
                        this.dataPromiseResolve = resolve;

                        window.addEventListener('message', (event) => {
                            this.handlerMessageGr(event);
                            // Может потребоваться обработать ошибку здесь, если event.origin не соответствует ожидаемому
                        });
                    });

                    return this.dataPromise;
                }
            };

            async saveImage(imgURL) {
                try {
                    var formData = new FormData();
                    let ver_id = this.helper.getByUrlData('ver_id');
                    let access = this.helper.getByUrlData('access');

                    let objectImage = {
                        "image_id": "0",
                        "filename": "",
                        "ver_id": ver_id,
                        "svg_body": "",
                        "image_width": "0",
                        "image_height": "0",
                        "ext": ""
                    };

                    formData.append('ver_id', ver_id);
                    formData.append('access', access);
                    formData.append('query_id', '0');
                    formData.append('src_type', 'uri');
                    if(this.idFolderImg){
                        formData.append('folder_ids', this.idFolderImg);
                    }

                    var fileUrls = [imgURL];
                    var fileNames = [`auto-create-` + imgURL.split('.').slice(0, -1).join('.')];

                    for (var i = 0; i < fileUrls.length; i++) {
                        formData.append('files[]', fileUrls[i]);
                        formData.append('names[]', fileNames[i]);
                        formData.append('modes[]', '');
                    }

                    let response = await fetch('/my/s3/cms/v1/image/editing.php', {
                        method: 'POST',
                        body: formData
                    });

                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }

                    let data = await response.text();

                    if (data.indexOf(`The image is not found or access denied`) == 0) {
                        console.error(`The image is not found or access denied`);
                        throw new Error('The image is not found or access denied');
                    }

                    let temporaryElement = document.createElement('div');
                    temporaryElement.innerHTML = data;
                    let temporaryImg = temporaryElement.querySelector('.image');

                    objectImage["image_id"] = temporaryImg.getAttribute('data-image-id');
                    objectImage["filename"] = temporaryImg.getAttribute('data-filename');
                    objectImage["image_width"] = temporaryImg.getAttribute('data-image-width');
                    objectImage["image_height"] = temporaryImg.getAttribute('data-image-height');
                    objectImage["ext"] = temporaryImg.getAttribute('data-ext');

                    return objectImage;
                } catch (error) {
                    console.error('Ошибка при сохранении изображения:', error);
                    throw error;
                }
            };
            async setImage(imgURL) {
                /*
                let img = {
                    "image_id": "212149508",
                    "filename": "55234803_2.jpg",
                    "ver_id": 3049689,
                    "svg_body": "",
                    "image_width": "1920",
                    "image_height": "1512",
                    "ext": "jpg"
                };
                */
                let img = {"image_id":"212149508","filename":"55234803_2.jpg","ver_id":3049689,"svg_body":"","image_width":"1920","image_height":"1512","ext":"jpg"};

                let matchText = /value="([^"]+)"/;
                let searchResult = this.templateBoxHtml.match(matchText);

                if (searchResult) {
                    // searchResult[0] содержит всю найденную строку, а searchResult[1] содержит значение атрибута "value"


                    let decodedString = searchResult[1].replace(/&quot;/g, '"');

                    // Преобразуем строку в JSON объект
                    let jsonObject = JSON.parse(decodedString);

                    let imageFieldName = '';
                    for( var key in jsonObject ){
                        if( typeof jsonObject[key].image_id != 'undefined'){
                            imageFieldName = key;
                            console.log( imageFieldName )
                        }
                    }

                    let imgPath = await this.saveImage(imgURL);
                    jsonObject[imageFieldName] = imgPath;

                    //jsonObject.menu_image = img;

                    let temporaryElement = document.createElement('div');

                    temporaryElement.innerHTML = this.templateBoxHtml;

                    var jsonString = JSON.stringify(jsonObject);

                    // Заменяем кавычки на экранированные кавычки
                    //var escapedString = this.helper.escapeHtml( jsonString );

                    temporaryElement.querySelector('input').value = jsonString;

                    this.templateBoxHtml = temporaryElement.innerHTML;


                    return `ОК`;
                } else {
                    return new Error("Значение атрибута 'value' не найдено.");
                }
            };
            async saveData(data) {
                if (data) {
                    this.block.querySelector('[data-metrika="landingBlockEdit"]').click();

                    let popupHtml = popupController.getLastPopup().obj,
                        boxesList = popupHtml.querySelector('.boxes.data-list'),
                        box = boxesList.querySelector('.box');
                    var counter = 0;
                        //data = data.splice(0, 2);
                    for (const dataObject of data) {
                        let cloneBox = box.cloneNode(true);
                        this.templateBoxHtml = cloneBox.innerHTML;

                        for (let key in dataObject) {
                            let valueObject = dataObject[key];

                            let matchText = `{{${key}}}`;
                            let searchRegex = new RegExp(matchText, 'g');

                            if (key == 'image' ) {
                                valueObject = this.helper.isLikeImage(valueObject)
                                let simp_valueObject = await this.setImage(valueObject);
                            }else{

                                valueObject = valueObject.replace(/[\"]/g, function (char) {
                                    return  `'`;
                                });
                                valueObject = this.helper.escapeHtml( valueObject.replace(/\s+/g, ' ') );
                                this.templateBoxHtml = this.templateBoxHtml.replace(searchRegex, valueObject);
                            }

                            this.haveImage = 0;
                        }
                        cloneBox.innerHTML = this.templateBoxHtml;

                        boxesList.append(cloneBox);
                    }
                    box.remove();

                    popupHtml.querySelector('.s3-btn-v2').click();

                    if (this.frameElement) this.frameElement.remove();

                    this.modalClose();
                }
            };
            async appRun(){
                const data = await this.getCompleteData();

                if (data) {
                    await this.saveData(data);
                }
            };
            async init() {
                this.createButton();
            };
        }

        var app = new appCreate($_self[0]);

        app.init().catch((error) => {
            console.error("Ошибка при инициализации: ", error);
        });

        /* OBJECT */
    }
}


lpc_template.queue.loadData = function ($self) {
    if($self.is('body')) {
        $('.lpc-block').each( function(){
            if( $(this).find('.lpc-row').length){
                LoadDataLPC.appInit($(this));
            }
        })

    } else if($self.find('.lpc-row').length) {
        LoadDataLPC.appInit($self);
    }
}
{/literal}
</script>
        </br>
        </br>
        <h3>Загрузчик</h3>
        </br>
        </br>
    </div>
{/strip}