@model PaymentModel

<div id="testing">
    <hr class="my-3" />
    <p class="alert alert-danger" style="display: none; word-break: break-all;"></p>
    <p class="alert alert-success" style="display: none; word-break: break-all;"></p>
    <form id="test-payment" action="/i/@Model.InvoiceId/test-payment" method="post" class="cheat-mode form-inline my-2">
        <input name="CryptoCode" type="hidden" value="@Model.PaymentMethodCurrency">
        <div class="form-group mb-1">
            <label for="test-payment-amount" class="control-label">{{$t("Fake a @Model.PaymentMethodCurrency payment for testing")}}</label>
            <div class="input-group">
                <input id="test-payment-amount" name="Amount" type="number" step="0.00000001" min="0" class="form-control" placeholder="Amount" value="@Model.Due" />
                <div id="test-payment-crypto-code" class="input-group-addon">@Model.PaymentMethodCurrency</div>
            </div>
        </div>
        <button id="FakePayment" class="btn btn-primary" type="submit">{{$t("Fake Payment")}}</button>
        <p class="text-muted mt-1">{{$t("This is the same as running bitcoin-cli.sh sendtoaddress xxx")}}</p>
    </form>
    <form id="expire-invoice" action="/i/@Model.InvoiceId/expire" method="post" class="mb-1">
        <button class="btn btn-secondary" type="submit">{{$t("Expire Invoice Now")}}</button>
    </form>
    @* TODO
    <form id="expire-monitoring" action="/i/@Model.InvoiceId/expire-monitoring" method="post" class="mb-1">
        <!-- TODO only show when expired -->
        <button class="btn btn-secondary" type="submit">{{$t("Expire Monitoring Now")}} (TODO)</button>
    </form>
    *@
     <form id="mine-block" action="/i/@Model.InvoiceId/mine-blocks" method="post" class="cheat-mode form-inline my-2">
         <!-- TODO only show when BTC On-chain -->
         <div class="form-group mb-1">
             <label for="block-count" class="control-label">{{$t("Mine a few blocks to test processing and settlement.")}}</label>
             <div class="input-group">
                 <input id="block-count" name="BlockCount" type="number" step="1" min="1" class="form-control" value="1" />
                 <div class="input-group-addon">{{$t("Blocks")}}</div>
             </div>
         </div>
         <button class="btn btn-primary" type="submit">{{$t("Mine")}}</button>
     </form>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        const cheatForms = $('form.cheat-mode');
        const expireForm = $('form#expire-invoice');
        
        const successAlert = $('#testing p.alert-success');
        const errorAlert = $('#testing p.alert-danger');
        
        cheatForms.submit(e => {
             e.preventDefault();
             
             const form = $(e.target);
             const url = form.attr('action');
             const data = form.serialize();
             const inputField = form.find('input[type=number]');
             const submitButton = form.find('button[type=submit]');
             
             successAlert.hide();
             errorAlert.hide();
             inputField.prop('disabled', true);
             submitButton.prop('disabled', true);
             
             $.post({
                 url,
                 data,
                 success(data) {
                     const { successMessage, amountRemaining } = data;
                     successAlert.html(successMessage);
                     successAlert.show();
                     if (amountRemaining){
                         if(amountRemaining > 0) {
                             inputField.val(amountRemaining);
                         } else {
                             form.hide();
                             expireForm.hide();
                         }
                     }
                 },
                 error(xhr) {
                     const { errorMessage } = JSON.parse(xhr.responseText);
                     errorAlert.html(errorMessage).show();
                 },
                 complete() {
                     inputField.prop('disabled', false);
                     submitButton.prop('disabled', false);
                 }
             });
         });
        
        // Expire invoice form
        expireForm.submit(e => {
            e.preventDefault();
            
            const form = $(e.target);
            const submitButton = form.find('button[type=submit]');
            const expireButton = form.find('[type=submit]');
            successAlert.hide();
            errorAlert.hide();
                         
            $.post({
                url: expireForm.attr('action'),
                success(data) {
                    const { successMessage } = data;
                    successAlert.html(successMessage).show();
                    expireButton.hide();
                },
                complete() {
                    submitButton.prop('disabled', false);
                },
                error(xhr) {
                    const { errorMessage } = JSON.parse(xhr.responseText);
                    errorAlert.html(errorMessage).show();
                }
            });
        });
    });
</script>