<?php
/**
 * Copyright (c) 2015, 2018 Eclipse Foundation.
 *
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * Contributors:
 * Christopher Guindon (Eclipse Foundation) - Initial implementation
 * Eric Poirier (Eclipse Foundation)
 *
 * SPDX-License-Identifier: EPL-2.0
 */
// @todo: move this to a css before March 18
//$App->AddExtraHtmlHeader('<style>.donate-container-content{;}</style>');
?>
<div class="text-center padding-top-30 padding-bottom-30">
  <div class="container padding-bottom-25">
    <div class="row">
      <div class="col-md-18 col-md-offset-3 donate-container">
        <h1 class="margin-bottom-30">
          <strong>Donate to </strong><strong class="orange">the Eclipse IDE </strong>
        </h1>

        <p style="font-size:1.1em; ">The Eclipse IDE is the leading open source platform for professional developers,
          used by millions of people every day, and <strong>100% free</strong> and <strong>open source</strong>. </p>

        <p style="font-size:1.1em; ">By donating, you’ll help ensure it stays that way and contribute toward its
          future development.
        </p>

        <div class="donate-container-content" style="background-image:none;height:35px;">
          <input class="donate-bar" type="range" value="3" step="1" min="1" max="5">
        </div>

        <ul class="list-inline list-donate-amount text-left margin-bottom-20">
          <li class="one">$5</li>
          <li class="two">$10</li>
          <li class="three text-center">$35</li>
          <li class="four text-right">$50</li>
          <li class="five text-right">$100</li>
        </ul>
        <div class="form-inline margin-bottom-20 donate-submit">
          <div class="input-group">
            <input class="donate-amount form-control text-center" type="number" name="firstAmount"
              value="35" min="1"
              >
            <div class="input-group-addon">USD</div>
          </div>
          <!-- <input type="submit" class="btn btn-warning"> -->
          <button type="button" class="btn btn-warning btn-donate" data-toggle="modal"
            data-target="#donationModal"
            >Donate</button>
        </div>
        <ul class="list-inline">
          <li><a class="grey-link" href="mailto:donate@eclipse.org?subject=Donation Problem">Problems
            donating?</a>
          </li>
          <li><a class="grey-link" href="/donate/faq.php">Donation FAQ</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!-- Modal -->
<div class="modal fade text-center" id="donationModal" tabindex="-1" role="dialog"
  aria-labelledby="donation_modal"
  >
  <div class="donate-modal modal-dialog modal-sm" role="document">
    <div class="modal-content"  style="background-image:none">
      <form id="donation_default_eclipse_form" class="choose-amount"
        action="<?php print $Paypal->get_gateway_process_url();?>" method="POST"
        >
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">
            Thank you for supporting <span class="text-nowrap">our community</span>!
          </h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-sm-12 col-sm-offset-6">
              <div class="form-inline margin-bottom-15">
                <div class="input-group">
                  <input class="form-control form-amount text-center" type="number" name="amount"
                    value="35" min="1"
                    >
                  <div class="input-group-addon">USD</div>
                </div>
              </div>
            </div>
          </div>
          <div class="row margin-bottom-5">
            <div class="col-sm-24 text-center">
              <label class="radio-inline"><input type="radio" name="type" value="paypal"
                checked="checked"
                > Paypal</label> <label class="radio-inline"><input type="radio" name="type"
                value="credit"
                > Credit card</label>
            </div>
          </div>
          <div class="row margin-bottom-5">
            <div class="col-sm-24">
              <label class="radio-inline"><input type="radio" name="subscription"
                id="subscription_default" value="0" checked="checked"
                > One-time</label> <label class="radio-inline"><input type="radio" name="subscription"
                value="M"
                > Monthly</label> <label class="radio-inline"><input type="radio" name="subscription"
                value="Y"
                > Yearly</label>
            </div>
          </div>
          <div class="checkbox">
            <label> <input class="recognition-checkbox" type="checkbox" value="" name="recognition">
            <span class="recognition-text">I want to be listed on the recognition page</span>
            </label>
          </div>
          <div class="recognition-fields form-inline">
            <div class="form-group">
              <input class="form-control margin-bottom-10" type="text" name="first_name"
                placeholder="First Name"
                >
            </div>
            <div class="form-group">
              <input class="form-control margin-bottom-10" type="text" name="last_name"
                placeholder="Last Name"
                >
            </div>
          </div>
        </div>
        <div class="modal-footer donate-modal-footer text-center">
          <input type="hidden" name="default_process_url" value="<?php print $Paypal->get_gateway_process_url();?>">
          <input type="hidden" name="credit_process_url" value="<?php print $Paypal->get_gateway_credit_process_url();?>">
          <input type="hidden" name="landing_page" value="eclipse_ide">
          <input type="submit" value="Donate" class="btn btn-warning">
        </div>
      </form>
    </div>
  </div>
</div>