

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pact | Виджет для битрикса</title>
    <script src="https://api.bitrix24.com/api/v1/" defer></script>
  <script defer src="index.js"></script></head>
  <body>
    <div class="pact-bitrix">
      <div class="loader">
        <div class="lds-spinner">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>

      <div class="step-1" style="display: none">
        <div class="pact-bitrix__title">
          <h1 class="title h2" data-i18n="integration_steps.step_1.title">Настройка интеграции Pact.im + Bitrix24</h1>
        </div>

        <div class="pact-bitrix__steps text-main">
          <ol data-i18n="integration_steps.step_1.steps"></ol>
        </div>

        <div class="pact-bitrix__video">
          <div class="pact-bitrix__video-title">
            <p class="h6 h6_medium" data-i18n="integration_steps.step_1.video_title">Видео по работе интеграции</p>
          </div>

          <div class="pact-bitrix__video-iframe"></div>
        </div>

        <div class="pact-bitrix__info">
          <a class="text-main text-color_brand" href="https://www.pact.im/prices" target="_blank"
            data-i18n="integration_steps.step_1.info_link.text">Полная информация по тарифам и услугам</a
          >
        </div>
      </div>

      <div class="step-2" style="display: none">
        <div class="pact-bitrix__title">
          <h1 class="title h2 text-color_positive" data-i18n="integration_steps.step_2.title">Подключена интеграция Pact.im + Bitrix24</h1>
        </div>

        <div class="pact-bitrix__steps">
          <p class="pact-bitrix__step text-main" data-i18n="integration_steps.step_2.description"></p>
        </div>
      </div>

      <div class="step-connector-openlines" style="display: none">
        <div class="pact-bitrix__title">
          <h1 class="title h2 text-color_positive" data-i18n="integration_steps.step_connector_openlines.title">Коннектор подключен к открытой линии</h1>
        </div>
      </div>

      <div class="step-completed" style="display: none">
        <div class="pact-bitrix__title">
          <h1 class="title h2" data-i18n="page.title">Отправка сообщения</h1>
        </div>

        <div class="pact-bitrix__form">
          <form class="form">
            <div class="form-group" id="providers_wrapper">
              <label class="form__label" for="messengers">
                <span class="caption form-group__label" data-i18n="form.messengers.label">Мессенджер</span>

                <select class="select" id="messengers" name="provider"></select>
              </label>
            </div>

            <div class="form-group" id="companies_wrapper">
              <label class="form__label" for="companies">
                <span class="caption form-group__label" data-i18n="form.companies.label">Компания</span>

                <select class="select" id="companies" name="company_id"></select>
              </label>
            </div>

            <div class="form-group" id="send-type_wrapper">
              <label class="form__label" for="send_type">
                <span class="caption form-group__label" data-i18n="form.send_type.label">Способ отправки</span>

                <select class="select" id="send_type" name="send_type"></select>
              </label>
            </div>

            <div class="form-group" id="recipient_custom_field_wrapper">
              <label class="form__label" for="custom_field">
                <span class="caption form-group__label" data-i18n="form.custom_field.label">Пользовательское поле</span>

                <select class="select" id="custom_field" name="custom_field"></select>
              </label>
            </div>

            <div class="form-group" id="manual_recipient_wrapper">
              <label class="form__label" for="manual_recipient">
                <span class="caption">Получатель</span>

                <input class="input full-width" type="text" id="manual_recipient" />
              </label>
            </div>

            <div class="form-group waba" id="waba_templates_wrapper">
              <label class="form__label" for="waba_templates">
                <span class="caption form-group__label" data-i18n="form.waba_templates.label">Шаблон</span>

                <select class="select" id="waba_templates" name="template_id"></select>
              </label>
            </div>

            <div class="form-group waba" id="waba-header__wrapper">
              <div class="form__label" for="waba-header">
                <span class="caption form-group__label" data-i18n="form.waba_header.label">Заголовок</span>

                <div class="flex flex_between flex_column"></div>

                <input class="input full-width" id="waba-header" type="text" disabled >
                </div>
              </label>
            </div>

            <div class="form-group waba" id="waba_template_text_wrapper"></div>

            <div class="form-group waba" id="waba_substitutions_wrapper">
              <label class="form__label">
                <span class="caption form-group__label" data-i18n="form.waba_substitutions.label">Подстановки</span>
                <div class="substitutions"></div>
              </label>
            </div>

            <div class="form-group exclude-for-robot" id="phone_wrapper">
              <div class="form__label" for="phone">
                <span class="caption form-group__label" data-i18n="form.phone.default.label">Телефон</span>

                <div class="flex flex_between flex_column"></div>

                <select class="select" id="phone" name="recipient"></select>
                </div>
              </label>
            </div>

            <div class="form-group full-width" id="text_wrapper">
              <label class="form__label" for="message">
                <span class="caption form-group__label" data-i18n="form.message.label">Сообщение</span>

                <textarea class="textarea" id="message" name="text" data-i18n="form.message.placeholder" placeholder="Напишите..."></textarea>
              </label>
            </div>

            <div class="form-group form-file-uploader" id="file_wrapper">
              <label class="form-file-uploader__label">
                <input class="visually-hidden" type="file" name="file" accept="*" />

                <span class="form-file-uploader__caption button button_secondary" data-i18n="form.file_uploader.label">Выбрать файл</span>

                <div class="flex flex_align-baseline">
                  <span class="caption form-file-uploader__file-name"></span>
                  <span class="caption form-file-uploader__delete-file" area-label="Удалить файл" title="Удалить файл">&times;</span>
                </div>
              </label>
            </div>

            <div class="form-publish">
              <input
                class="checkbox"
                type="checkbox"
                id="create_open_line_while_send"
                name="create_open_line_while_send"
                checked
              />

              <label class="checkbox__label" for="create_open_line_while_send" data-i18n="form.checkboxes.publish_in_chat">Публиковать в чате</label>
            </div>

            <div class="form-action exclude-for-robot">
              <button class="button" type="submit" data-i18n="form.buttons.submit">Отправить</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </body>
</html>