<?php

/**
 * Phone verification modal (BidSpirit users/phone/* APIs).
 * A verified phone is required to place absentee bids / join live auctions.
 * Rendered in the footer by BidspiritViews::bp_footer(). Wired up in assets/js/app.js
 * (showVerifyPhoneModal / sendPhoneVerificationCode / checkPhoneVerificationCode).
 */

?>
<div id="modal-verify-phone" aria-hidden="true" class="bp-modal modal micromodal-slide">
    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
        <div class="modal__overlay__inner" tabindex="-1">
            <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-verify-phone-title">
                <header class="modal__header">
                    <h2 class="modal__title" id="modal-verify-phone-title">
                        <?= __('Verify your phone', 'auctionforge') ?>
                    </h2>
                </header>
                <main class="modal__content" id="modal-verify-phone-content">
                    <button class="modal__close" aria-label="<?= esc_attr__('Close modal', 'auctionforge') ?>" data-micromodal-close></button>

                    <p class="bp-text bp-text-small">
                        <?= __('We will send you a verification code. A verified phone is required to place bids.', 'auctionforge') ?>
                    </p>

                    <div class="bp-form-group">
                        <div class="bp-form-group__inner bp-form-group__inline bp-form-group__list bp-form-group__phone">
                            <select id="verifyPhoneCountry" class="bp-form-control" style="width:100%"></select>
                            <input type="tel" id="verifyPhoneNumber" class="bp-form-control"
                                   placeholder="<?= esc_attr__('Phone number', 'auctionforge') ?>">
                        </div>
                    </div>

                    <div id="verifyPhoneSendStep" class="bp-form-group bp-d-flex bp-f-wrap bp-gap-1">
                        <button type="button" id="verifyPhoneSms" class="bp-btn bp-btn-black">
                            <?= __('Send code via SMS', 'auctionforge') ?>
                        </button>
                        <button type="button" id="verifyPhoneCall" class="bp-btn bp-btn-default">
                            <?= __('Send code via call', 'auctionforge') ?>
                        </button>
                    </div>

                    <div id="verifyPhoneCodeStep" class="bp-form-group hidden">
                        <div class="bp-form-group__inner">
                            <input type="text" inputmode="numeric" maxlength="4" id="verifyPhoneCode"
                                   class="bp-form-control" placeholder="<?= esc_attr__('Enter the 4-digit code', 'auctionforge') ?>">
                        </div>
                        <div class="bp-d-flex bp-f-wrap bp-gap-1">
                            <button type="button" id="verifyPhoneCheck" class="bp-btn bp-btn-black">
                                <?= __('Verify code', 'auctionforge') ?>
                            </button>
                            <button type="button" id="verifyPhoneResend" class="bp-btn bp-btn-default bp-btn-sm">
                                <?= __('Resend code', 'auctionforge') ?>
                            </button>
                        </div>
                    </div>

                    <p id="verifyPhoneStatus" class="hidden"></p>
                </main>
            </div>
        </div>
    </div>
</div>
