<?php

use auctionforge\inc\controllers\PolylangSupport;
use auctionforge\inc\helpers\LotHelper;
use auctionforge\inc\helpers\SettingsHelper;

if (SettingsHelper::getOption('enable_recently_viewed', 'off') === 'on') : ?>
<style>
.bp-recently-viewed-header { padding: 10px 15px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 10px; }
.bp-recently-viewed-header .bp-title { font-size: 1.1em; font-weight: 600; margin: 0; }
.bp-btn-sm { padding: 6px 16px; font-size: 0.85em; white-space: nowrap; }
.bp-btn-outline { background: transparent; border: 1px solid #999; color: #555; text-decoration: none; border-radius: 3px; cursor: pointer; }
.bp-btn-outline:hover { background: #333; color: #fff; }
</style>
<?php endif; ?>
<style>
/* Verify-phone CTA on the profile page — deliberately loud (red + pulsing) so users notice a verified phone is required to bid. */
.bp-verify-phone { text-align: left; }
.bp-verify-phone__cta {
    display: inline-block;
    background-color: #d32f2f !important;
    border: 1px solid #d32f2f !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: 3px;
    cursor: pointer;
    padding: 9px 22px;
    line-height: 1.2;
    animation: bpVerifyPulse 1.5s ease-in-out infinite;
}
.bp-verify-phone__cta:hover,
.bp-verify-phone__cta:focus {
    background-color: #b71c1c !important;
    border-color: #b71c1c !important;
    color: #fff !important;
}
.bp-verify-phone__ok {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2e7d32;
    font-weight: 600;
}
@keyframes bpVerifyPulse {
    0%   { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.55); transform: scale(1); }
    70%  { box-shadow: 0 0 0 12px rgba(211, 47, 47, 0); transform: scale(1.04); }
    100% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0); transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .bp-verify-phone__cta { animation: none; }
}
</style>
<?php

$pageAuctionListId = SettingsHelper::getOption('auction_list', 0);
$lang = SettingsHelper::getOption("lang", "en");
if (PolylangSupport::isPolylangActive()) {
    $lang = pll_current_language();
}

if (PolylangSupport::isPolylangActive()) {
    $langCode = pll_current_language();
    $profilePageId = SettingsHelper::getOption('profile', 0);
    $translate = pll_get_post_translations($profilePageId);
    if (!empty($translate[$langCode])) {
        $profileLink = get_permalink($translate[$langCode]);
    } else {
        $profileLink = get_permalink($profilePageId);
    }
} else {
    $profileLink = get_permalink(SettingsHelper::getOption('profile', 0));
}
?>
<style>
.af-bidwatch-wrap { text-align: center; padding: 4px 0 12px; }
/* Themes style bare labels and spans in the profile area like links, which made
   this read as a hyperlink rather than a setting. The resets below are scoped to
   this control and are deliberately !important so a child theme cannot restore
   the link look. */
.af-bidwatch-toggle { display: inline-flex; align-items: center; gap: 10px; font-size: 0.9em; color: #555; cursor: pointer; user-select: none; text-decoration: none !important; }
.af-bidwatch-toggle .af-bidwatch-text { text-decoration: none !important; color: inherit !important; border-bottom: 0 !important; }
/* Hide the native box but keep it in the tab order and operable by keyboard —
   the slider below is only a visual skin over it. */
.af-bidwatch-toggle input.af-bidwatch-checkbox { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.af-bidwatch-slider { position: relative; flex: 0 0 auto; width: 40px; height: 22px; background: #c9cdd2; border-radius: 22px; transition: background .2s ease; }
.af-bidwatch-slider::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .2s ease; }
.af-bidwatch-checkbox:checked + .af-bidwatch-slider { background: #2e7d32; }
.af-bidwatch-checkbox:checked + .af-bidwatch-slider::after { transform: translateX(18px); }
.af-bidwatch-checkbox:focus-visible + .af-bidwatch-slider { outline: 2px solid #005fcc; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .af-bidwatch-slider, .af-bidwatch-slider::after { transition: none; } }
@keyframes afBidFlash { 0% { background-color: #fff2a8; } 100% { background-color: transparent; } }
.af-bid-flash { animation: afBidFlash 1.4s ease-out; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { .af-bid-flash { animation: none; } }
</style>
<script>
window.afBidWatchLang = {
    auto_refresh_label: <?= json_encode(__('Auto-refresh bids (every 10s)', 'auctionforge')) ?>,
    leading_bid: <?= json_encode(__('Leading bid', 'auctionforge')) ?>,
    your_leading_bid: <?= json_encode(__('Your leading bid', 'auctionforge')) ?>,
    start_price: <?= json_encode(__('Start price', 'auctionforge')) ?>,
    purchase_price: <?= json_encode(__('Purchase Price', 'auctionforge')) ?>,
    sold_for: <?= json_encode(__('Sold for', 'auctionforge')) ?>,
    sold_to_you_for: <?= json_encode(__('Sold to you for', 'auctionforge')) ?>,
    your_bid_of: <?= json_encode(__('Your bid of', 'auctionforge')) ?>,
    outbid_by_higher: <?= json_encode(__('has been outbid by a higher bid', 'auctionforge')) ?>,
    your_max_absentee_bid: <?= json_encode(__('Your max absentee bid', 'auctionforge')) ?>
};
</script>
<script type="text/template" id="profile-page-template">
    <div class="bp-content bp-justify-between bp-row bp-no-margin bp-add-padding">
        <div class="bp-col bp-d-flex bp-md-f-wrap bp-f-center">
            <div class="bp-content__text bp-justify-between bp-mb-0">
                <div data-tab-id="profile-tabs" class="bp-tabs-block bp-col bp-hidden bp-d-flex bp-f-center">
                    <nav class="nav bp-tabs-link">
                        <a class="nav-link active" id="bp-profile-link" href="#bp-account"><?= __('My Account', 'auctionforge') ?></a>
                        <a class="nav-link" id="bp-wish-list-link" href="#bp-wish-list"><?= __('Wish List', 'auctionforge') ?></a>
                        <a class="nav-link" id="bp-bids-list-link" href="#bp-my-bids"><?= __('My Bids', 'auctionforge') ?></a>
                        <a class="nav-link" id="bp-payment-methods-link" href="#bp-payment-methods"><?= __('Payment methods', 'auctionforge') ?></a>
                        <a class="nav-link" id="bp-winnings-list-link" href="#bp-winnings"><?= __('Winnings', 'auctionforge') ?></a>
                        <?php if (SettingsHelper::getOption('enable_billing_tab', 'off') === 'on') : ?>
                        <a class="nav-link" id="bp-bills-link" href="#bp-bills"><?= __('My Invoices', 'auctionforge') ?></a>
                        <?php endif; ?>
                        <?php if (SettingsHelper::getOption('enable_recently_viewed', 'off') === 'on') : ?>
                        <a class="nav-link" id="bp-recently-viewed-link" href="#bp-recently-viewed"><?= __('Recently Viewed', 'auctionforge') ?></a>
                        <?php endif; ?>
                        <a class="logoutLink nav-link" href="#logout"><?= __('Logout', 'auctionforge') ?></a>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <div class="bp-row bp-fix-width-lot">
        <div id="profile-section" class="bp-d-flex bp-f-wrap bp-f-center bp-md-f-around">
            <div id="profile-tabs" class="bp-tabs-content bp-col">
                <div id="bp-account" class="active bp-tabs__block">
                    <a href="#" class="bp-visible bp-spoiler-trigger"><span><?= __('My Account', 'auctionforge') ?></span></a>
                    <div id="profile-account-section"
                         data-confirm-email="<?= __('Please complete your registration to participate in our auctions. <a href=\'#\' id=\'resendEmailSection\'>Resend email</a>.', 'auctionforge') ?>"
                         data-incomplete-profile="<?= __('Please complete your details.', 'auctionforge') ?>"
                         data-pending="<?= __('You are not approved to bid yet.', 'auctionforge') ?>"
                         class="bp-spoiler-block"></div>
                </div>
                <div id="bp-wish-list" class="bp-tabs__block">
                    <a href="#" class="bp-visible bp-spoiler-trigger"><span><?= __('Wish List', 'auctionforge') ?></span></a>
                    <div id="profile-wishlist-section" class="bp-spoiler-block"></div>
                </div>
                <div id="bp-my-bids" class="bp-tabs__block">
                    <a href="#" class="bp-visible bp-spoiler-trigger"><span><?= __('My Bids', 'auctionforge') ?></span></a>
                    <div id="profile-bids-section" class="bp-spoiler-block"></div>
                </div>
                <div id="bp-payment-methods" class="bp-tabs__block">
                    <a href="#" class="bp-visible bp-spoiler-trigger"><span><?= __('Payment methods', 'auctionforge') ?></span></a>
                    <div id="profile-payment-methods-section" class="bp-spoiler-block"></div>
                </div>
                <div id="bp-winnings" class="bp-tabs__block">
                    <a href="#" class="bp-visible bp-spoiler-trigger"><span><?= __('Winnings', 'auctionforge') ?></span></a>
                    <div id="profile-winnings-section" class="bp-spoiler-block"></div>
                </div>
                <?php if (SettingsHelper::getOption('enable_billing_tab', 'off') === 'on') : ?>
                <div id="bp-bills" class="bp-tabs__block">
                    <a href="#" class="bp-visible bp-spoiler-trigger"><span><?= __('My Invoices', 'auctionforge') ?></span></a>
                    <div id="profile-bills-section" class="bp-spoiler-block"></div>
                </div>
                <?php endif; ?>
                <?php if (SettingsHelper::getOption('enable_recently_viewed', 'off') === 'on') : ?>
                <div id="bp-recently-viewed" class="bp-tabs__block">
                    <a href="#" class="bp-visible bp-spoiler-trigger"><span><?= __('Recently Viewed', 'auctionforge') ?></span></a>
                    <div id="profile-recently-viewed-section" class="bp-spoiler-block"></div>
                </div>
                <?php endif; ?>
                <div id="bp-logout">
                    <a href="#logout" class="bp-visible bp-spoiler-trigger logoutLink"><span><?= __('Logout', 'auctionforge') ?></span></a>
                </div>
            </div>
        </div>
    </div>
</script>
<script type="text/template" id="profile-account-template">
    <div class="bp-col bp-d-flex bp-f-center">
        <div class="bp-user-state">
            <p class="title"><%- user.successMessage %></p>
        </div>
    </div>
    <div class="bp-tabs-block bp-col bp-hidden bp-d-flex bp-f-center">
        <form id="updateDetailsSection" action="<?= LotHelper::getPolyLangPermalink($pageAuctionListId) ?>" class="bp-from">
            <% _.forEach(fields, function(field, index) { %>
            <% if (field.type == 'phone') { %>
            <div id="addressField<%- index %>" class="bp-form-group <%- (field.hidden !== undefined) ? 'hidden' : '' %>">
                <div class="bp-form-group__inner bp-form-group__inline bp-form-group__list bp-form-group__phone">
                    <select style="width: 100%" <%- (field.required) ? 'required' : '' %> class="phoneCodeSelect" name="<%- index %>CountryCode" id="details<%-
                    index %>CountryCode"></select>
                    <input type="text" <%- (field.required) ? 'required' : '' %> placeholder="<%- bp_t(field.label) %> <%-
                    (field.required) ? '*' : '' %>" value="<%- field.value %>" class="bp-form-control" name="<%- index %>" id="profile<%- index %>">
                    <span class="bp-form-error hidden"></span>
                </div>
            </div>
            <% } else if (field.type == 'password') { %>
            <div id="addressField<%- index %>" class="bp-form-group bp-form-group_svg bp_show_password-action <%- (field.hidden !== undefined) ? 'hidden' : '' %>">
                <div class="bp-form-group__inner">
                    <input type="<%- field.type %>" <%- (field.required) ? 'required' : '' %> placeholder="<%- bp_t(field.label) %> <%-
                    (field.required) ? '*' : '' %>" value="<%- field.value %>" class="bp-form-control bp-form-control_eye" name="<%- index %>" id="profile<%- index %>">
                    <i class="bp_show_password svg-icon svg-eye"></i>
                    <span class="bp-form-error hidden"></span>
                </div>
            </div>
            <% } else if (field.type == 'email') { %>
            <div id="addressField<%- index %>" class="bp-form-group  bp-form-group_svg <%- (field.hidden !== undefined) ? 'hidden' : '' %>">
                <div class="bp-form-group__inner">
                    <input type="<%- field.type %>" disabled placeholder="<%- bp_t(field.label) %> <%-
                    (field.required) ? '*' : '' %>" value="<%- field.value %>" class="bp-form-control bp-form-control_email" name="<%- index %>" id="profile<%-
                    index %>">
                    <svg class="icon">
                        <use xlink:href="#pencil"></use>
                    </svg>
                    <span class="bp-form-error hidden"></span>
                </div>
            </div>
            <% } else if (field.type == 'select') { %>
            <div id="addressField<%- index %>" class="bp-form-group <%- (field.hidden !== undefined) ? 'hidden' : '' %>">
                <div class="bp-form-group__inner">
                    <select style="width: 100%" <%- (field.required) ? 'required' : '' %> name="<%- index %>" id="profile<%- index
                    %>"></select>
                    <span class="bp-form-error hidden"></span>
                </div>
            </div>
            <% } else { %>
            <div id="addressField<%- index %>" class="bp-form-group <%- (field.hidden !== undefined) ? 'hidden' : '' %>">
                <div class="bp-form-group__inner">
                    <input type="<%- field.type %>" <%- (field.required) ? 'required' : '' %> placeholder="<%- bp_t(field.label) %> <%-
                    (field.required) ? '*' : '' %>" value="<%- field.value %>" class="bp-form-control" name="<%- index %>" id="profile<%- index %>">
                    <span class="bp-form-error hidden"></span>
                </div>
            </div>
            <% } %>
            <% }); %>
            <div id="phoneVerificationSection" class="bp-form-group bp-verify-phone"></div>
            <div id="invitationsEnabled" class="bp-form-group bp-form-check bp-form-jc-start bp-lh-28">
                <input class="bp-form-check-input" name="isEnabled" id="isEnabled-field" type="checkbox">
                <label class="bp-form-check-label" for="isEnabled-field">
                    <?= sprintf(__('Allow "%s" to send me invitations for new auctions', 'auctionforge'), get_option('blogname')) ?>
                </label>
            </div>
            <div id="bp-alert-email-prefs">
                <div class="bp-form-group bp-form-check bp-form-jc-start bp-lh-28">
                    <input class="bp-form-check-input" id="af-pref-bid-emails" type="checkbox">
                    <label class="bp-form-check-label" for="af-pref-bid-emails">
                        <?= __('Email me a confirmation when I place a bid', 'auctionforge') ?>
                    </label>
                </div>
                <div class="bp-form-group bp-form-check bp-form-jc-start bp-lh-28">
                    <input class="bp-form-check-input" id="af-pref-overbid-emails" type="checkbox">
                    <label class="bp-form-check-label" for="af-pref-overbid-emails">
                        <?= __('Email me when I am outbid', 'auctionforge') ?>
                    </label>
                </div>
            </div>
            <?php if (\auctionforge\inc\services\BrevoSMS::isEnabled()) : ?>
            <div id="af-sms-prefs" class="bp-form-group" style="border:1px solid #e0e0e0;border-radius:6px;padding:15px;margin:10px 0;background:#fafafa;">
                <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
                    <span style="font-size:18px;">📱</span>
                    <strong style="font-size:0.95em;"><?= __('SMS Notifications', 'auctionforge') ?></strong>
                </div>
                <div class="bp-form-group bp-form-check bp-form-jc-start bp-lh-28" style="margin-bottom:8px;">
                    <input class="bp-form-check-input" name="af_sms_opt_in" id="af-sms-opt-in" type="checkbox">
                    <label class="bp-form-check-label" for="af-sms-opt-in">
                        <?= __('Enable SMS notifications for auction alerts', 'auctionforge') ?>
                    </label>
                </div>
                <div id="af-sms-details" style="display:none;margin-left:4px;">
                    <div style="display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap;">
                        <select id="af-sms-cc" style="width:90px;padding:4px;">
                            <option value="1">+1</option><option value="44">+44</option>
                            <option value="972">+972</option><option value="33">+33</option>
                            <option value="49">+49</option><option value="39">+39</option>
                            <option value="34">+34</option><option value="61">+61</option>
                        </select>
                        <input type="text" id="af-sms-phone" placeholder="<?= __('Phone number', 'auctionforge') ?>"
                               style="flex:1;min-width:140px;padding:6px 8px;" class="bp-form-control" />
                    </div>
                    <div style="font-size:0.85em;color:#555;margin-bottom:6px;"><?= __('Notify me about:', 'auctionforge') ?></div>
                    <div class="bp-form-check bp-form-jc-start" style="margin-bottom:4px;">
                        <input class="bp-form-check-input af-sms-toggle" type="checkbox" id="af-sms-published" checked>
                        <label class="bp-form-check-label" for="af-sms-published" style="font-size:0.85em;"><?= __('New auctions published', 'auctionforge') ?></label>
                    </div>
                    <div class="bp-form-check bp-form-jc-start" style="margin-bottom:4px;">
                        <input class="bp-form-check-input af-sms-toggle" type="checkbox" id="af-sms-starts-soon" checked>
                        <label class="bp-form-check-label" for="af-sms-starts-soon" style="font-size:0.85em;"><?= __('Auction starting soon', 'auctionforge') ?></label>
                    </div>
                    <div class="bp-form-check bp-form-jc-start" style="margin-bottom:4px;">
                        <input class="bp-form-check-input af-sms-toggle" type="checkbox" id="af-sms-live-soon" checked>
                        <label class="bp-form-check-label" for="af-sms-live-soon" style="font-size:0.85em;"><?= __('Favorited items going live', 'auctionforge') ?></label>
                    </div>
                    <div class="bp-form-check bp-form-jc-start" style="margin-bottom:4px;">
                        <input class="bp-form-check-input af-sms-toggle" type="checkbox" id="af-sms-outbid" checked>
                        <label class="bp-form-check-label" for="af-sms-outbid" style="font-size:0.85em;"><?= __('Outbid alerts', 'auctionforge') ?></label>
                    </div>
                </div>
                <div id="af-sms-status" style="font-size:0.82em;margin-top:6px;min-height:16px;"></div>
            </div>
            <?php endif; ?>
            <div class="bp-form-group">
                <button id="sendUpdate" type="submit" class="bp-btn bp-btn-black"><?= __('Update', 'auctionforge') ?></button>
            </div>
            <?php /* Self-service account removal intentionally disabled — accounts must be removed on request, not by the user. Rendering nothing also stops the #optOutUser click handler (users/optOut) from binding. Structure kept for easy restore: change `if (false)` to `if (true)`. */ ?>
            <?php if (false) : ?>
            <div class="bp-form-group bp-text-right">
                <a id="optOutUser" class="bp-text bp-text-small"
                   href="<?= apply_filters("bs_data_subject_request_link", "https://bidspirit.com/ui/dataSubjectRequest?lang={$lang}") ?>"
                   rel="nofollow">
                    <?= __("Remove account", "auctionforge") ?>
                </a>
            </div>
            <?php endif; ?>
        </form>
    </div>
</script>
<script type="text/template" id="profile-account-v2-template">
    <div class="bp-col bp-d-flex bp-f-center">
        <div class="bp-user-state">
            <p class="title"><%- user.successMessage %></p>
        </div>
    </div>
    <div class="bp-tabs-block bp-col bp-hidden bp-d-flex bp-f-center">
        <form id="updateDetailsSection" action="<?= LotHelper::getPolyLangPermalink($pageAuctionListId) ?>" class="bp-from">
            <% _.forEach(fields, function(field, index) { %>
                <% if (field.type == 'phone') { %>
                <div id="addressField<%- index %>" class="bp-form-group <%- (field.hidden !== undefined) ? 'hidden' : '' %>">
                    <div class="bp-form-group__inner bp-form-group__inline bp-form-group__list bp-form-group__phone">
                        <select style="width: 100%" <%- (field.required) ? 'required' : '' %> class="phoneCodeSelect" name="<%- index %>CountryCode" id="details<%-
                        index %>CountryCode"></select>
                        <input type="text" <%- (field.required) ? 'required' : '' %> placeholder="<%- bp_t(field.label) %> <%-
                        (field.required) ? '*' : '' %>" value="<%- field.value %>" class="bp-form-control" name="<%- index %>" id="profile<%- index %>">
                        <span class="bp-form-error hidden"></span>
                    </div>
                </div>
                <% } else if (field.type == 'password') { %>
                <div id="addressField<%- index %>" class="bp-form-group bp-form-group_svg bp_show_password-action <%- (field.hidden !== undefined) ? 'hidden' : '' %>">
                    <div class="bp-form-group__inner">
                        <input type="<%- field.type %>" <%- (field.required) ? 'required' : '' %> placeholder="<%- bp_t(field.label) %> <%-
                        (field.required) ? '*' : '' %>" value="<%- field.value %>" class="bp-form-control bp-form-control_eye" name="<%- index %>" id="profile<%- index %>">
                        <i class="bp_show_password svg-icon svg-eye"></i>
                        <span class="bp-form-error hidden"></span>
                    </div>
                </div>
                <% } else if (field.type == 'email') { %>
                <div id="addressField<%- index %>" class="bp-form-group  bp-form-group_svg <%- (field.hidden !== undefined) ? 'hidden' : '' %>">
                    <div class="bp-form-group__inner">
                        <input type="<%- field.type %>" disabled placeholder="<%- bp_t(field.label) %> <%-
                        (field.required) ? '*' : '' %>" value="<%- field.value %>" class="bp-form-control bp-form-control_email" name="<%- index %>" id="profile<%-
                        index %>">
                        <svg class="icon">
                            <use xlink:href="#pencil"></use>
                        </svg>
                        <span class="bp-form-error hidden"></span>
                    </div>
                </div>
                <% } else if (field.type == 'select') { %>
                <div id="addressField<%- index %>" class="bp-form-group <%- (field.hidden !== undefined) ? 'hidden' : '' %>">
                    <div class="bp-form-group__inner">
                        <select style="width: 100%" <%- (field.required) ? 'required' : '' %> name="<%- index %>" id="profile<%- index
                        %>"></select>
                        <span class="bp-form-error hidden"></span>
                    </div>
                </div>
                <% } else if (index === 'id' && (field.requireIdPhoto)) { %>
                <div id="addressField<%- index %>" class="bp-form-group <%- (field.hidden !== undefined) ? 'hidden' : '' %>">
                    <div class="bp-form-group__inner bp-mb-20">
                        <input type="<%- field.type %>" <%- (field.required) ? 'required' : '' %> placeholder="<%- bp_t(field.label) %> <%-
                        (field.required) ? '*' : '' %>" value="<%- field.value %>" class="bp-form-control" name="<%- index %>" id="profile<%- index %>">
                        <span class="bp-form-error hidden"></span>
                    </div>
                    <div id="deleteIdPhotoSection" class="bp-form-group__inner bp-form-group__file bp-d-flex bp-f-wrap bp-gap-1">
                        <label><?= __("Id photo", "auctionforge") ?><span class="bp-required">*</span></label>
                        <div class="bp-d-flex bp-f-between bp-d-flex bp-gap-1 bp-f-align-center">
                            <svg class="bp-icon bp-icon-green bp-mr-auto">
                                <use xlink:href="#check"></use>
                            </svg>
                            <button type="button" id="showIdPhoto" class="bp-btn bp-btn-icon bp-btn-sm">
                                <i class="svg-icon svg-eye"></i>
                                <?= __("Display", "auctionforge") ?>
                            </button>
                            <button type="button" id="deleteIdPhoto" class="bp-btn bp-btn-alert bp-btn-stretch">
                                <?= __("Delete", "auctionforge") ?>
                            </button>
                        </div>
                    </div>
                    <div id="uploadIdPhotoSection" class="bp-form-group__inner bp-form-group__file bp-d-flex bp-f-wrap bp-gap-1">
                        <label><?= __("Document photo", "auctionforge") ?>
                            <span class="bp-required"><%- (field.idPhotoUploadRequired) ? '*' : '' %></span>
                        </label>
                        <div class="bp-d-flex bp-f-between">
                            <input type="file" name="filePhotoId" id="uploadIdPhotoInput" <%- (!field.hasIdPhoto && field.idPhotoUploadRequired) ? 'required' : '' %>>
                            <button type="button" id="uploadPhotoIdAction" class="bp-btn bp-btn-default bp-btn-sm"><?= __("Upload", "auctionforge") ?></button>
                        </div>
                    </div>
                </div>
                <% } else { %>
                <div id="addressField<%- index %>" class="bp-form-group <%- (field.hidden !== undefined) ? 'hidden' : '' %>">
                    <div class="bp-form-group__inner">
                        <input type="<%- field.type %>" <%- (field.required) ? 'required' : '' %> placeholder="<%- bp_t(field.label) %> <%-
                        (field.required) ? '*' : '' %>" value="<%- field.value %>" class="bp-form-control" name="<%- index %>" id="profile<%- index %>">
                        <span class="bp-form-error hidden"></span>
                    </div>
                </div>
                <% } %>
            <% }); %>
            <div id="phoneVerificationSection" class="bp-form-group bp-verify-phone"></div>
            <div id="shippingFields" class="bp-form-group">
                <div class="bp-form-group__inner">
                    <input type="checkbox" checked name="shippingCheckbox" id="profileShippingCheckbox" class="bp-form-check-input">
                    <label for="profileShippingCheckbox" class="bp-form-group bp-form-check bp-form-jc-start bp-lh-28 bp-mb-0">
                        <?= __("My residential address is the same as the shipping address", "auctionforge") ?>
                    </label>
                </div>
            </div>
            <% if (shippingFields !== undefined) { %>
            <div id="wrpShippingField" class="wrp-bp-form-group shippingFields hidden">
                <% _.forEach(shippingFields, function(field, index) { %>
                <% if (field.type == 'select') { %>
                <div id="shippingField<%- index %>" class="bp-form-group <%- (field.hidden !== undefined) ? 'hidden' : '' %>">
                    <div class="bp-form-group__inner">
                        <select class="bp-shippingField" disabled
                                style="width: 100%" <%- (field.required) ? 'required' : '' %>
                                name="shipping.<%- index %>" id="shipping<%- index %>"></select>
                        <span class="bp-form-error hidden"></span>
                    </div>
                </div>
                <% } else { %>
                <div id="shippingField<%- index %>" class="bp-form-group <%- (field.hidden !== undefined) ? 'hidden' : '' %>">
                    <div class="bp-form-group__inner">
                        <input disabled type="<%- field.type %>" <%- (field.required) ? 'required' : '' %> placeholder="<%- bp_t(field.label) %> <%-
                        (field.required) ? '*' : '' %>" value="<%- field.value %>" class="bp-shippingField bp-form-control" name="shipping.<%- index %>"
                        id="shipping<%- index %>">
                        <span class="bp-form-error hidden"></span>
                    </div>
                </div>
                <% } %>
                <% }); %>
            </div>
            <% } %>
            <div id="invitationsEnabled" class="bp-form-group bp-form-check bp-form-jc-start bp-lh-28">
                <input class="bp-form-check-input" name="isEnabled" id="isEnabled-field" type="checkbox">
                <label class="bp-form-check-label" for="isEnabled-field">
                    <?= sprintf(__('Allow "%s" to send me invitations for new auctions', 'auctionforge'), get_option('blogname')) ?>
                </label>
            </div>
            <div id="bp-alert-email-prefs">
                <div class="bp-form-group bp-form-check bp-form-jc-start bp-lh-28">
                    <input class="bp-form-check-input" id="af-pref-bid-emails" type="checkbox">
                    <label class="bp-form-check-label" for="af-pref-bid-emails">
                        <?= __('Email me a confirmation when I place a bid', 'auctionforge') ?>
                    </label>
                </div>
                <div class="bp-form-group bp-form-check bp-form-jc-start bp-lh-28">
                    <input class="bp-form-check-input" id="af-pref-overbid-emails" type="checkbox">
                    <label class="bp-form-check-label" for="af-pref-overbid-emails">
                        <?= __('Email me when I am outbid', 'auctionforge') ?>
                    </label>
                </div>
            </div>
            <div class="bp-form-group">
                <button id="sendUpdate" type="submit" class="bp-btn bp-btn-black"><?= __('Update', 'auctionforge') ?></button>
            </div>
            <?php /* Self-service account removal intentionally disabled — accounts must be removed on request, not by the user. Rendering nothing also stops the #optOutUser click handler (users/optOut) from binding. Structure kept for easy restore: change `if (false)` to `if (true)`. */ ?>
            <?php if (false) : ?>
            <div class="bp-form-group bp-text-right">
                <a id="optOutUser" class="bp-text bp-text-small"
                   href="<?= apply_filters("bs_data_subject_request_link", "https://bidspirit.com/ui/dataSubjectRequest?lang={$lang}") ?>"
                   rel="nofollow">
                    <?= __("Remove account", "auctionforge") ?>
                </a>
            </div>
            <?php endif; ?>
        </form>
    </div>
</script>
<script type="text/template" id="account-items-template">
    <div class="bp-row bp-row_profile bp-fix-width-lot">
        <div class="bp-lots bp-d-flex bp-f-wrap bp-f-center bp-md-f-around">
            <% let date = ""; %>
            <% _.forEach(items, function(lot, index) { %>
                <% if (date !== lot.auction.date) { %>
                    <div class="bp-lot-0 bp-lots__head">
                        <p class="bp-lot__date"><%= lot.auction.date %></p>
                    </div>
                    <% date = lot.auction.date %>
                <% } %>
                <% if ((lot.soldBid !== undefined && lot.soldBid.price !== undefined && lot.soldBid.isSold === true)
                || (lot.leadingBid !== undefined && lot.leadingBid.price !== undefined && lot.leadingBid.isSold === true)
                || (lot.item.wasInLiveAuction === true)) { %>
                    <div class="bp-lot" data-lot-index="<%- lot.lotIndex %>" data-lot-id="<%- lot.item.id %>" data-auction-number="<%- lot.item.auctionId %>">
                <% } else { %>
                    <% console.log("unsold", lot) %>
                    <div class="bp-lot" data-lot-index="<%- lot.lotIndex %>" data-lot-id="<%- lot.item.id %>" data-auction-number="<%- lot.item.auctionId %>">
                <% } %>
                    <a href="#" class="bp-lot__wrp-image" style="background-color: <%- bgColor %>">
                        <% if (lot.thumbnail !== undefined) { %>
                            <div class="bp-lot__image" style="background-image:url(<%- lot.thumbnail %>);">
                        <% } else { %>
                            <div class="bp-lot__image" style="background-image:url(<%- imageBlank %>);">
                        <% } %>
                        </div>
                    </a>
                    <div class="bp-lot__content">
                        <% if (lot.isFavorite) {%>
                            <span class="bp__wishlist bp__wishlist-active"></span>
                        <% } else { %>
                            <span class="bp__wishlist"></span>
                        <% } %>
                        <div class="bp-lot__content_inner">
                            <div class="bp-lot__title">
                                <a href="#"><span class="bp-title"><?= __('Lot', 'auctionforge') ?>&nbsp;<%- lot.item.itemIndex %>:</span></a>
                                <article>
                                    <div><a href="#"><strong><%- lot.item.name %></strong></a></div>
                                    <%= smartCut(lot.item.description, 20) %>
                                </article>
                            </div>
                            <div class="bp-lot__message">
                                <%
                                    var _auctionEnded = (lot.item.wasInLiveAuction === true) ||
                                                        (lot.soldBid !== undefined && lot.soldBid.isSold === true) ||
                                                        (lot.leadingBid !== undefined && lot.leadingBid.isSold === true);
                                    var _userWon = _auctionEnded && lot.soldBid !== undefined && lot.soldBid.isSelf === true;
                                    var _userLost = _auctionEnded && lot.soldBid !== undefined && lot.soldBid.isSelf === false;
                                %>
                                <% if (_userLost && lot.selfAbsenteeBid) { %>
                                <p class="bp-lot__message-inner bp-text-red bp-lot__message-you_bid">
                                    <?= __ ('Your bid of', 'auctionforge') ?> <%- formattedPrice(lot.selfAbsenteeBid.price, currency) %> <?= __('has been outbid by a higher bid', 'auctionforge') ?>
                                </p>
                                <% } else if (_userWon && lot.selfAbsenteeBid) { %>
                                <p class="bp-lot__message-inner bp-text-green bp-lot__message-you_bid">
                                    <?= __('Your max absentee bid', 'auctionforge') ?>: <%- formattedPrice(lot.selfAbsenteeBid.price, currency) %>
                                </p>
                                <% } else if (!_auctionEnded && lot.leadingBid && !lot.leadingBid.isSelf && lot.selfAbsenteeBid) { %>
                                <p class="bp-lot__message-inner bp-text-red bp-lot__message-you_bid">
                                    <?= __ ('Your bid of', 'auctionforge') ?> <%- formattedPrice(lot.selfAbsenteeBid.price, currency) %> <?= __('has been outbid by a higher bid', 'auctionforge') ?>
                                </p>
                                <% } else if (!_auctionEnded && lot.leadingBid && lot.leadingBid.isSelf && lot.selfAbsenteeBid) { %>
                                <p class="bp-lot__message-inner bp-text-green bp-lot__message-you_bid">
                                    <?= __('Your max absentee bid', 'auctionforge') ?>: <%- formattedPrice(lot.selfAbsenteeBid.price, currency) %>
                                </p>
                                <% } %>
                            </div>
                        </div>
                        <div class="bp-lot__tool_wrapper">
                            <% if (!lot.item.removedFromAuction) { %>
                            <div class="bp-lot__bid_wrapper bp-form-group">
                                <?php //TODO: Next feature #H91 task ?>
                                <div class="bp-form-group__inner js-data-bid-list-dis">
                                    <!--<input type="text" value="" class="bp-form-control" name="" id="">
                                    <span class="bp-form-error hidden"></span>-->
                                </div>
                            </div>
                            <% } %>
                            <% if (_auctionEnded && lot.soldBid !== undefined && !lot.item.removedFromAuction) { %>
                                <% if (lot.soldBid.isSelf) { %>
                                    <div class="bp-lot__tool bp-lead bp-bg-green">
                                        <p class="bp-subtitle"><?= __('Sold to you for', 'auctionforge') ?>:</p>
                                        <p class="bp-price"><%- formattedPrice(lot.soldBid.price, currency) %></p>
                                <% } else { %>
                                    <div class="bp-lot__tool bp-lead bp-bg-blue">
                                        <p class="bp-subtitle"><?= __('Sold for', 'auctionforge') ?>:</p>
                                        <p class="bp-price"><%- formattedPrice(lot.soldBid.price, currency) %></p>
                                <% } %>
                                </div>
                            <% } else if (lot.leadingBid !== undefined && !_auctionEnded && !lot.item.removedFromAuction) { %>
                                <% if (lot.leadingBid.isSelf) { %>
                                    <div class="bp-lot__tool bp-lead bp-bg-green">
                                <% } else if (lot.leadingBid && !lot.leadingBid.isSelf && lot.selfAbsenteeBid) { %>
                                    <div class="bp-lot__tool bp-lead bp-bg-red">
                                <% } else { %>
                                    <div class="bp-lot__tool bp-lead">
                                <% } %>
                                <% if (lot.leadingBid.isSelf) { %>
                                    <p class="bp-subtitle"><?= __('Your leading bid', 'auctionforge') ?>:</p>
                                <% } else {%>
                                    <p class="bp-subtitle"><?= __('Leading bid', 'auctionforge') ?>:</p>
                                <% } %>
                                <p class="bp-price"><%- formattedPrice(lot.leadingBid.price, currency) %></p>
                            </div>
                            <% } else if (!!lot.item.removedFromAuction) { %>
                                <div class="bp-lot__tool">
                                    <div class="bp-alert bp-alert-small bp-alert-radius-0 alert bp-alert-danger alert-primary" role="alert">
                                        <p><?= __("Lot was removed from auction", "auctionforge") ?></p>
                                    </div>
                                </div>
                            <% } else { %>
                                <?php
                                // A shop item is bought at a fixed price and has no start price —
                                // the API reports 0 — so showing "Start price: $0" here is wrong.
                                // The wishlist renders lots from any auction and only has
                                // item.auctionId to go on, hence the shop id list from bs_data.
                                ?>
                                <%
                                    var _shopIds = (window.bs_data && bs_data.shop_auction_ids) ? bs_data.shop_auction_ids : [];
                                    var _isShopLot = !!(lot.item && _shopIds.indexOf(String(lot.item.auctionId)) !== -1);
                                    var _shopPrice = (lot.item && lot.item.buyoutPrice) ? lot.item.buyoutPrice : 0;
                                %>
                                <% if (_isShopLot) { %>
                                    <% if (_shopPrice > 0) { %>
                                        <div class="bp-lot__tool">
                                            <p class="bp-subtitle"><?= __('Purchase Price', 'auctionforge') ?>:</p>
                                            <p class="bp-price"><%- formattedPrice(_shopPrice, currency) %></p>
                                        </div>
                                    <% } %>
                                <% } else { %>
                                    <div class="bp-lot__tool">
                                        <p class="bp-subtitle"><?= __('Start price', 'auctionforge') ?>:</p>
                                        <p class="bp-price"><%- formattedPrice(lot.startPrice, currency) %></p>
                                    </div>
                                <% } %>
                            <% } %>
                        </div>
                    </div>
                </div>
            <% }); %>
        </div>
    </div>
</script>
<script type="text/template" id="recently-viewed-items-template">
    <div class="bp-row bp-row_profile bp-fix-width-lot">
        <div class="bp-recently-viewed-header bp-d-flex bp-f-between bp-f-center bp-mb-15">
            <p class="bp-title bp-mb-0"><?= __('Recently Viewed Items', 'auctionforge') ?></p>
            <a href="#" id="bp-clear-view-history" class="bp-btn bp-btn-sm bp-btn-outline"><?= __('Clear History', 'auctionforge') ?></a>
        </div>
        <div class="bp-lots bp-d-flex bp-f-wrap bp-f-center bp-md-f-around">
            <% _.forEach(items, function(lot, index) { %>
                <div class="bp-lot" data-post-id="<%- lot.post_id %>" data-term-id="<%- lot.term_id %>" data-lot-id="<%- lot.bidspirit_lot_id %>" data-auction-number="<%- lot.bidspirit_auction_id %>">
                    <a href="<%- lot.permalink %>" class="bp-lot__wrp-image" style="background-color: <%- bgColor %>">
                        <% if (lot.thumbnail) { %>
                            <div class="bp-lot__image" style="background-image:url(<%- lot.thumbnail %>);"></div>
                        <% } else { %>
                            <div class="bp-lot__image" style="background-image:url(<%- imageBlank %>);"></div>
                        <% } %>
                    </a>
                    <div class="bp-lot__content">
                        <span class="bp__wishlist"></span>
                        <div class="bp-lot__content_inner">
                            <div class="bp-lot__title">
                                <a href="<%- lot.permalink %>"><span class="bp-title"><?= __('Lot', 'auctionforge') ?>&nbsp;<%- lot.lot_index %>:</span></a>
                                <article>
                                    <div><a href="<%- lot.permalink %>"><strong><%- lot.lot_name %></strong></a></div>
                                    <% if (lot.lot_description) { %>
                                        <%- smartCut(lot.lot_description, 20) %>
                                    <% } %>
                                </article>
                            </div>
                            <div class="bp-lot__message">
                                <% if (lot.estimated_price) { %>
                                <p class="bp-lot__message-inner bp-lot__message-you_bid">
                                    <?= __('Estimate', 'auctionforge') ?>: <%- lot.estimated_price %>
                                </p>
                                <% } %>
                                <p class="bp-lot__message-inner bp-lot__message-you_bid bp-rv-bid-info" style="display:none;"></p>
                            </div>
                        </div>
                        <div class="bp-lot__tool_wrapper">
                            <% if (lot.sold_bid > 0) { %>
                                <div class="bp-lot__tool bp-lead bp-bg-blue">
                                    <p class="bp-subtitle"><?= __('Sold for', 'auctionforge') ?>:</p>
                                    <p class="bp-price"><%- formattedPrice(lot.sold_bid, currency) %></p>
                                </div>
                            <% } else if (lot.leading_bid > 0) { %>
                                <div class="bp-lot__tool bp-lead bp-bg-green">
                                    <p class="bp-subtitle"><?= __('Leading bid', 'auctionforge') ?>:</p>
                                    <p class="bp-price"><%- formattedPrice(lot.leading_bid, currency) %></p>
                                </div>
                            <% } else if (lot.start_price > 0) { %>
                                <div class="bp-lot__tool bp-lead">
                                    <p class="bp-subtitle"><?= __('Start price', 'auctionforge') ?>:</p>
                                    <p class="bp-price"><%- formattedPrice(lot.start_price, currency) %></p>
                                </div>
                            <% } %>
                        </div>
                    </div>
                </div>
            <% }); %>
        </div>
    </div>
</script>
<script type="text/template" id="account-bills-template">
    <div class="bp-row bp-row_profile bp-fix-width-lot">
        <div class="bp-lots bp-d-flex bp-f-wrap bp-f-center bp-md-f-around">
            <% if (items && items.length > 0) { %>
                <div class="bp-bills-table-wrapper" style="width:100%; overflow-x:auto;">
                    <table class="bp-table" style="width:100%; border-collapse:collapse; text-align:left;">
                        <thead>
                            <tr style="border-bottom: 2px solid #ddd;">
                                <th style="padding: 10px;"><?= __('Invoice #', 'auctionforge') ?></th>
                                <th style="padding: 10px;"><?= __('Date', 'auctionforge') ?></th>
                                <th style="padding: 10px;"><?= __('Total', 'auctionforge') ?></th>
                                <th style="padding: 10px;"><?= __('Status', 'auctionforge') ?></th>
                                <th style="padding: 10px;"><?= __('Action', 'auctionforge') ?></th>
                            </tr>
                        </thead>
                        <tbody>
                            <% _.forEach(items, function(bill, index) { 
                                var rawLabel = bill.invoiceNumber || bill.description || 'Invoice';
                                // Clean up Label: remove "that took place on" -> " - ", remove ID like #ai4
                                var invoiceLabel = rawLabel.replace(/^Bill for auction\s+#?[a-zA-Z0-9-]+\s+/i, "Auction: ");
                                invoiceLabel = invoiceLabel.replace(/\sthat took place on\s+/i, " - ");
                                // Strip any middle ID that BidSpirit might inject (e.g., " - 002 - " -> " - ")
                                invoiceLabel = invoiceLabel.replace(/\s+-\s+[a-zA-Z0-9-]+\s+-\s+/i, " - ");
                                // Fallback double hyphens
                                invoiceLabel = invoiceLabel.replace(/\s*-\s*-\s*/, " - ");
                                
                                var billDate = new Date(bill.billTime).toLocaleDateString();
                                var sumStr = bill.sum ? bill.sum : formattedPrice(0, currency);
                                var linkKey = bill.key || '';
                                var portalUrl = bidspiritServer ? bidspiritServer + '?standaloneScene=payment&key=' + linkKey : '#';
                                var payUrl = bill.paymentUrl || portalUrl;
                                var viewUrl = portalUrl;
                                
                                var resolvedStatus = 'UNPAID';
                                if (bill.isPaid || (bill.status && bill.status.toUpperCase() === 'PAID') || isPaidTab) {
                                    resolvedStatus = 'PAID';
                                } else if (bill.status === 'PAYMENT_IN_PROGRESS') {
                                    resolvedStatus = 'IN PROGRESS';
                                }
                                
                                var downloadUrl = ajaxUrl + '?action=af_download_invoice_pdf&security=' + nonce + '&bill_key=' + linkKey + '&bill_desc=' + encodeURIComponent(invoiceLabel) + '&status=' + encodeURIComponent(resolvedStatus);
                            %>
                            <tr style="border-bottom: 1px solid #eee;">
                                <td style="padding: 10px;">
                                    <strong><%- invoiceLabel %></strong>
                                </td>
                                <td style="padding: 10px;"><%- billDate %></td>
                                <td style="padding: 10px;">
                                    <strong><%- sumStr %></strong>
                                </td>
                                <td style="padding: 10px;">
                                    <% if (bill.isPaid || (bill.status && bill.status.toUpperCase() === 'PAID') || isPaidTab) { %>
                                        <span style="color: green; font-weight: bold;"><?= __('Paid', 'auctionforge') ?></span>
                                    <% } else if (bill.status === 'PAYMENT_IN_PROGRESS') { %>
                                        <span style="color: #ff9800; font-weight: bold;"><?= __('In Progress', 'auctionforge') ?></span>
                                    <% } else { %>
                                        <span style="color: red; font-weight: bold;"><?= __('Unpaid', 'auctionforge') ?></span>
                                    <% } %>
                                </td>
                                <td style="padding: 10px;">
                                    <div style="display: flex; gap: 8px; align-items: center;">
                                    <% if (bill.isPaid || (bill.status && bill.status.toUpperCase() === 'PAID') || isPaidTab) { %>
                                        <a href="<%- viewUrl %>" target="_blank" class="bp-btn bp-btn-sm bp-btn-outline" style="border-radius: 20px; padding: 6px 16px;"><?= __('View', 'auctionforge') ?></a>
                                    <% } else if (bill.status === 'PAYMENT_IN_PROGRESS') { %>
                                        <a href="<%- payUrl %>" target="_blank" class="bp-btn bp-btn-sm" style="background: #28a745; color: #fff; border-radius: 20px; padding: 6px 16px; border: none;"><?= __('Resume', 'auctionforge') ?></a>
                                    <% } else { %>
                                        <a href="<%- payUrl %>" target="_blank" class="bp-btn bp-btn-sm" style="background: #28a745; color: #fff; border-radius: 20px; padding: 6px 16px; border: none;"><?= __('Pay Now', 'auctionforge') ?></a>
                                    <% } %>
                                    <a href="<%- downloadUrl %>" target="_blank" class="bp-btn bp-btn-sm bp-btn-outline" style="border-radius: 20px; padding: 6px 16px;" download><?= __('Download PDF', 'auctionforge') ?></a>
                                    </div>
                                </td>
                            </tr>
                            <% }); %>
                        </tbody>
                    </table>
                </div>
            <% } else { %>
                <div class="bp-col bp-text-center"><p><?= __('No invoices found.', 'auctionforge') ?></p></div>
            <% } %>
        </div>
    </div>
</script>
<script type="text/template" id="account-empty-template">
    <div class="bp-row bp-fix-width-lot">
        <div class="bp-d-flex bp-f-wrap bp-f-center bp-mb-30">
            <p><%- message %></p>
        </div>
    </div>
</script>
<script type="text/template" id="account-link-profile">
    <% if (login) {%>
    <a href="<?= $profileLink ?>" class="bp-login-link">
        <i class="icon-user"></i> <span><?= __('Profile', 'auctionforge') ?></span>
    </a>
    <% } else { %>
    <a href="#" class="bp-login-link" data-micromodal-trigger="modal-login">
        <i class="icon-user"></i> <span><?= __('Login', 'auctionforge') ?></span>
    </a>
    <% } %>
</script>
<script type="text/template" id="account-link-register">
    <% if (!login) {%>
    <a href="#" class="bp-login-link" data-micromodal-trigger="modal-register">
        <span><?= __('Register', 'auctionforge') ?></span>
    </a>
    <% } %>
</script>
<script type="text/template" id="main-notice-template">
    <div class="bp-container">
        <div class="bp-row">
            <% if (type === 'PENDING') { %>
            <div class="bp-col bp-alert alert bp-alert-danger alert-primary bp-text-center bp-mt-10" role="alert">
                <p><?= __('Your account is pending approval. You will receive an email when you are approved to bid.', 'auctionforge') ?></p>
            </div>
            <% } else if (type === 'INCOMPLETE_PROFILE') { %>
                <% if (emailConfirmed !== undefined && emailConfirmed === true) { %>
                    <div class="bp-col bp-alert alert bp-alert-danger alert-primary bp-text-center bp-mt-10" role="alert">
                        <p><?= __('Please complete your registration to participate in our auctions.', 'auctionforge') ?> <a href="<?= $profileLink ?>"><strong><?= __('Profile', 'auctionforge') ?></strong></a></p>
                    </div>
                <% } else if (emailConfirmed === false) { %>
                    <div class="bp-col bp-alert alert bp-alert-danger alert-primary bp-text-center bp-mt-10" role="alert">
                        <p><?= __('Please complete your registration to participate in our auctions. <a href=\'#\' id=\'resendEmailSection\'>Resend email</a>.', 'auctionforge') ?> <?= __('Wrong email? <a href=\'#\' id=\'changeEmailSection\'>Change it</a>.', 'auctionforge') ?></p>
                    </div>
                <% } %>
            <% } else { %>
                <div class="bp-col bp-alert alert bp-alert-danger alert-primary bp-text-center bp-mt-10" role="alert">
                    <p><?= __('Your account has been blocked from participating in our auctions. Please contact the auction house for assistance.', 'auctionforge') ?></p>
                </div>
            <% } %>
        </div>
    </div>
</script>
<?php if (\auctionforge\inc\services\BrevoSMS::isEnabled()) : ?>
<script>
(function(){
    var ajaxUrl = '<?= admin_url("admin-ajax.php") ?>';
    var security = typeof bidspiritAjax !== 'undefined' ? bidspiritAjax.nonce : '';

    // Toggle SMS details panel
    document.addEventListener('change', function(e) {
        if (e.target && e.target.id === 'af-sms-opt-in') {
            var details = document.getElementById('af-sms-details');
            if (details) details.style.display = e.target.checked ? 'block' : 'none';
        }
    });

    // Load SMS prefs when profile renders
    window.afLoadSmsPrefs = function(email) {
        if (!email || !security) return;
        var fd = new FormData();
        fd.append('action', 'auctionforge_sms_load');
        fd.append('security', security);
        fd.append('email', email);
        fetch(ajaxUrl, { method: 'POST', body: fd })
            .then(function(r){ return r.json(); })
            .then(function(d){
                if (!d.success || !d.data.sms_available) return;
                var optIn = document.getElementById('af-sms-opt-in');
                var details = document.getElementById('af-sms-details');
                if (!optIn || !details) return;
                if (d.data.has_subscription) {
                    optIn.checked = !!d.data.sms_opt_in;
                    details.style.display = d.data.sms_opt_in ? 'block' : 'none';
                    var phoneEl = document.getElementById('af-sms-phone');
                    var ccEl = document.getElementById('af-sms-cc');
                    if (phoneEl) phoneEl.value = d.data.phone_number || '';
                    if (ccEl) {
                        for (var i = 0; i < ccEl.options.length; i++) {
                            if (ccEl.options[i].value === d.data.country_code) { ccEl.selectedIndex = i; break; }
                        }
                    }
                    var pub = document.getElementById('af-sms-published');
                    var soon = document.getElementById('af-sms-starts-soon');
                    var live = document.getElementById('af-sms-live-soon');
                    var outb = document.getElementById('af-sms-outbid');
                    if (pub) pub.checked = !!d.data.opt_auction_published;
                    if (soon) soon.checked = !!d.data.opt_auction_starts_soon;
                    if (live) live.checked = !!d.data.opt_item_live_soon;
                    if (outb) outb.checked = !!d.data.opt_outbid;
                }
            }).catch(function(){});
    };

    // Save SMS prefs
    window.afSaveSmsPrefs = function(email) {
        if (!email || !security) return;
        var optIn = document.getElementById('af-sms-opt-in');
        if (!optIn) return;
        var fd = new FormData();
        fd.append('action', 'auctionforge_sms_save');
        fd.append('security', security);
        fd.append('email', email);
        fd.append('sms_opt_in', optIn.checked ? 1 : 0);
        fd.append('phone', (document.getElementById('af-sms-phone') || {}).value || '');
        fd.append('country_code', (document.getElementById('af-sms-cc') || {}).value || '1');
        fd.append('opt_auction_published', (document.getElementById('af-sms-published') || {}).checked ? 1 : 0);
        fd.append('opt_auction_starts_soon', (document.getElementById('af-sms-starts-soon') || {}).checked ? 1 : 0);
        fd.append('opt_item_live_soon', (document.getElementById('af-sms-live-soon') || {}).checked ? 1 : 0);
        fd.append('opt_outbid', (document.getElementById('af-sms-outbid') || {}).checked ? 1 : 0);
        var statusEl = document.getElementById('af-sms-status');
        fetch(ajaxUrl, { method: 'POST', body: fd })
            .then(function(r){ return r.json(); })
            .then(function(d){
                if (statusEl) {
                    statusEl.textContent = d.success ? '✅ SMS preferences saved' : '❌ ' + (d.data || 'Error');
                    statusEl.style.color = d.success ? '#00a32a' : '#d63638';
                    setTimeout(function(){ statusEl.textContent = ''; }, 4000);
                }
            }).catch(function(){
                if (statusEl) { statusEl.textContent = '❌ Network error'; statusEl.style.color = '#d63638'; }
            });
    };

    // Hook into profile form submit
    document.addEventListener('click', function(e) {
        if (e.target && e.target.id === 'sendUpdate') {
            // Get user email from profile form
            var emailField = document.querySelector('#updateDetailsSection input[name="email"]');
            if (emailField && emailField.value) {
                setTimeout(function(){ window.afSaveSmsPrefs(emailField.value); }, 200);
            }
        }
    });
})();
</script>
<?php endif; ?>