<?php
/*******************************************************************************
 * Copyright (c) 2015 Eclipse Foundation and others.
 * All rights reserved. This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * which accompanies this distribution, and is available at
 * http://eclipse.org/legal/epl-v10.html
 *
 * Contributors:
 *    Christopher Guindon (Eclipse Foundation) - Initial implementation
 *******************************************************************************/
// Infra 2200 - After a successful download on the Downloads page,
// this page (en_index.php) is being printed and the CSS and JS are needed.
$App->AddExtraHtmlHeader('<link rel="stylesheet" type="text/css" href="/donate/assets/public/stylesheets/improve.min.css" media="screen" />');
$App->AddExtraJSFooter('<script type="text/javascript" src="/donate/assets/public/javascript/scripts.min.js"></script>');
?>

<div class="jumbotron text-center breadcrumbs-offset">
  <div class="container">
    <?php
    // Infra 2193 - The container-thankyou div is needed for the Successful Downloads page.
    if (isset($title_1) && isset($title_2) && isset($download_link)):?>
      <div class="container-thankyou">
        <div class="row thankyou text-center">
          <p class="thankyou-title"><span><?php print $title_1; ?></span> <?php print $title_2;?></p>
          <span class="direct-link"><?php print $download_link; ?></span>
        </div>
      </div>
    <?php endif;?>
    <div class="row">
      <div class="col-sm-18 col-sm-offset-3 donate-container">
        <div class="donate-container-content">
          <h1>
            Give back to the <strong class="orange">open source</strong>
            community that's been with you for over 15 years.
          </h1>
          <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">$35</li>
          <li class="four">$50</li>
          <li class="five">$100</li>
        </ul>

        <div class="form-inline margin-bottom-20 donate-submit">
          <div class="input-group">
            <div class="input-group-addon">$</div>
            <input class="donate-amount form-control text-center" type="number" name="firstAmount" value="35" min="1">
          </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">
      <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">
                  <div class="input-group-addon">USD</div>
                  <input class="form-control form-amount text-center" type="number" name="amount" value="35" min="1">
                </div>
              </div>
            </div>
          </div>


          <div class="row margin-bottom-5">
            <div class="col-sm-24">
              <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="bitpay"> Bitcoin</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="submit" value="Donate" class="btn btn-warning">
        </div>
      </form>
    </div>
  </div>
</div>