<?
require($_SERVER['DOCUMENT_ROOT'] . '/bitrix/header.php');
$APPLICATION->SetTitle("Онлайн оплата"); ?>
<?
// check 404
if(!$_SESSION['CURRENT_LOCATION']['CURRENT']['IS_DEFAULT']){
    Bitrix\Iblock\Component\Tools::process404('Страница не найдена', true, true, true, '/404.php');
}
?>
    <main class="page page-payment">
        <div class="page__wrapper">
            <div class="page__head">
                <div class="page__container">
                    <div class="page__breadcrumbs">
                        <div class="breadcrumbs no_scrollbar">
                            <? $APPLICATION->IncludeComponent(
                                "bitrix:breadcrumb",
                                "main",
                                array(
                                    "PATH" => "",
                                    "SITE_ID" => "s1",
                                    "START_FROM" => "0"
                                )
                            ); ?>
                        </div>
                    </div>
                    <h1 class="page__title">Онлайн оплата</h1>
                </div>
            </div>
            <div class="page__body">
                <div class="payment-page content-page">
                    <div class="payment-page__feedback content-page__section">
                        <section class="payment-section section">
                            <div class="section__container">
                                <div class="section__block">
                                    <div class="block">
                                        <div class="block__body">
                                            <div class="payment-block">
                                                <div class="payment-block__grid">
                                                    <div class="payment-block__form">
                                                        <div class="form-payment-box">
                                                            <div class="form-payment-box__wrapper">
                                                                <div class="form-payment-box__row">
                                                                    <div class="form-payment-box__logo">
                                                                        <img src="<?= SITE_TEMPLATE_PATH ?>/img/payment/yookassa.svg" alt="image" width="160" height="38" loading="lazy"/>
                                                                    </div>
                                                                    <? if($error) { ?>
                                                                        <p class="error_msg"><?= $error;?></p>
                                                                    <? } ?>
                                                                    <form class="form-payment-box__form form form-payment" method="post">
                                                                        <div class="form__items form-items">
                                                                            <div class="form__item form-item">
                                                                                <label class="form__label form-label">
                                                                                    <div class="form__input form-input">
                                                                                        <input class="js_tel-mask"
                                                                                               type="text"
                                                                                               name="phone"
                                                                                               autocomplete="on"
                                                                                               placeholder="Ваш телефон"
                                                                                               value="<?= $phone;?>"
                                                                                               required/>
                                                                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#E60805" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 8V12" stroke="#E60805" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 16H12.01" stroke="#E60805" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                                                                    </div>
                                                                                    <div class="form__err-msg form-err-msg">Поле обязательно для заполнения</div>
                                                                                </label>
                                                                            </div>
                                                                            <?/*<div class="form__item form-item">
                                                                                <label class="form__label form-label">
                                                                                    <div class="form__input form-input">
                                                                                        <input type="email"
                                                                                               name="email"
                                                                                               autocomplete="off"
                                                                                               placeholder="Введите Email"
                                                                                               value="<?= $email;?>"
                                                                                               required/>
                                                                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#E60805" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 8V12" stroke="#E60805" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 16H12.01" stroke="#E60805" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                                                                    </div>
                                                                                    <div class="form__err-msg form-err-msg">Поле обязательно для заполнения</div>
                                                                                </label>
                                                                            </div>*/?>
                                                                            <div class="form__item form-item">
                                                                                <label class="form__label form-label">
                                                                                    <div class="form__input form-input">
                                                                                        <input type="text"
                                                                                               name="price"
                                                                                               autocomplete="off"
                                                                                               placeholder="Введите сумму платежа"
                                                                                               value="<?= $price;?>"
                                                                                               required/>
                                                                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#E60805" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 8V12" stroke="#E60805" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 16H12.01" stroke="#E60805" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                                                                    </div>
                                                                                    <div class="form__err-msg form-err-msg">Поле обязательно для заполнения</div>
                                                                                </label>
                                                                            </div>
                                                                        </div>
                                                                        <div class="form-payment-box__btn">
                                                                            <div class="btn-1 js_payment_btn">Выбрать способ оплаты</div>
                                                                        </div>
                                                                        <? if ($GLOBALS['SITE_SETTINGS']['PROPERTIES']['PERSONAL_DATA']['VALUE']) { ?>
                                                                            <label class="field-checkbox field-checkbox_w">
                                                                                <input type="checkbox" value="1" name="agree">
                                                                                <span></span>
                                                                                Я соглашаюсь с Политикой конфиденциальности и даю согласие на
                                                                                <a href="/politika/" target="_blank">обработку персональных данных.</a>
                                                                            </label>

                                                                            <?/*<div class="payment-block__text agreement-text">
                                                                            Я соглашаюсь с Политикой конфиденциальности и даю согласие на
                                                                            <a href="<?= CFile::GetPath($GLOBALS['SITE_SETTINGS']['PROPERTIES']['PERSONAL_DATA']['VALUE']) ?>">обработку персональных данных.</a>
                                                                        </div>*/?>
                                                                        <? } ?>
                                                                    </form>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="payment-block__info">
                                                        <? if ($GLOBALS['SITE_SETTINGS']['PROPERTIES']['SPLIT_INFO']['VALUE']) { ?>
                                                            <div class="info-payment">
                                                                <div class="info-payment__outer">
                                                                    <div class="info-payment__logo">
                                                                        <a class="logo-split" href="#">
                                                                            <img src="<?= SITE_TEMPLATE_PATH ?>/img/split.svg" alt="image" width="178" height="40" loading="lazy"/>
                                                                        </a>
                                                                    </div>
                                                                    <div class="info-payment__wrapper">
                                                                        <div class="info-payment__row">
                                                                            <div class="info-payment__body">
                                                                                <div class="info-payment__title title-1">Примем в ремонт хоть целую тележку — без очереди</div>
                                                                                <div class="info-payment__advantages">
                                                                                    <div class="advantages-box">
                                                                                        <ul class="list-advantages-box">
                                                                                            <? foreach ($GLOBALS['SITE_SETTINGS']['PROPERTIES']['SPLIT_INFO']['VALUE'] as $key => $resItem) { ?>
                                                                                                <li class="list-advantages-box__item">
                                                                                                    <div class="item-advantages-box">
                                                                                                        <div class="item-advantages-box__ico">
                                                                                                            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_10658_30)"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0.898438 9.00312C0.898438 8.00899 1.35175 7.20312 1.91094 7.20312H16.0859C16.6451 7.20312 17.0984 8.00899 17.0984 9.00312C17.0984 9.99726 16.6451 10.8031 16.0859 10.8031H1.91094C1.35175 10.8031 0.898438 9.99726 0.898438 9.00312Z" fill="#F67600"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.99922 17.0984C8.00508 17.0984 7.19922 16.6451 7.19922 16.0859V1.91094C7.19922 1.35175 8.00508 0.898438 8.99922 0.898438C9.99336 0.898438 10.7992 1.35175 10.7992 1.91094V16.0859C10.7992 16.6451 9.99336 17.0984 8.99922 17.0984Z" fill="#F67600"></path> </g> <defs> <clipPath id="clip0_10658_30"> <rect width="18" height="18" fill="white"></rect> </clipPath> </defs> </svg>
                                                                                                        </div>
                                                                                                        <div class="item-advantages-box__body"><div class="item-advantages-box__text"><?= $resItem ?></div></div>
                                                                                                    </div>
                                                                                                </li>
                                                                                            <? } ?>
                                                                                        </ul>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="info-payment__img-wrap hidden-tablet">
                                                                                <div class="info-payment__img">
                                                                                    <div class="info-payment__img-item ibg ibg_contain">
                                                                                        <img src="<?= SITE_TEMPLATE_PATH ?>/img/telejka.webp" alt="image" width="300" height="247" loading="lazy"/>

                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        <? } ?>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
                <div id="payment-form"></div>
            </div>
        </div>
    </main>
    <script src="https://yookassa.ru/checkout-widget/v1/checkout-widget.js"></script>
    <script>
        $(function(){
            var loading = false;
            $(document).on('click', '.js_payment_btn', function(e){
                if(loading){
                    return false;
                }
                loading = true;

                let $form = $(this).parents('form');

                if($form.length){
                    let $phoneField = $form.find('[name="phone"]'),
                        //$emailField = $form.find('[name="email"]'),
                        $priceField = $form.find('[name="price"]'),
                        $agreefield = $form.find('[name="agree"]');

                    if($phoneField.length && /*$emailField.length && */$priceField.length){
                        let phoneVal = $phoneField.val(),
                            //emailVal = $emailField.val(),
                            priceVal = $priceField.val(),
                            $agreeVal = $agreefield.is(':checked')? 'Y' : '';

                        $.ajax({
                            type: "POST",
                            url: "/ajax/online_payment.php",
                            data: {phone: phoneVal,/* email: emailVal, */price: priceVal, agree: $agreeVal},
                            dataType: "json",
                            success: function(data) {
                                if(data.TOKEN){
                                    //Инициализация виджета. Все параметры обязательные.
                                    const checkout = new window.YooMoneyCheckoutWidget({
                                        confirmation_token: data.TOKEN,
                                        return_url: 'https://ok-center.ru/onlayn-oplata/',
                                        customization: {
                                            modal: true,
                                            colors: {
                                                //Цвет акцентных элементов: кнопка Заплатить, выбранные переключатели, опции и текстовые поля
                                                //background: '#0D182F', // Цвет фона платежной формы
                                                control_primary: '#f67600', // Цвет кнопки Заплатить и других акцентных элементов
                                                control_primary_content: '#FFFFFF', // Цвет текста кнопки Заплатить
                                                control_secondary: '#cccbcb', // Цвет неакцентных элементов интерфейса
                                                /*border: '#244166', // Цвет границ и разделителей
                                                text: '#DBDCE0' // Цвет текста*/
                                            }
                                        },
                                        error_callback: function(error) {
                                            console.log(error)
                                        }
                                    });
                                    checkout.on('modal_close', () => {
                                        //Код, который нужно выполнить после закрытия всплывающего окна.
                                        loading = false;
                                        checkout.destroy();
                                    });
                                    checkout.on('complete', () => {
                                        //Код, который нужно выполнить после оплаты.
                                        loading = false;
                                        alert('Оплата завершена. Пока ничего не делаем, ждем, сменит ли банк статус оплаты в админке');
                                        //Удаление инициализированного виджета
                                        checkout.destroy();
                                    });

                                    //Отображение платежной формы в контейнере
                                    checkout.render('payment-form');
                                } else if(data.MESSAGE){
                                    loading = false;
                                    showNotification(data.MESSAGE, false, 3000);
                                }
                            },
                        });
                    } else {
                        loading = false;
                    }
                }
            });
        });
    </script>
<? require($_SERVER['DOCUMENT_ROOT'] . '/bitrix/footer.php');