@model PaymentModel

<div class="top-header">
    <div class="header">
        <div class="header__icon">
            @if (Model.CustomLogoLink != null)
            {
                <img class="header__icon__img" src="@Model.CustomLogoLink" height="40">
            }
            else
            {
                <img class="header__icon__img" src="~/img/logo-white.png" height="40">
            }
        </div>
        <div class="close-icon close-action">
            &#10006;
        </div>
    </div>
    <div class="timer-row">
        <div class="timer-row__progress-bar" style="width: 0%;"></div>
        <div class="timer-row__spinner">
            <partial name="Checkout-Spinner" />
        </div>
        <div class="timer-row__message">
            <span v-if="srvModel.status === 'expired' || srvModel.status === 'invalid'">
                {{$t("Invoice expired")}}
            </span>
            <span v-else-if="expiringSoon">
                {{$t("Invoice expiring soon...")}}
            </span>
            <span v-else>
                {{$t("Awaiting Payment...")}}
            </span>
        </div>
        <div class="timer-row__time-left">@Model.TimeLeft</div>
    </div>
</div>
<div class="order-details">
    <div class="currency-selection">
        <div class="single-item-order__left">
            <div style="font-weight: 600;">
                {{$t("Pay with")}}
            </div>
        </div>
        <div class="single-item-order__right">
            @if (Model.AvailableCryptos.Count > 1)
            {
                <div class="payment__currencies cursorPointer" onclick="openPaymentMethodDialog()">
                    <img v-bind:src="srvModel.cryptoImage" />
                    <span class="clickable_underline">{{srvModel.paymentMethodName}} ({{srvModel.cryptoCode}})</span>
                    <span v-show="srvModel.isLightning">&#9889;</span>
                    <span class="clickable_indicator fa fa-angle-right"></span>
                </div>
                <div id="vexPopupDialog">
                    <ul class="vexmenu">
                        @foreach (var crypto in Model.AvailableCryptos)
                        {
                            <li class="vexmenuitem">
                                <a href="@crypto.Link" onclick="return closePaymentMethodDialog('@crypto.PaymentMethodId');">
                                    <img alt="@crypto.PaymentMethodName" src="@crypto.CryptoImage" />
                                    @crypto.PaymentMethodName
                                    @(crypto.IsLightning ? Html.Raw("&#9889;") : null)
                                    <span>@crypto.CryptoCode</span>
                                </a>
                            </li>
                        }
                    </ul>
                </div>
            }
            else
            {
                <div class="payment__currencies">
                    <img v-bind:src="srvModel.cryptoImage" />
                    <span>{{srvModel.paymentMethodName}} ({{srvModel.cryptoCode}})</span>
                    <span v-show="srvModel.isLightning">&#9889;</span>
                </div>

            }
            <div class="payment__spinner">
                <partial name="Checkout-Spinner" />
            </div>
        </div>
    </div>

    <div class="single-item-order buyerTotalLine">
        <div class="single-item-order__left">
            <div class="single-item-order__left__name">
                {{ srvModel.storeName }}
            </div>
            <div class="single-item-order__left__description">
                {{ srvModel.itemDesc }}
            </div>
        </div>
        <div class="single-item-order__right">
            <div class="single-item-order__right__btc-price" v-if="srvModel.status === 'paid'">
                <span>{{ srvModel.btcPaid }} {{ srvModel.cryptoCode }}</span>
            </div>
            <div class="single-item-order__right__btc-price" v-else>
                <span>{{ srvModel.btcDue }} {{ srvModel.cryptoCode }}</span>
            </div>

            <div class="single-item-order__right__ex-rate" v-if="srvModel.orderAmountFiat">
                1 {{ srvModel.cryptoCode }} = {{ srvModel.rate }}
            </div>
        </div>

        <span class="fa fa-angle-double-down"></span>
        <span class="fa fa-angle-double-up"></span>
    </div>
    <line-items>
        <div class="line-items">
            <div class="line-items__item">
                <div class="line-items__item__label">{{$t("Order Amount")}}</div>
                <div class="line-items__item__value">{{srvModel.orderAmount}} {{ srvModel.cryptoCode }}</div>
            </div>
            <div class="line-items__item line-items_fiatvalue" v-if="srvModel.orderAmountFiat">
                <div class="line-items__item__label">&nbsp;</div>
                <div class="line-items__item__value single-item-order__right__ex-rate">
                    {{srvModel.orderAmountFiat}}
                </div>
            </div>
            <div class="line-items__item" v-show="srvModel.networkFee > 0">
                <div class="line-items__item__label">
                    <span>{{$t("Network Cost")}}</span>
                </div>
                <div class="line-items__item__value">
                    <span v-if="srvModel.IsMultiCurrency">
                        {{ srvModel.networkFee }} {{ srvModel.cryptoCode }}
                    </span>
                    <span v-else>
                        {{$t("txCount", {count: srvModel.txCount})}} x {{ srvModel.networkFee }} {{ srvModel.cryptoCode }}
                    </span>
                </div>
            </div>
            <div class="line-items__item">
                <div class="line-items__item__label">
                    <span>{{$t("Already Paid")}}</span>
                </div>
                <div class="line-items__item__value">-{{srvModel.btcPaid }} {{ srvModel.cryptoCode }}</div>
            </div>
            <div class="line-items__item line-items__item--total">
                <div class="line-items__item__label">{{$t("Due")}}</div>
                <div class="line-items__item__value">{{srvModel.btcDue}} {{ srvModel.cryptoCode }}</div>
            </div>
        </div>
    </line-items>
    <div class="payment-tabs">
        <div class="payment-tabs__tab active" id="scan-tab">
            <span>{{$t("Scan")}}</span>
        </div>
        <div class="payment-tabs__tab" id="copy-tab">
            <span>{{$t("Copy")}}</span>
        </div>
        @if (Model.ChangellyEnabled)
        {
            <div class="payment-tabs__tab" id="altcoins-tab">
                <span>{{$t("Conversion")}}</span>
            </div>
            <div id="tabsSlider" class="payment-tabs__slider three-tabs"></div>
        }
        else
        {
            <div id="tabsSlider" class="payment-tabs__slider"></div>
        }
    </div>
</div>

<div class="payment-box">
    <div class="bp-view payment manual-flow enter-contact-email active" id="emailAddressView">
        <form class="manual__step-one refund-address-form contact-email-form" id="emailAddressForm" name="emailAddressForm" novalidate="">
            <div class="manual__step-one__header">
                <span>{{$t("Contact and Refund Email")}}</span>
            </div>
            <div class="manual__step-one__instructions">
                <span class="initial-label">
                    <span>{{$t("Contact_Body")}}</span>
                </span>
                <span class="submission-error-label">{{$t("Please enter a valid email address")}}</span>
            </div>
            <div class="input-wrapper">
                <input class="bp-input email-input ng-pristine ng-invalid ng-touched" id="emailAddressFormInput" v-bind:placeholder="$t('Your email')" type="email">
                <bp-loading-button>
                    <button type="submit" class="action-button" style="margin-top: 15px;">
                        <span class="button-text">{{$t("Continue")}}</span>
                        <div class="loader-wrapper">
                            <partial name="Checkout-Spinner" />
                        </div>
                    </button>
                </bp-loading-button>
            </div>
        </form>
    </div>
    <div class="bp-view payment scan" id="scan">
        <div class="wrapBtnGroup" v-bind:class="{ invisible: lndModel === null }">
            <div class="btnGroupLnd">
                <button onclick="lndToggleBolt11()" v-bind:class="{ active: lndModel != null && lndModel.toggle === 0 }"
                        v-bind:title="$t('BOLT 11 Invoice')">
                    {{$t("BOLT 11 Invoice")}}
                </button>
                <button onclick="lndToggleNode()" v-bind:class="{ active: lndModel != null && lndModel.toggle === 1 }"
                        v-bind:title="$t('Node Info')">
                    {{$t("Node Info")}}
                </button>
            </div>
        </div>
        <div class="payment__scan">
            <img v-bind:src="srvModel.cryptoImage" class="qr_currency_icon" />
            <qrcode v-bind:val="scanDisplayQr" v-bind:size="256" bg-color="#f5f5f7" fg-color="#000">
            </qrcode>
        </div>
        <div class="payment__details__instruction__open-wallet">
            <a class="payment__details__instruction__open-wallet__btn action-button" v-bind:href="srvModel.invoiceBitcoinUrl">
                <span>{{$t("Open in wallet")}}</span>
            </a>
        </div>
    </div>

    <div class="bp-view payment manual-flow" id="copy">
        <div class="manual__step-two__instructions">
            <span i18n="">{{$t("CompletePay_Body", srvModel)}}</span>
        </div>
        <div class="copyLabelPopup">
            <span>{{$t("Copied")}}</span>
        </div>
        <nav v-if="srvModel.isLightning" class="copyBox">
            <div class="copySectionBox bottomBorder">
                <label>{{$t("BOLT 11 Invoice")}}</label>
                <div class="inputWithIcon _copyInput">
                    <input type="text" class="checkoutTextbox" v-bind:value="srvModel.btcAddress" readonly="readonly" />
                    <img v-bind:src="srvModel.cryptoImage" />
                </div>
            </div>
            <div class="separatorGem"></div>
            <div class="copySectionBox">
                <label>{{$t("Node Info")}}</label>
                <div class="inputWithIcon _copyInput">
                    <input type="text" class="checkoutTextbox" v-bind:value="srvModel.peerInfo" readonly="readonly" />
                    <img v-bind:src="srvModel.cryptoImage" />
                </div>
            </div>
        </nav>
        <nav v-else class="copyBox">
            <div class="copySectionBox bottomBorder">
                <label>{{$t("Amount")}}</label>
                <div class="copyAmountText copy-cursor _copySpan">
                    <span>{{srvModel.btcDue}}</span> {{ srvModel.cryptoCode }}
                </div>
            </div>
            <div class="separatorGem"></div>
            <div class="copySectionBox">
                <label>{{$t("Address")}}</label>
                <div class="inputWithIcon _copyInput">
                    <input type="text" class="checkoutTextbox" v-bind:value="srvModel.btcAddress" readonly="readonly" />
                    <img v-bind:src="srvModel.cryptoImage" />
                </div>
            </div>
        </nav>
    </div>
    @if (Model.ChangellyEnabled)
    {
        <div id="altcoins" class="bp-view payment manual-flow">
            <nav v-if="srvModel.isLightning">
                <div class="manual__step-two__instructions">
                    <span>
                        {{$t("ConversionTab_Lightning")}}
                    </span>
                </div>
            </nav>
            <nav v-else>
                <div class="manual__step-two__instructions">
                    <span>
                        {{$t("ConversionTab_BodyTop", srvModel)}}
                        <br /><br />
                        {{$t("ConversionTab_BodyDesc", srvModel)}}
                    </span>
                </div>
                <center>             
                    <changelly inline-template
                               :merchant-id="srvModel.changellyMerchantId"
                               :store-id="srvModel.storeId"
                               :to-currency="srvModel.paymentMethodId"
                               :to-currency-due="srvModel.changellyAmountDue"
                               :to-currency-address="srvModel.btcAddress">
                        <div class="changelly-component">
                            <div class="changelly-component-dropdown-holder" v-show="prettyDropdownInstance">
                                <select 
                                        v-model="selectedFromCurrency"
                                        :disabled="isLoading"
                                        v-on:change="onCurrencyChange($event)"
                                        ref="changellyCurrenciesDropdown">
                                    <option value="">{{$t("ConversionTab_CurrencyList_Select_Option")}}</option>
                                    <option v-for="currency of currencies" 
                                            :data-prefix="'<img src=\''+currency.image+'\'/>'"
                                            :value="currency.name">
                                       {{currency.fullName}}
                                    </option>
                                </select>
                            </div>
                            <a  v-on:click="openDialog($event)" :href="url" class="changelly-component-button">
                                <img src="https://changelly.com/pay_button.png" alt="Changelly" v-show="url"/>
                            </a>
                            <button class="retry-button" v-if="calculateError" v-on:click="retry('calculateAmount')">
                                {{$t("ConversionTab_CalculateAmount_Error")}}
                            </button>
                            <button class="retry-button" v-if="currenciesError" v-on:click="retry('loadCurrencies')">
                                {{$t("ConversionTab_LoadCurrencies_Error")}}
                            </button>
                            <div v-show="isLoading" class="general__spinner">
                                <partial name="Checkout-Spinner"/>
                            </div>
                        </div>
                    </changelly>
                </center>
            </nav>
        </div>
    }

    <div class="bp-view" id="paid">
        <div class="status-block">
            <div class="success-block">
                <div class="status-icon">
                    <div class="status-icon__wrapper">
                        <div class="inner-wrapper">
                            <div class="status-icon__wrapper__icon">
                                <img src="~/imlegacy/checkmark.svg">
                            </div>
                            <div class="status-icon__wrapper__outline"></div>
                        </div>
                    </div>
                </div>
                <div class="success-message">{{$t("This invoice has been paid")}}</div>
                <a class="action-button" :href="srvModel.merchantRefLink" v-show="srvModel.merchantRefLink && !isModal">
                    <span>{{$t("Return to StoreName", srvModel)}}</span>
                </a>
                <button class="action-button close-action" v-show="isModal">
                    <span>{{$t("Return to StoreName", srvModel)}}</span>
                </button>
            </div>
        </div>
        <div class="button-wrapper refund-address-form-container" id="refund-overpayment-button">
        </div>
    </div>

    <div class="bp-view expired" id="archived">
        <div class="expired-icon">
            <img src="~/imlegacy/archived.svg">
        </div>
        <div class="archived__message">
            <div class="archived__message__header">
                <span>{{$t("This invoice has been archived")}}</span>
            </div>
            <div>
                <span>{{$t("Archived_Body")}}</span>
            </div>
        </div>
    </div>

    <div class="bp-view expired" id="expired">
        <div>
            <div class="expired__body" style="margin-bottom: 20px;">
                <div class="expired__header">{{$t("What happened?")}}</div>
                <div class="expired__text" i18n="">
                    {{$t("InvoiceExpired_Body_1", {storeName: srvModel.storeName, maxTimeMinutes: @Model.MaxTimeMinutes})}}
                </div>
                <div class="expired__text">
                    {{$t("InvoiceExpired_Body_2")}}
                </div>
                <div class="expired__text">
                    {{$t("InvoiceExpired_Body_3")}}
                </div>
                <div class="expired__text expired__text__smaller">
                    <span class="expired__text__bullet">{{$t("Invoice ID")}}</span>:
                    {{srvModel.invoiceId}}
                    <br />
                    <span class="expired__text__bullet">{{$t("Order ID")}}</span>:
                    {{srvModel.orderId}}
                </div>
            </div>
            <a class="action-button" :href="srvModel.merchantRefLink" v-show="srvModel.merchantRefLink && !isModal">
                <span>{{$t("Return to StoreName", srvModel)}}</span>
            </a>
            <button class="action-button close-action" v-show="isModal">
                <span>{{$t("Return to StoreName", srvModel)}}</span>
            </button>
        </div>
    </div>
</div>