@include('Bitrix24.connector_header')

<div class="content tarif">
    <div class="heading_block">
        <div class="title_block">
            <h2>ТАРИФЫ</h2>
            <div class="type_payment">
                <a href="javascript:void(0);" id="monthly" class="active">Ежемесячно</a>
                <a href="javascript:void(0);" id="yearly">Оплата в год</a>
            </div>
        </div>
        <div class="amount">
            <select name="" id="amount_selected">
                <option value="KZT">KZT</option>
                <option value="RUR">RUR</option>
                <option value="USD">USD</option>
                <option value="EUR">EUR</option>
            </select>
        </div>
    </div>
    <div class="row mt-4" id="price_content">

    </div>
</div>
<footer>
    <div class="heading_footer">
        <h2>дополнительные Настройки</h2>

    </div>
    <div class="footer_body">
        <div class="row">
            <div class="col-md-4">
                <div class="input_group">
                    <div class="info_box">
                        <label for="">Администраторы | Уведомления</label>
                        <label class="switch">
                            <input type="checkbox" id="notification" />
                            <svg viewBox="0 0 38 24" filter="url(#goo)">
                                <circle class="default" cx="12" cy="12" r="8" />
                                <circle class="dot" cx="26" cy="12" r="8" />
                            </svg>
                        </label>
                    </div>
                    <div class="input_box">
                        <select name="admins" id="admins"></select>
                        <button type="button" class="rewrite primary_btn" id="rewrite_admin"><img
                                src="{{ asset('storage/connector/images/pen.svg') }}" alt=""></button>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="input_group">
                    <label for="">Токен</label> <a href="javascript:void(0)"
                        data-tooltip="Скопируйте токен в настройки датасета, чтоб подключить коннектор (см. Инструкцию)"
                        data-position="top" class="top"><img
                            src="{{ asset('storage/connector/images/warning.svg') }}" alt=""></a>
                    <div class="input_box">
                        <input type="text" id="domain_token" disabled>
                        <button type="button" class="copy_token primary_btn"><img
                                src="{{ asset('storage/connector/images/copy_white.svg') }}" alt=""></button>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <label for="">Время кэша: <span id="cache_time"></span></label> <a href="javascript:void(0)"
                    data-tooltip="Обновленные данные будут доступны после очистки кэша" data-position="top"
                    class="top"><img src="{{ asset('storage/connector/images/warning.svg') }}" alt=""></a>
                <div class="input_box">
                    <button type="button" id="clear_cache" class="full_btn primary_btn">Очистить
                        вручную</button>
                </div>
            </div>
            <div class="col-md-3">
                <div class="input_group">
                    <label for="">Полезности</label>
                    <div class="input_box">
                        <a href="https://docs.google.com/document/d/1kKiuoltKztzT9_OM0jRkF9KfzHweeKM3Mxcn-gHLTxg/edit?usp=sharing"
                            target="_blank"><button type="button" class="download primary_btn">Инструкция</button></a>
                        <a href="https://drive.google.com/drive/folders/1VFwnPLJ1KBFnJ9_SkKp6D9mlKKCiuTpm?usp=drive_link"
                            target="_blank"><button type="button" class="download primary_btn">Шаблоны</button></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
@include('connector_footer')
<script>
    var url = 'https://mobridge.io/api/v1/connector/bitrix24/price/monthly'
    fetchData(url)

    $(document).ready(function() {
        $('#amount_selected').change(function() {
            var selectedValue = $(this).val();
            // console.log(selectedValue); // Пример вывода в консоль
            var activeLink = $('.type_payment').find('a.active');
            var activeId = activeLink.attr('id');
            var url = 'https://mobridge.io/api/v1/connector/bitrix24/price/' + activeId;
            fetchData(url); // Вызываем функцию fetchData() с нужным URL
        });

        $('.type_payment a').on('click', function() {
            $('.type_payment a').removeClass('active'); // Удаляем класс active у всех ссылок
            $(this).addClass('active'); // Добавляем класс active только нажатой ссылке

            var buttonId = $(this).attr('id');
            var url = 'https://mobridge.io/api/v1/connector/bitrix24/price/' + buttonId;
            fetchData(url); // Вызываем функцию fetchData() с нужным URL
        });
    });

    function fetchData(url) {
        $.ajax({
            url: url,
            method: 'GET',
            success: function(response) {
                handleResponseOnLoad(response);
                handleResponseChangeAmount(response);
                handleResponseChangeTypePayment(response);
            },
            error: function(error) {
                handleAjaxError(error);
            }
        });
    }

    function handleResponseOnLoad(response) {
        var tariff_now; // объявляем переменную
        var domain = BX24.getDomain();
        var observer = new MutationObserver(function(mutationsList, observer) {
            var token = $("#domain_token").val()
            for (var mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    tariff_now = $('#tariff').attr('data-tariff'); // обновляем переменную
                    // здесь можно использовать tariff_now в вашем коде
                    response.forEach(function(item) {
                        var selected_amount = $('#amount_selected').val();
                        var amount = '' + formatNumberWithCommas(item[selected_amount]) + ' <span>' +
                            selected_amount + '</span> / мес';
                        if (item[selected_amount] === 0) {
                            amount = 'Бесплатно';
                        } else if (item[selected_amount] === null) {
                            amount = 'По запросу';
                        }

                        var button_txt = 'Подключить';


                        var template =
                            `<div class="col-md-3">
                                    <div class="price_box box_` + item.id + `">
                                        <div class="text-center">
                                            <h2 class="pack_title">` + item.title + `</h2>
                                            <h3 class="pack_price">` + amount + `</h3>
                                            <button id="pack_` + item.id + `" class="clicker">` + button_txt + `</button>
                                        </div>
                                        <ul class="options_` + item.id + `">
                                           
                                        </ul>
                                    </div>
                                </div>`;
                        $('#price_content').append(template)

                        if ('pack_' + tariff_now === 'pack_' + item.id) {
                            $("#pack_" + item.id).text('Текущий тариф');
                            $("#pack_" + item.id).css('background-color', '#767676');
                            $("#pack_" + item.id).attr('disabled', 'true');
                            $("#pack_" + item.id).removeAttr('class');
                        } else if ('pack_' + tariff_now !== 'pack_' + item.id) {
                            $(".clicker").each(function() {
                                if ($(this).attr('id') === 'pack_1') {
                                    // ваш код, который будет выполнен, если у элемента с классом clicker id равен pack_1
                                    $(this).text('По умолчанию');
                                    $(this).attr('disabled', 'true');
                                    $(this).removeAttr('class');
                                }
                            });
                        }

                        var options = item.options;
                        // Находим элемент <ul> с классом "options"
                        var ulElement = $('.options_' + item.id);
                        for (var key in options) {
                            if (options.hasOwnProperty(key)) {
                                var value = options[key];
                                var liElement = $('<li><p>' + value + '</p></li>');

                                ulElement.append(liElement);
                            }
                        }

                    });
                }
            }
            $("#pack_4.clicker").on('click', function() {
                $('.b24-widget-button-openline_livechat span').trigger('click');
            });
            $("#pack_3.clicker").on('click', function() {
                var type_payment = $('.type_payment a.active').attr('id');

                var selectedValue = $('#amount_selected').val();
                var url = 'https://mobridge.io/api/v1/connector/bitrix24/price/' + type_payment;
                // Выполняем AJAX запрос
                $.ajax({
                    url: url, // Указываем URL для запроса
                    type: 'GET', // Указываем метод POST
                    contentType: 'application/json', // Указываем тип контента
                    success: function(response) {
                        // Обработка успешного ответа от сервера
                        response.forEach(function(item) {
                            if (item.id === 3) {
                                if (selectedValue === "KZT") {
                                    var text = selectedValue + '_' + type_payment;
                                    var lowercaseText = text.toLowerCase();
                                    if (item[selectedValue] !== undefined &&
                                        lowercaseText !== undefined) {

                                        if (type_payment === 'monthly') {
                                            var orderData = {
                                                "order": {
                                                    "typeRid": "SaleOrder",
                                                    "language": "ru",
                                                    "amount": item[
                                                        selectedValue],
                                                    "currency": selectedValue,
                                                    "hppRedirectUrl": "https://forte.kz",
                                                    "description": domain +
                                                        ',3,1,' + item[
                                                        selectedValue]
                                                }
                                            }
                                        } else if (type_payment === 'yearly') {
                                            var orderData = {
                                                "order": {
                                                    "typeRid": "SaleOrder",
                                                    "language": "ru",
                                                    "amount": item[
                                                        selectedValue] * 12,
                                                    "currency": selectedValue,
                                                    "hppRedirectUrl": "https://forte.kz",
                                                    "description": domain +
                                                        ',3,12,' + item[
                                                            selectedValue] * 12
                                                }
                                            }
                                        }


                                        var url =
                                            'https://mobridge.io/api/v1/create/' +
                                            token + '/payment_order';
                                        var requestData = JSON.stringify(orderData);

                                        $.ajax({
                                            url: url, // Указываем URL для запроса
                                            type: 'POST', // Указываем метод POST
                                            data: requestData, // Преобразуем объект requestData в JSON строку
                                            contentType: 'application/json', // Указываем тип контента
                                            success: function(response) {
                                                // console.log(response)
                                                // Обработка успешного ответа от сервера
                                                window.open(response);
                                            },
                                            error: function(xhr, status,
                                                error) {
                                                // Обработка ошибок
                                                console.error(
                                                    'Ошибка AJAX запроса:',
                                                    error);
                                            }
                                        });


                                    } else {

                                    }
                                } else if (selectedValue === "RUR") {
                                    var alert =
                                        '<span class="payment_alert" style="position: fixed;top: 20px;right: 20px;background-color: rgba(255,0,0,0.7);border-radius: 5px;color: #fff;padding: 5px 15px;">Под RUR нет платежного жлюза!!!<span/>';

                                    $("body").append(alert);

                                    function myFunction() {
                                        // Здесь поместите код, который вы хотите выполнить через 5 секунд
                                        $("body").find(".payment_alert").remove();
                                    }

                                    setTimeout(myFunction, 5000);

                                } else if (selectedValue === "USD" ||
                                    selectedValue === "EUR") {
                                    var alert =
                                        '<span class="payment_alert" style="position: fixed;top: 20px;right: 20px;background-color: rgba(255,0,0,0.7);border-radius: 5px;color: #fff;padding: 5px 15px;">Под USD/EUR нет платежного жлюза!!!<span/>';

                                    $("body").append(alert);

                                    function myFunction() {
                                        // Здесь поместите код, который вы хотите выполнить через 5 секунд
                                        $("body").find(".payment_alert").remove();
                                    }

                                    setTimeout(myFunction, 5000);

                                }
                            }
                        });

                    },
                    error: function(xhr, status, error) {
                        // Обработка ошибок
                        console.error('Ошибка AJAX запроса:', error);
                    }
                });

            });
            $("#pack_2.clicker").on('click', function() {
                var type_payment = $('.type_payment a.active').attr('id');

                var selectedValue = $('#amount_selected').val();
                var url = 'https://mobridge.io/api/v1/connector/bitrix24/price/' + type_payment;
                // Выполняем AJAX запрос
                $.ajax({
                    url: url, // Указываем URL для запроса
                    type: 'GET', // Указываем метод POST
                    contentType: 'application/json', // Указываем тип контента
                    success: function(response) {
                        // Обработка успешного ответа от сервера
                        response.forEach(function(item) {
                            if (item.id === 2) {
                                if (selectedValue === "KZT") {
                                    var text = selectedValue + '_' + type_payment;
                                    var lowercaseText = text.toLowerCase();
                                    if (item[selectedValue] !== undefined &&
                                        lowercaseText !== undefined) {

                                        if (type_payment === 'monthly') {
                                            var orderData = {
                                                "order": {
                                                    "typeRid": "SaleOrder",
                                                    "language": "ru",
                                                    "amount": item[
                                                        selectedValue],
                                                    "currency": selectedValue,
                                                    "hppRedirectUrl": "https://forte.kz",
                                                    "description": "Test_tester"
                                                }
                                            }
                                        } else if (type_payment === 'yearly') {
                                            var orderData = {
                                                "order": {
                                                    "typeRid": "SaleOrder",
                                                    "language": "ru",
                                                    "amount": item[
                                                        selectedValue] * 12,
                                                    "currency": selectedValue,
                                                    "hppRedirectUrl": "https://forte.kz",
                                                    "description": "Test_tester"
                                                }
                                            }
                                        }



                                        console.log(orderData)
                                        var url =
                                            'https://mobridge.io/api/v1/create/payment_order';
                                        var requestData = JSON.stringify(orderData);

                                        $.ajax({
                                            url: url, // Указываем URL для запроса
                                            type: 'POST', // Указываем метод POST
                                            data: requestData, // Преобразуем объект requestData в JSON строку
                                            contentType: 'application/json', // Указываем тип контента
                                            success: function(response) {
                                                // console.log(response)
                                                // Обработка успешного ответа от сервера
                                                window.open(response);
                                            },
                                            error: function(xhr, status,
                                                error) {
                                                // Обработка ошибок
                                                console.error(
                                                    'Ошибка AJAX запроса:',
                                                    error);
                                            }
                                        });


                                    } else {

                                    }
                                } else if (selectedValue === "RUR") {
                                    var alert =
                                        '<span class="payment_alert" style="position: fixed;top: 20px;right: 20px;background-color: rgba(255,0,0,0.7);border-radius: 5px;color: #fff;padding: 5px 15px;">Под RUR нет платежного жлюза!!!<span/>';

                                    $("body").append(alert);

                                    function myFunction() {
                                        // Здесь поместите код, который вы хотите выполнить через 5 секунд
                                        $("body").find(".payment_alert").remove();
                                    }

                                    setTimeout(myFunction, 5000);
                                    // var text = selectedValue + '_' + type_payment;
                                    // var lowercaseText = text.toLowerCase();
                                    // if (item[selectedValue] !== undefined &&
                                    //     lowercaseText !== undefined) {

                                    //     if (type_payment === 'monthly') {
                                    //         var orderData = {
                                    //             "order": {
                                    //                 "typeRid": "SaleOrder",
                                    //                 "language": "ru",
                                    //                 "amount": item[
                                    //                     selectedValue],
                                    //                 "currency": selectedValue,
                                    //                 "hppRedirectUrl": "https://forte.kz",
                                    //                 "description": "Test_tester"
                                    //             }
                                    //         }
                                    //     } else if (type_payment === 'yearly') {
                                    //         var orderData = {
                                    //             "order": {
                                    //                 "typeRid": "SaleOrder",
                                    //                 "language": "ru",
                                    //                 "amount": item[
                                    //                     selectedValue] * 12,
                                    //                 "currency": selectedValue,
                                    //                 "hppRedirectUrl": "https://forte.kz",
                                    //                 "description": "Test_tester"
                                    //             }
                                    //         }
                                    //     }



                                    //     // console.log(orderData)
                                    //     var url =
                                    //         'https://mobridge.io/api/v1/create/payment_order';
                                    //     var requestData = JSON.stringify(orderData);

                                    //     $.ajax({
                                    //         url: url, // Указываем URL для запроса
                                    //         type: 'POST', // Указываем метод POST
                                    //         data: requestData, // Преобразуем объект requestData в JSON строку
                                    //         contentType: 'application/json', // Указываем тип контента
                                    //         success: function(response) {
                                    //             console.log(response)
                                    //             // Обработка успешного ответа от сервера
                                    //             // window.open(response);
                                    //         },
                                    //         error: function(xhr, status,
                                    //             error) {
                                    //             // Обработка ошибок
                                    //             console.error(
                                    //                 'Ошибка AJAX запроса:',
                                    //                 error);
                                    //         }
                                    //     });


                                    // } else {

                                    // }
                                } else if (selectedValue === "USD" ||
                                    selectedValue === "EUR") {
                                    var alert =
                                        '<span class="payment_alert" style="position: fixed;top: 20px;right: 20px;background-color: rgba(255,0,0,0.7);border-radius: 5px;color: #fff;padding: 5px 15px;">Под USD/EUR нет платежного жлюза!!!<span/>';

                                    $("body").append(alert);

                                    function myFunction() {
                                        // Здесь поместите код, который вы хотите выполнить через 5 секунд
                                        $("body").find(".payment_alert").remove();
                                    }

                                    setTimeout(myFunction, 5000);
                                    // var text = selectedValue + '_' + type_payment;
                                    // var lowercaseText = text.toLowerCase();
                                    // if (item[selectedValue] !== undefined &&
                                    //     lowercaseText !== undefined) {

                                    //     if (type_payment === 'monthly') {
                                    //         var orderData = {
                                    //             "order": {
                                    //                 "typeRid": "SaleOrder",
                                    //                 "language": "ru",
                                    //                 "amount": item[
                                    //                     selectedValue],
                                    //                 "currency": selectedValue,
                                    //                 "hppRedirectUrl": "https://forte.kz",
                                    //                 "description": "Test_tester"
                                    //             }
                                    //         }
                                    //     } else if (type_payment === 'yearly') {
                                    //         var orderData = {
                                    //             "order": {
                                    //                 "typeRid": "SaleOrder",
                                    //                 "language": "ru",
                                    //                 "amount": item[
                                    //                     selectedValue] * 12,
                                    //                 "currency": selectedValue,
                                    //                 "hppRedirectUrl": "https://forte.kz",
                                    //                 "description": "Test_tester"
                                    //             }
                                    //         }
                                    //     }



                                    //     // console.log(orderData)
                                    //     var url =
                                    //         'https://mobridge.io/api/v1/create/payment_order';
                                    //     var requestData = JSON.stringify(orderData);

                                    //     $.ajax({
                                    //         url: url, // Указываем URL для запроса
                                    //         type: 'POST', // Указываем метод POST
                                    //         data: requestData, // Преобразуем объект requestData в JSON строку
                                    //         contentType: 'application/json', // Указываем тип контента
                                    //         success: function(response) {
                                    //             console.log(response)
                                    //             // Обработка успешного ответа от сервера
                                    //             // window.open(response);
                                    //         },
                                    //         error: function(xhr, status,
                                    //             error) {
                                    //             // Обработка ошибок
                                    //             console.error(
                                    //                 'Ошибка AJAX запроса:',
                                    //                 error);
                                    //         }
                                    //     });


                                    // } else {

                                    // }
                                }

                            }
                        });

                    },
                    error: function(xhr, status, error) {
                        // Обработка ошибок
                        console.error('Ошибка AJAX запроса:', error);
                    }
                });

            });

        });

        observer.observe($('#tariff')[0], {
            childList: true,
            subtree: true
        });

    }

    function handleResponseChangeAmount(response) {
        response.forEach(function(item) {
            // Действия с каждым элементом response
        });
    }

    function handleResponseChangeTypePayment(response) {
        response.forEach(function(item) {
            var selected_amount = $('#amount_selected').val();
            // console.log(item[selected_amount])

            var amount = '' + formatNumberWithCommas(item[selected_amount]) + ' <span>' + selected_amount +
                '</span> / мес';
            if (item[selected_amount] === 0) {
                amount = 'Бесплатно';
            } else if (item[selected_amount] === null) {
                amount = 'По запросу';
            }
            $('.box_' + item.id + ' .pack_price').text('')
            $('.box_' + item.id + ' .pack_price').append(amount)

        });
    }

    $(document).ready(function() {

    })
</script>