<?php
/**
 * Кабинет пользователя > Настройки > User
 * @var $on array настройки формы: 'contacts' - контакты, 'phone' - редактирование номера телефона, 'email' - редактирование email
 * @var $social array провайдеры авторизации через соц. сети
 * @var $channels array каналы для уведомлений от сервиса
 * @var $enotify array подписка на уведомления от сервиса
 * @var $enotify_types array типы уведомления от сервиса
 * @var $sms_premium bool отправка смс доступна только премиум объявлениям
 * @var $aData array
 */
$aData = HTML::escape($aData, 'html', ['email', 'phone_number', 'name', 'addr_addr', 'region_title']);
?>
<div class="row active" id="j-my-settings-user">
    <div class="col-xl-6">
        <div class="usr-settings-box vw-white-box p-0">
            <div class="dr-collapse-act">
                <span class="c-title h3"><?= _t('users', 'Contact Information') ?></span>
            </div>
            <div class="usr-settings-box-content j-block j-block-contacts">
                <form class="c-form-creation p-0 j-form-contacts" action="">
                    <input type="hidden" name="act" value="contacts"/>
                    <div class="form-row">
                        <div class="col-md-4 control-label"><?= _t('users', 'Avatar') ?></div>
                        <div class="col usr-settings-photo-box">
                            <div class="usr-settings-photo-box-l">
                                <img class="usr-settings-photo rounded-circle" src="<?= $avatar_normal ?>" id="j-my-avatar-img" alt=""/>
                                <span class="c-loader j-progress hidden"></span>
                            </div>
                            <div class="usr-settings-photo-box-r">
                                <div class="d-flex justify-content-center justify-content-md-start">
                                    <a class="btn btn-simple btn-shadow" id="j-my-avatar-upload" href="javascript:void(0);"><?= _t('users', 'Add Photo') ?></a>
                                    <a class="c-ico-link c-ico-link-hover ml-4 <?= empty($avatar) ? 'hidden' : '' ?>" id="j-my-avatar-remove" href="javascript:void(0);"><i class="ico fas fa-trash-alt mr-0"></i></a>
                                </div>
                                <div class="fs-12 grey-text mt-2"><?= _t('users', 'Recommended size [size].', ['size' => '200Ñ…200 px']) ?></div>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <label class="col-md-4 control-label"><?= _t('users', 'Contact Person') ?><span class="required-mark">*</span></label>
                        <div class="col">
                            <input type="text" name="name" value="<?= $name ?>" class="form-control j-required" maxlength="50"/>
                        </div>
                    </div>
                    <?php if ($on['contacts']) { ?>
                    <hr>
                    <div class="mb-3" id="j-my-geo">
                        <div class="c-form-sub-title c-title h3"><?= _t('users', 'Contacts For Connecting Users With You') ?></div>
                        <div class="form-row">
                            <label class="col-md-4 control-label"><?= _t('users', 'Contacts') ?></label>
                            <div class="col">
                                <div class="form-row-item" id="j-my-phones"></div>
                                <?php foreach (Users::contactsFields() as $contact): ?>
                                    <div class="form-row-item form-row-contact">
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="grey-icon <?= $contact['icon'] ?>"></i></span>
                                            <input type="text" class="form-control"
                                                   name="contacts[<?= $contact['key'] ?>]"
                                                   value="<?= isset($contacts[$contact['key']]) ? HTML::escape($contacts[$contact['key']]) : '' ?>"
                                                   placeholder="<?= $contact['title'] ?>"
                                                   maxlength="<?= $contact['maxlength'] ?>"/>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        </div>
                        <div class="form-row">
                            <label class="col-md-4 control-label"><?= _t('users', 'City') ?></label>
                            <div class="col">
                                <?= Geo::citySelect($geo_city, true, 'geo_city', array(
                                    'on_change' => 'jUsersMySettings.onCitySelect',
                                    'form' => 'users-settings',
                                )); ?>
                            </div>
                        </div>
                        <div id="j-my-geo-addr">
                            <div class="form-row">
                                <label class="col-md-4 control-label"><?= _t('users', 'Exact Address') ?></label>
                                <div class="col">
                                    <input type="hidden" name="addr_lat" id="j-my-geo-addr-lat"
                                           value="<?= $addr_lat ?>"/>
                                    <input type="hidden" name="addr_lon" id="j-my-geo-addr-lon"
                                           value="<?= $addr_lon ?>"/>
                                    <input type="text" class="form-control" name="addr_addr"
                                           id="j-my-geo-addr-addr"
                                           value="<?= $addr_addr ?>"/>
                                </div>
                            </div>
                            <div id="j-my-geo-addr-map" class="i-formpage__map_desktop" style="height: 250px; width: 100%;"></div>
                        </div>
                    </div>
                    <hr>
                    <?php } # on['contacts'] ?>
                    <div class="d-flex justify-content-center">
                        <input type="submit" class="btn btn-success" value="<?= _te('users', 'Save') ?>"/>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="col-xl-6">
        <?php if (!empty($social)) { ?>
            <div class="usr-settings-box usr-settings-box-collapse vw-white-box p-0">
                <a href="javascript:void(0);" class="dr-collapse-act collapsed active j-block-toggler" data-block="social">
                    <span class="c-title h3"><?= _t('users', 'Social Networks') ?></span>
                    <span class="c-drop-arrow j-icon"></span>
                </a>
                <div class="usr-settings-box-content j-block j-block-social">
                    <form action="">
                        <div class="mb-3">
                            <?= _t('users', 'To speed up the authorization process, you can use your accounts in social networks') ?>:
                        </div>
                        <div class="c-social-links-wrap d-flex justify-content-center justify-content-md-start flex-wrap">
                            <?php foreach ($social as $k => $v) { ?>
                                <a href="#"
                                   class="c-social-link c-social-link-<?= $v['class'] ?><?php if (isset($v['user'])) { ?> active<?php } ?> j-my-social-btn"
                                   data="{provider:'<?= $v['key'] ?>',w:<?= $v['w'] ?>,h:<?= $v['h'] ?>}">
                                    <?= HTML::inlineSvg(bff::url('/img/social/c-' . $v['key'] . '.svg'), ['ico']) ?>
                                </a>
                            <?php } ?>
                        </div>
                    </form>
                </div>
            </div>
        <?php } ?>
        <div class="usr-settings-box usr-settings-box-collapse vw-white-box p-0">
            <a href="javascript:" class="dr-collapse-act collapsed active j-block-toggler" data-block="notifications">
                <span class="c-title h3"><?= _t('users', 'Notification Settings') ?></span>
                <span class="c-drop-arrow j-icon"></span>
            </a>
            <div class="usr-settings-box-content j-block j-block-notifications">
                <form class="j-form-channels" action="">
                <input type="hidden" name="act" value="enotify"/>
                <table class="usr-push-table table d-none d-md-table">
                    <tr>
                        <th></th>
                        <?php foreach ($channels as $k => $v) { ?>
                        <th><?= $v['t'] ?></th>
                        <?php } ?>
                    </tr>
                    <?php foreach ($enotify_types as $k => $v) { ?>
                    <tr>
                        <td class="pl-0 text-left"><?= $v['title'] ?></td>
                        <?php foreach ($channels as $kk => $vv) {
                            $field = false;
                            $active = false;
                            if (!empty($aData[ $vv['field'] ][$k])) {
                                $field = $vv['field'];
                                $active = $aData[$field][$k]['a'] ?? 0;
                            }
                            ?>
                        <td>
                            <label class="form-check-label">
                                <input type="checkbox" class="j-my-enotify-check" value="<?= $k ?>" <?= $field ? 'name="' . $field . '[]"' : 'disabled' ?> <?= $active ? 'checked="checked"' : '' ?>/>
                                <span class="ico-check"><i class="fas fa-check"></i></span>
                            </label>
                        </td>
                        <?php } ?>
                    </tr>
                    <?php } ?>
                </table>
                </form>

                <!--mobile-->
                <form class="j-form-channels" action="">
                    <input type="hidden" name="act" value="enotify"/>
                <div class="usr-push-table-mob d-md-none">
                    <div class="fl-dyn-dropdown-header nav nav-tabs" role="tablist">
                        <?php foreach ($channels as $k => $v) { ?>
                        <a href="#j-usr-tab-toggle-<?= $k ?>" class="fl-dyn-dropdown-header-act nav-item nav-link <?= $k == Sendmail::CHANNEL_EMAIL ? 'active' : '' ?>" data-toggle="tab"><?= $v['t'] ?></a>
                        <?php } ?>
                    </div>
                    <div class="tab-content">
                        <?php foreach ($channels as $k => $v) { ?>
                        <div class="tab-pane <?= $k == Sendmail::CHANNEL_EMAIL ? 'active' : '' ?>" id="j-usr-tab-toggle-<?= $k ?>">
                            <?php foreach ($enotify_types as $kk => $vv) {
                                $field = false;
                                $active = false;
                                if (!empty($aData[ $v['field'] ][$kk])) {
                                    $field = $v['field'];
                                    $active = $aData[$field][$kk]['a'] ?? 0;
                                }
                            ?>
                            <label class="usr-push-table-mob-item">
                                <div class="usr-push-table-mob-item-l"><?= $vv['title'] ?></div>
                                <div class="usr-push-table-mob-item-r form-check-label switch">
                                    <input type="checkbox" class="j-my-enotify-check" value="<?= $kk ?>" <?= $field ? 'name="' . $field . '[]"' : 'disabled' ?> <?= $active ? 'checked="checked"' : '' ?>/>
                                    <span class="slider">
                                        <span class="round">
                                          <span class="slider-round">
                                            <i class="ico-yes fas fa-check"></i>
                                            <span class="ico-no">✕</span>
                                          </span>
                                        </span>
                                      </span>
                                </div>
                            </label>
                            <?php } ?>
                        </div>
                        <?php } ?>
                    </div>
                </div>
                </form>
                <?php if ($sms_premium) { ?>
                    <div class="grey-text mt-3"><?= _t('users', 'SMS notifications are sent only for listings with the active "Premium" service')  ?></div>
                <?php } ?>
            </div>
        </div>
        <div class="usr-settings-box usr-settings-box-collapse vw-white-box p-0">
            <a href="javascript:void(0);" class="dr-collapse-act collapsed j-block-toggler" data-block="pass">
                <span class="c-title h3"><?= _t('users', 'Change Password') ?></span>
                <span class="c-drop-arrow j-icon"></span>
            </a>
            <div class="usr-settings-box-content hide j-block j-block-pass">
                <form class="c-form-creation p-0 j-form-pass" action="">
                    <input type="hidden" name="act" value="pass"/>
                    <div class="form-row">
                        <label class="col-md-4 control-label nowrap"><?= _t('users', 'Current Password') ?><span class="required-mark">*</span></label>
                        <div class="col">
                            <input type="password" class="form-control j-required" name="pass0"
                                   maxlength="100" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="form-row">
                        <label class="col-md-4 control-label"><?= _t('users', 'New Password') ?><span class="required-mark">*</span></label>
                        <div class="col">
                            <input type="password" class="form-control j-required" name="pass1" maxlength="100"/>
                        </div>
                    </div>
                    <div class="form-row">
                        <label class="col-md-4 control-label"><?= _t('users', 'Repeat Password') ?><span class="required-mark">*</span></label>
                        <div class="col">
                            <input type="password" class="form-control j-required" name="pass2" maxlength="100"/>
                        </div>
                    </div>
                    <div class="d-flex justify-content-center justify-content-lg-start">
                        <input type="submit" class="btn btn-success" value="<?= _te('users', 'Change Password') ?>"/>
                    </div>
                </form>
            </div>
        </div>
        <?php if ($on['phone']) { ?>
            <div class="usr-settings-box usr-settings-box-collapse vw-white-box p-0" style="z-index: 12;">
                <a href="javascript:void(0);" class="dr-collapse-act collapsed j-block-toggler" data-block="phone">
                    <span class="c-title h3"><?= _t('users', 'Change phone number') ?></span>
                    <span class="c-drop-arrow j-icon"></span>
                </a>
                <div class="usr-settings-box-content hide j-block j-block-phone">
                    <form class="c-form-creation p-0 j-form-phone" action="">
                        <input type="hidden" name="act" value="phone"/>
                        <input type="hidden" name="save" value=""/>
                        <div class="form-row">
                            <label class="col-md-4 control-label nowrap"><?= _t('users', 'Your phone number') ?>:</label>
                            <div class="col">
                                <div class="d-flex align-items-center flex-nowrap">
                                    <input type="text" class="form-control" name="phone0"
                                           value="<?= (!empty($phone_number) ? '+' . $phone_number : _t('users', 'Not specified')) ?>"
                                           disabled="disabled"/>
                                    <?php if ($phone_number_verified && !empty($phone_number)) { ?>
                                        <i class="fas fa-check-circle ml-2 text-success"></i>
                                    <?php } ?>
                                </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <label class="col-md-4 control-label nowrap"><?= _t('users', 'New phone number') ?><span class="required-mark">*</span></label>
                            <div class="col j-phone-change-step1">
                                <?= Users::i()->registerPhoneInput(['name' => 'phone', 'autocomplete' => 'off']) ?>
                            </div>
                            <div class="col j-phone-change-step2" style="display: none;">
                                <input type="text" name="code" class="form-control j-phone-change-code"
                                       placeholder="<?= _te('users', 'Enter the code from SMS') ?>"/>
                                <div class="mt-1">
                                    <a href="#" class="c-link-ajax fs-12 j-phone-change-repeate"><span><?= _t('users', 'Send code again') ?></span></a><br>
                                    <a href="#" class="c-link-ajax fs-12 j-phone-change-back"><span><?= _t('users', 'Change number') ?></span></a>
                                </div>
                                <div class="alert alert-warning mrgb0 mrgt10"
                                     style="display: none;"></div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-center justify-content-lg-start">
                            <input type="submit" class="btn btn-success" value="<?= _te('users', 'Change') ?>"/>
                        </div>
                    </form>
                </div>
            </div>
        <?php } ?>
        <?php if ($on['email']) { ?>
            <div class="usr-settings-box usr-settings-box-collapse vw-white-box p-0">
                <a href="javascript:void(0);" class="dr-collapse-act collapsed j-block-toggler" data-block="email">
                    <span class="c-title h3"><?= _t('users', 'Change Email Address') ?></span>
                    <span class="c-drop-arrow j-icon"></span>
                </a>
                <div class="usr-settings-box-content hide j-block j-block-email">
                    <form class="c-form-creation p-0 j-form-email" action="">
                        <input type="hidden" name="act" value="email"/>
                        <div class="form-row">
                            <label class="col-md-4 control-label"><?= _t('users', 'Current Email') ?></label>
                            <div class="col">
                                <div class="d-flex align-items-center flex-nowrap">
                                    <input type="email" class="form-control" name="email0"
                                           value="<?= $email ?>" disabled="disabled"/>
                                    <?php if ($email_verified) { ?>
                                        <i class="fas fa-check-circle ml-2 text-success"></i>
                                    <?php } ?>
                                </div>
                                <?php if (!$email_verified) { ?>
                                    <div class="mt-1">
                                        <a href="javascript:void(0);" class="c-link-ajax fs-12 j-email-approve"><span><?= _t('users', 'Verify Email') ?></span></a>
                                    </div>
                                <?php } ?>
                            </div>
                        </div>
                        <div class="form-row">
                            <label class="col-md-4 control-label"><?= _t('users', 'New Email') ?><span
                                    class="required-mark">*</span></label>
                            <div class="col">
                                <input type="email" class="form-control j-required" name="email"
                                       maxlength="100"/>
                            </div>
                        </div>
                        <div class="form-row">
                            <label class="col-md-4 control-label nowrap"><?= _t('users', 'Current Password') ?><span class="required-mark">*</span></label>
                            <div class="col">
                                <input type="password" class="form-control j-required" name="pass"
                                       maxlength="100" autocomplete="off"/>
                            </div>
                        </div>
                        <div class="d-flex justify-content-center justify-content-lg-start">
                            <input type="submit" class="btn btn-success" value="<?= _te('users', 'Change') ?>"/>
                        </div>
                    </form>
                </div>
            </div>
        <?php } ?>
        <?php if ($on['destroy']) { ?>
            <div class="usr-settings-box usr-settings-box-collapse vw-white-box p-0">
                <a href="javascript:void(0);" class="dr-collapse-act collapsed j-block-toggler" data-block="destroy">
                    <span class="c-title h3"><?= _t('users', 'Delete Account') ?></span>
                    <span class="c-drop-arrow j-icon"></span>
                </a>
                <div class="usr-settings-box-content hide j-block j-block-destroy">
                    <form class="form-creation j-form-destroy" action="">
                        <input type="hidden" name="act" value="destroy"/>
                        <div class="mb-4"><?= _t('users', 'You can delete your account if you no longer plan to use the site') ?></div>
                        <div class="form-row">
                            <label class="col-md-4 control-label nowrap"><?= _t('users', 'Current Password') ?><span class="required-mark">*</span></label>
                            <div class="col">
                                <input type="password" class="form-control j-required" name="pass" maxlength="100" autocomplete="off"/>
                            </div>
                        </div>
                        <div class="d-flex justify-content-center justify-content-lg-start">
                            <input type="submit" class="btn btn-danger" value="<?= _te('users', 'Delete Account') ?>"/>
                        </div>
                    </form>
                </div>
            </div>
        <?php } ?>
    </div>
</div>

<script type="text/html" id="j-my-settings-tpl-user-phones">
    <div class="form-row-item form-row-contact">
        <div class="input-group">
            <span class="input-group-text">
              <i class="grey-icon fa fa-phone"></i>
            </span>
            <input type="tel" maxlength="30" name="phones[<%= index %>]" value="<%= value %>"
                   class="form-control"
                   placeholder="<%= o.lang.phones_tip %>"/>
        </div>
        <% if(plus) { %>
        <div class="mt-1">
            <a class="c-link-ajax fs-12 j-plus" href="#">+ <span><%= o.lang.phones_plus %></span></a>
        </div>
        <% } %>
    </div>
</script>

<script type="text/javascript">
  <?php
    Geo::mapsAPI();
    View::script(['qquploader', '/js/modules/users/my.settings']);
  ?>
  <?php js::start() ?>
  jUsersMySettings.init(<?= func::php2js([
    'url_settings' => Users::url('my.settings'),
    'url_social' => Users::url('login.social'),
    'url_social_return' => Users::url('account.settings'),
    'lang' => [
      'saved_success' => _t('', 'Settings saved successfully'),
      'ava_upload_messages' => [
        'typeError' => _t('users', 'Only the following file types are allowed: {extensions}'),
        'sizeError' => _t('users', 'The file {file} is too large, the maximum size allowed is {sizeLimit}'),
        'minSizeError' => _t('users', 'The file {file} has an incorrect size'),
        'emptyError' => _t('users', 'The file {file} has an incorrect size'),
        'onLeave' => _t('users', 'The image is uploading, if you leave this page, the upload will be terminated'),
      ],
      'ava_upload' => _t('users', 'Upload Photo'),
      'phones_tip' => _t('item-form', 'Phone Number'),
      'phones_plus' => _t('item-form', '<span [attr]>Add more</span>'),
      'pass_changed' => _t('users', 'Password was successfully changed'),
      'pass_confirm' => _t('users', 'Password confirmation failed'),
      'phone_changed' => _t('users', 'Phone number has been changed successfully.'),
      'phone_code_sended' => _t('users', 'The verification code was sent to the specified phone number'),
      'email_wrong' => _t('users', 'Incorrect email'),
      'email_diff' => _t('users', 'Email address must not be the same as the current one'),
    ],
    # avatar
    'avatarMaxsize' => $avatar_maxsize,
    'avatarSzNormal' => UsersAvatar::szNormal,
    # phones
    'phonesLimit' => Users::i()->profilePhonesLimit,
    'phonesData' => $phones,
  ]) ?>);
  <?php js::stop() ?>
</script>