@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>
    <div class="row mt-4" id="price_content">
        <div class="col-12" id="payment_day_info">
            <p><span style='color:red;margin-bottom: 10px'>*</span> Продление подписки производится из расчёта 1 месяц =
                30 дней</p>
        </div>
    </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">
                        <input id="admins" type="text" disabled></input>
                        <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_v1.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="Если вы используете экспорт в json, то обновленные данные будут доступны после очистки кэша." data-position="top" class="top"><img src="{{ asset('storage/connector/images/warning_v1.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>
<div id="modalPayment" class="modal">
    <div class="modal-content d-flex">
        <div class="payment_content">
            <h3>Выберите тип оплаты</h3>
            <div class="d-flex">
                <div class="payments_type" id="forte">
                    <img src="{{ asset('storage/connector/images/world.svg') }}" alt="">
                    <p>Оплата картой (кроме РФ)</p>
                </div>
                <div class="payments_type" id="robo">
                    <img src="{{ asset('storage/connector/images/russian.svg') }}" alt="">
                    <p>Оплата картой РФ</p>
                </div>
                <div class="payments_type" id="invoice">
                    <img src="{{ asset('storage/connector/images/quote.svg') }}" alt="">
                    <p>Счет на оплату (для Казахстана)</p>
                </div>
            </div>
            <span class="close"><img src="{{ asset('storage/connector/images/close.png') }}" alt=""></span>
        </div>
    </div>
</div>
@include('Bitrix24.connector_footer')
<script>
    var url = 'https://toolpack.masnaget.digital/api/v1/connector/bitrix24/price/monthly'
    fetchData(url)

    $(document).ready(function() {



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

            var buttonId = $(this).attr('id');
            var url = 'https://toolpack.masnaget.digital/api/v1/connector/bitrix24/price/' + buttonId;
            console.log(buttonId)
            if (buttonId === 'monthly') {
                $("#payment_day_info").html(
                    "<p><span style='color:red;margin-bottom: 10px'>*</span> Продление подписки производится из расчёта 1 месяц = 30 дней</p>"
                )
                $(".discount").css('display', 'none');
            } else if (buttonId === 'yearly') {
                $("#payment_day_info").html(
                    "<p><span style='color:red;margin-bottom: 10px'>*</span> Продление подписки производится из расчёта 1 год = 12 х 30 дней = 360 дней</p>"
                )
                var discount =
                    '<div class="discount"><p>-20%</p></div>'; // Создаем HTML-код для элемента с классом "discount"
                $(".price_box").append(discount);
            }
            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 amount = '' + item.KZT + ' <span>KZT</span> / мес <d style="color:red;">*</d>';
                        var amount_other = '~ ' + item.USD + ' <span>USD</span> / мес <d style="color:red;">*</d><br>' + '~ ' + item.EUR + ' <span>EUR</span> / мес <d style="color:red;">*</d><br>' + '' + item.RUR + ' <span>RUR</span> / мес <d style="color:red;">*</d><br>';
                        if (item.KZT === 0 || item.USD === 0 || item.EUR === 0 || item.RUR === 0) {
                            amount = 'Бесплатно';
                            amount_other = '<br><br><br>';
                        } else if (item.KZT === null || item.USD === null || item.EUR === null || item.RUR === null) {
                            amount = 'По запросу';
                            amount_other = '<br><br><br>';
                        }

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

                        if ('pack_' + tariff_now === 'pack_' + item.id) {
                            var template =
                                `<div class="col-md-3">
                                    <div class="price_box box_` + item.id + `" style="box-shadow:0 0 15px rgba(0, 104, 210, 1)">
                                        <div class="text-center">
                                            <h2 class="pack_title">` + item.title + `</h2>
                                            <h3 class="pack_price">` + amount + `</h3>
                                            <p class="other_price">` + amount_other + `</p>
                                            <button id="pack_` + item.id + `" data-id="` + item.id + `">` + button_txt + `</button>
                                        </div>
                                        <ul class="options_` + item.id + `">
                                           
                                        </ul>
                                    </div>
                                </div>`;
                            $('#price_content').append(template)
                            $("#pack_" + item.id).text('Продлить');

                        } else if ('pack_' + tariff_now !== 'pack_' + item.id) {
                            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>
                                            <p class="other_price">` + amount_other + `</p>
                                            <button id="pack_` + item.id + `" class="clicker" data-id="` + item.id + `">` + button_txt + `</button>
                                        </div>
                                        <ul class="options_` + item.id + `">
                                           
                                        </ul>
                                    </div>
                                </div>`;
                            $('#price_content').append(template)
                            $(".clicker").each(function() {
                                if ($(this).attr('id') === 'pack_1') {
                                    // ваш код, который будет выполнен, если у элемента с классом clicker id равен pack_1
                                    $(this).text('По умолчанию');
                                    $(this).attr('disabled', 'true');
                                    $(this).removeAttr('class');
                                    $(".discount").css('display', 'none');
                                }
                            });
                        }

                        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").on('click', function() {
                $('.b24-widget-button-openline_livechat span').trigger('click');
            });
            $(".clicker").on('click', function() {
                var type_payment = $('.type_payment a.active').attr('id');
                var tariff_id = $(this).attr('data-id');

                $('#modalPayment').show()
                $("#forte").attr('data-type', type_payment).attr('data-id', tariff_id);

            });
        });

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

    }

    function handleResponseChangeAmount(response) {
        response.forEach(function(item) {
            // console.log(response)
        });
    }

    function handleResponseChangeTypePayment(response) {
        response.forEach(function(item) {

            var amount = '' + item.KZT + ' <span>KZT</span> / мес <d style="color:red;">*</d>';
            var amount_other = '~ ' + item.USD + ' <span>USD</span> / мес <d style="color:red;">*</d><br>' + '~ ' + item.EUR + ' <span>EUR</span> / мес <d style="color:red;">*</d><br>' + '' + item.RUR + ' <span>RUR</span> / мес <d style="color:red;">*</d><br>';
            if (item.KZT === 0 || item.USD === 0 || item.EUR === 0 || item.RUR === 0) {
                amount = 'Бесплатно';
                amount_other = '<br><br><br>';
            } else if (item.KZT === null || item.USD === null || item.EUR === null || item.RUR === null) {
                amount = 'По запросу';
                amount_other = '<br><br><br>';
            }
            $('.box_' + item.id + ' .pack_price').text('')
            $('.box_' + item.id + ' .pack_price').append(amount)
            $('.box_' + item.id + ' .other_price').text('')
            $('.box_' + item.id + ' .other_price').append(amount_other)
        });
    }

    $(document).ready(function() {
        $("#forte").on('click', function() {
            var domain = BX24.getDomain();
            var type_payment = $(this).attr('data-type')
            var token = $("#domain_token").val()
            var tarrif_id = parseInt($(this).attr('data-id'));
            var url = 'https://toolpack.masnaget.digital/api/v1/connector/bitrix24/price/' +
                type_payment;
            $.ajax({
                url: url, // Указываем URL для запроса
                type: 'GET', // Указываем метод POST
                contentType: 'application/json', // Указываем тип контента
                success: function(response) {
                    var orderData = [];
                    // Обработка успешного ответа от сервера
                    response.forEach(function(item) {
                        // var tariff = $(this).attr('data-id')
                        console.log(item.id , tarrif_id)
                        if (type_payment === 'monthly' && item.id === tarrif_id) {
                            orderData = {
                                "order": {
                                    "typeRid": "Order_RID",
                                    "language": "ru",
                                    "amount": item.KZT,
                                    "currency": 'KZT',
                                    "hppRedirectUrl": "https://masnaget.digital",
                                    "description": 'Подписка "' +
                                        item.title +
                                        '" на Bitrix24 Data Connector для ' +
                                        domain +
                                        ' (1 мес.)'
                                },
                                "connector": {
                                    "tariff_id": tarrif_id,
                                    "payed_months": 1,
                                    "payment_type": 'forte_connector'
                                }
                            }
                        } else if (type_payment === 'yearly' && item.id === tarrif_id) {
                            orderData = {
                                "order": {
                                    "typeRid": "Order_RID",
                                    "language": "ru",
                                    "amount": item.KZT * 12,
                                    "currency": 'KZT',
                                    "hppRedirectUrl": "https://masnaget.digital",
                                    "description": 'Подписка "' +
                                        item.title +
                                        '" на Bitrix24 Data Connector для ' +
                                        domain +
                                        ' (12 мес.)'
                                },
                                "connector": {
                                    "tariff_id": tarrif_id,
                                    "payed_months": 12,
                                    "payment_type": 'forte_connector'
                                }
                            }
                        } 
                    });
                    // console.log(orderData)
                    var url =
                        'https://toolpack.masnaget.digital/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);
                        }
                    });

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

    })
</script>