{{user_navs = True}}
{{extend 'layout.html'}}

    {{ if settings.academy_mode: }}
    <script src="https://www.paypalobjects.com/api/checkout.js" type="text/javascript"></script>
    {{ pass }}
{{block statusbar}}
{{end}}

<div class="container">
    <div class="col-md-8 col-md-offset-2" style="font-size: large;">
        <h1>Support Runestone Interactive</h1>

        <p>Your support of Runestone Interactive is vital to our future.
            Runestone has grown from one introductory computer science
            course in 2012 to supporting thousands of courses and hundreds of thousands of
            students! Since the Fall of 2018 Runestone Academy has saved students over
            $21 million in textbook fees!</p>
        <p>Your support ensures that great interactive textbooks
            will remain free. It also:</p>
            <ul>
                <li>Supports the ongoing development of the Runestone platform.</li>
                <li>Motivates new authors to write more books on new topics.</li>
                <li>Pays our server bills.</li>
                <li>Creates resources to train and support instructors.</li>
            </ul>
        <p>Thank You! <br/>
            Brad Miller, Founder and Chief Developer -- Runestone Interactive LLC</p>
        <div class="panel panel-default">
            <div class="panel-heading">Donation Amount</div>
            <div class="panel panel-body">
                <input type="radio" name="donate" id="donate10" value="10.00"> <label for="donate10">$10</label><br>
                <input type="radio" name="donate" id="donate20" value="20.00"> <label for="donate20">$20</label><br>
                <input type="radio" name="donate" id="donate50" value="50.00"> <label for="donate50">$50</label><br>
                Other: <input type="text" name="donate" id="donateother" value=""/><br>
                <a class="btn btn-warning" href="{{=URL('index')}}" role="button">Sorry, not Today</a><br>
                If you don't PayPal, see below for Venmo option!
            </div>
        </div>
    </div>
</div>
<div id="paypal-button"></div>

<div class="panel panel-default" style="text-align: center; font-size: large; width: 80%; margin-left: auto; margin-right: auto;">
    <div class="panel-heading" >
        <h2>Support with Venmo</h2>
    </div>
    <div class="panel panel-body">
    <p style="padding: 5px;">For your Convenience you can also <strong>Venmo</strong> your support to @RunestoneInteractive
        <button type="button" class="btn btn-info btn-sm" onclick="venmosupport()">I have Venmo'd my Support</button>
    </p>
    </div>
</div>

<script>
    paypal.Button.render({
      env: 'production', // Or 'sandbox', 'production'
      client: {
          sandbox: 'AVsIrTPVGQOcMILmCSyfLioKBiqdTgAzC_ax74na1CZ0HZV0EPf9Vq7PDp_sWPeqNitq0yRGRYq5vjDp',
          production: 'ASkp77N-Kiw5GKOF_0I13P0GCW6lrnaukdVqeFykz7zBT9F-WXHRIisBsau5VEmC-vCKCzt--41kaOjb'
      },

      commit: true, // Show a 'Pay Now' button

      style: {
        color: 'blue',
        size: 'responsive',
        layout: 'vertical'
      },

      payment: function(data, actions) {
        var amt_opts = document.getElementsByName("donate")
        var amt = ""
        for (let rb of amt_opts) {
            if (rb.type === "radio" & rb.checked) {
                amt = rb.value
            }
        }
        if (amt === "") {
            amt = document.getElementById("donateother").value
        }
        return actions.payment.create({
                payment: {
                    transactions: [
                        {
                            amount: { total: amt, currency: 'USD' }
                        }
                    ]
                }
            });
      },

      onAuthorize: function(data, actions) {
        return actions.payment.execute().then(function(payment) {

                // The payment is complete!
                // You can now show a confirmation message to the customer
            $.get("/{{=request.application}}/ajax/save_donate")
            alert('Payment successful - Thank you! ')
            window.location.href = "/{{=request.application}}/default"
            });
      },

      onCancel: function(data, actions) {

• Buyer cancelled the payment

      },

      onError: function(err) {

• An error occurred during the transaction

      }
    }, '#paypal-button');

    function venmosupport() {
        $.get("/{{=request.application}}/ajax/save_donate");
        window.location.href = "/{{=request.application}}/default";
    }
</script>

{{ if request.args: }}
<script>
    $(document).ready(function() {
        var amt = "{{=request.args(0)}}";
        var btn = document.getElementById("donate"+amt);
        if (btn) {
            btn.checked = true;
        }
    });
</script>
{{pass}}