<section class="no-bg">
  <div class="container position-relative p-0 mt-90" style="max-width: 700px;">
    <h3 class="bg-theme-colored p-15 mt-0 mb-0 text-white">Donation Through PayPal (One Time / Recurring)</h3>
    <div class="section-content bg-white p-30">
      <div class="row">
        <div class="col-md-12">
          <!-- ===== START: Paypal Both Onetime/Recurring Form ===== -->
          <form id="popup_paypal_donate_form_onetime_recurring">
            <div class="row">
              <div class="col-md-12">
                <img src="images/payment-card-logo-sm.html" alt="">
                <div class="form-group mt-20 mb-20">
                  <label><strong>Payment Type</strong></label> <br>
                  <label class="radio-inline">
                    <input type="radio" checked="" value="one_time" name="payment_type"> 
                    One Time
                  </label>
                  <label class="radio-inline">
                    <input type="radio" value="recurring" name="payment_type"> 
                    Recurring
                  </label>
                </div>
              </div>

              <div class="col-sm-12" id="donation_type_choice">
                <div class="form-group mb-20">
                  <label><strong>Donation Type</strong></label>
                  <div class="radio mt-5">
                    <label class="radio-inline">
                      <input type="radio" value="D" name="t3" checked="">
                      Daily</label>
                    <label class="radio-inline">
                      <input type="radio" value="W" name="t3">
                      Weekly</label>
                    <label class="radio-inline">
                      <input type="radio" value="M" name="t3">
                      Monthly</label>
                    <label class="radio-inline">
                      <input type="radio" value="Y" name="t3">
                      Yearly</label>
                  </div>
                </div>
              </div>

              <div class="col-sm-6">
                <div class="form-group mb-20">
                  <label><strong>I Want to Donate for</strong></label>
                  <select name="item_name" class="form-control">
                    <option value="Educate Children">Educate Children</option>
                    <option value="Child Camps">Child Camps</option>
                    <option value="Clean Water for Life">Clean Water for Life</option>
                    <option value="Campaign for Child Poverty">Campaign for Child Poverty</option>
                  </select>
                </div>
              </div>

              <div class="col-sm-6">
                <div class="form-group mb-20">
                  <label><strong>Currency</strong></label>
                  <select name="currency_code" class="form-control">
                    <option value="">Select Currency</option>
                    <option value="USD" selected="selected">USD - U.S. Dollars</option>
                    <option value="AUD">AUD - Australian Dollars</option>
                    <option value="BRL">BRL - Brazilian Reais</option>
                    <option value="GBP">GBP - British Pounds</option>
                    <option value="HKD">HKD - Hong Kong Dollars</option>
                    <option value="HUF">HUF - Hungarian Forints</option>
                    <option value="INR">INR - Indian Rupee</option>
                    <option value="ILS">ILS - Israeli New Shekels</option>
                    <option value="JPY">JPY - Japanese Yen</option>
                    <option value="MYR">MYR - Malaysian Ringgit</option>
                    <option value="MXN">MXN - Mexican Pesos</option>
                    <option value="TWD">TWD - New Taiwan Dollars</option>
                    <option value="NZD">NZD - New Zealand Dollars</option>
                    <option value="NOK">NOK - Norwegian Kroner</option>
                    <option value="PHP">PHP - Philippine Pesos</option>
                    <option value="PLN">PLN - Polish Zlotys</option>
                    <option value="RUB">RUB - Russian Rubles</option>
                    <option value="SGD">SGD - Singapore Dollars</option>
                    <option value="SEK">SEK - Swedish Kronor</option>
                    <option value="CHF">CHF - Swiss Francs</option>
                    <option value="THB">THB - Thai Baht</option>
                    <option value="TRY">TRY - Turkish Liras</option>
                  </select>
                </div>
              </div>

              <div class="col-sm-12">
                <div class="form-group mb-20">
                  <label><strong>How much do you want to donate?</strong></label>
                  <div class="radio mt-5">
                    <label class="radio-inline">
                      <input type="radio" name="amount" value="20">
                      $20</label>
                    <label class="radio-inline">
                      <input type="radio" name="amount" value="50">
                      $50</label>
                    <label class="radio-inline">
                      <input type="radio" name="amount" value="100">
                      $100</label>
                    <label class="radio-inline">
                      <input type="radio" name="amount" value="200">
                      $200</label>
                    <label class="radio-inline">
                      <input type="radio" name="amount" value="500">
                      $500</label>
                    <label class="radio-inline">
                      <input type="radio" name="amount" value="other">
                      Other Amount</label>
                  </div>
                  <div id="custom_other_amount">
                    <label><strong>Custom Amount:</strong></label>
                  </div>
                </div>
              </div>

              <div class="col-sm-12">
                <div class="form-group">
                  <button type="submit" class="btn btn-flat btn-dark btn-theme-colored mt-10 pl-30 pr-30" data-loading-text="Please wait...">Donate Now</button>
                </div>
              </div>
            </div>
          </form>
          
          <!-- Script for Donation Form Custom Amount -->
          <script type="text/javascript">
            $(document).ready(function(e) {
              var $donation_form = $("#popup_paypal_donate_form_onetime_recurring");
              //toggle custom amount
              var $custom_other_amount = $donation_form.find("#custom_other_amount");
              $custom_other_amount.hide();
              $donation_form.find("[name='amount']").change(function() {
                  var $this = $(this);
                  if ($this.val() == 'other') {
                    $custom_other_amount.show().append('<div class="input-group"><span class="input-group-addon">$</span> <input id="input_other_amount" type="text" name="amount" class="form-control" value="100"/></div>');
                  }
                  else{
                    $custom_other_amount.children( ".input-group" ).remove();
                    $custom_other_amount.hide();
                  }
              });

              //toggle donation_type_choice
              var $donation_type_choice = $donation_form.find("#donation_type_choice");
              $donation_type_choice.hide();
              $("input[name='payment_type']").change(function() {
                  if (this.value == 'recurring') {
                      $donation_type_choice.show();
                  }
                  else {
                      $donation_type_choice.hide();
                  }
              });


              // submit form on click
              $donation_form.on('submit', function(e){
                  //$( "#popup_paypal_donate_form-onetime" ).submit();
                  var item_name = $donation_form.find("select[name='item_name'] option:selected").val();
                  var currency_code = $donation_form.find("select[name='currency_code'] option:selected").val();
                  var amount = $donation_form.find("[name='amount']:checked").val();
                  var t3 = $donation_form.find("input[name='t3']:checked").val();

                  if ( amount == 'other') {
                    amount = $donation_form.find("#input_other_amount").val();
                  }

                  // submit proper form now
                  if ( $("input[name='payment_type']:checked", $donation_form).val() == 'recurring' ) {
                      var recurring_form = $('#popup_paypal_donate_form-recurring');

                      recurring_form.find("input[name='item_name']").val(item_name);
                      recurring_form.find("input[name='currency_code']").val(currency_code);
                      recurring_form.find("input[name='a3']").val(amount);
                      recurring_form.find("input[name='t3']").val(t3);

                      recurring_form.find("input[type='submit']").trigger('click');

                  } else if ( $("input[name='payment_type']:checked", $donation_form).val() == 'one_time' ) {
                      var onetime_form = $('#popup_paypal_donate_form-onetime');

                      onetime_form.find("input[name='item_name']").val(item_name);
                      onetime_form.find("input[name='currency_code']").val(currency_code);
                      onetime_form.find("input[name='amount']").val(amount);

                      onetime_form.find("input[type='submit']").trigger('click');
                  }
                  return false;
              });

            });
          </script>

          <!-- Paypal Onetime Form -->
          <form id="popup_paypal_donate_form-onetime" class="hidden" action="https://www.paypal.com/cgi-bin/webscr" method="post">
            <input type="hidden" name="cmd" value="_donations">
            <input type="hidden" name="business" value="accounts@thememascot.com">

            <input type="hidden" name="item_name" value="Educate Children"> <!-- updated dynamically -->
            <input type="hidden" name="currency_code" value="USD"> <!-- updated dynamically -->
            <input type="hidden" name="amount" value="20"> <!-- updated dynamically -->

            <input type="hidden" name="no_shipping" value="1">
            <input type="hidden" name="cn" value="Comments...">
            <input type="hidden" name="tax" value="0">
            <input type="hidden" name="lc" value="US">
            <input type="hidden" name="bn" value="PP-DonationsBF">
            <input type="hidden" name="return" value="http://www.yoursite.com/thankyou.html">
            <input type="hidden" name="cancel_return" value="http://www.yoursite.com/paymentcancel.html">
            <input type="hidden" name="notify_url" value="http://www.yoursite.com/notifypayment.php">
            <input type="submit" name="submit">
          </form>
          
          <!-- Paypal Recurring Form -->
          <form id="popup_paypal_donate_form-recurring" class="hidden" action="https://www.paypal.com/cgi-bin/webscr" method="post">
            <input type="hidden" name="cmd" value="_xclick-subscriptions">
            <input type="hidden" name="business" value="accounts@thememascot.com">

            <input type="hidden" name="item_name" value="Educate Children"> <!-- updated dynamically -->
            <input type="hidden" name="currency_code" value="USD"> <!-- updated dynamically -->
            <input type="hidden" name="a3" value="20"> <!-- updated dynamically -->
            <input type="hidden" name="t3" value="D"> <!-- updated dynamically -->


            <input type="hidden" name="p3" value="1">
            <input type="hidden" name="rm" value="2">
            <input type="hidden" name="src" value="1">
            <input type="hidden" name="sra" value="1">
            <input type="hidden" name="no_shipping" value="0">
            <input type="hidden" name="no_note" value="1">                     
            <input type="hidden" name="lc" value="US">
            <input type="hidden" name="bn" value="PP-DonationsBF">
            <input type="hidden" name="return" value="http://www.yoursite.com/thankyou.html">
            <input type="hidden" name="cancel_return" value="http://www.yoursite.com/paymentcancel.html">
            <input type="hidden" name="notify_url" value="http://www.yoursite.com/notifypayment.php">
            <input type="submit" name="submit">
          </form>
          <!-- ===== END: Paypal Both Onetime/Recurring Form ===== -->
        </div>
      </div>
    </div>
    <button title="Close (Esc)" type="button" class="mfp-close font-36">×</button>
  </div>
</section>