<div id="postcard">
Enter a message (optional) and address. If you don't have an address, enter an email and we'll email that person for their address.
<br />
<%= form_for(@postcard, :remote => true) do |f| %>
  <% if @postcard.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@postcard.errors.count, "error") %> prohibited this postcard from being saved:</h2>

      <ul>
      <% @postcard.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :message %><br />
    <%= f.text_area(:message, :size => "40x8") %>
  </div>
  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email %>
  </div>
  <div class="field">
    <%= f.label :size %><br />
    <%= f.select(:size, options_for_select([['Regular (4x6)', 'regular'], ['Jumbo (5.5x8.5)', 'jumbo']])) %>
  </div>
  <div class="field">
    <%= f.hidden_field(:user_id, :value => current_user.id) %>
    <%= f.hidden_field(:photo_id, :value => params[:photo]) %>
  </div>

  <%= f.fields_for :address do |builder| %>
  <p>
    <%= render 'addresses/form', :builder => builder %>
  </p>
  <% end %>

  <div id="postcardsubmit" class="actions">
    <%= f.submit %>
  </div>
<% end %>
</div>

<div id="stripe">
<% if current_user.stripe_id %>
  <div id='savedpayer'><button type="saved-cc" class="saved-cc-button">Pay 1.00</button> w/ saved Stripe info</div>
  <div id="paying">Payment in progress</div>
<% else %>
  <form action="/stripe" method="POST" id="payment-form">
   <div class="form-row">
     <label>Card Number</label>
     <input type="text" size="20" autocomplete="off" class="card-number"/>
   </div>
   <div class="form-row">
     <label>CVC</label>
     <input type="text" size="4" autocomplete="off" class="card-cvc"/>
   </div>
   <div class="form-row">
     <label>Expiration (MM/YYYY)</label>
     <input type="text" size="2" class="card-expiry-month"/>
     <span> / </span>
     <input type="text" size="4" class="card-expiry-year"/>
   </div>
   <button type="submit" class="submit-button">Submit Payment</button>
<% end %>
</div>

<script>
  $(document).ready(function() {

    $("#paying").hide();
    $("#stripe").hide();

    $('#postcardsubmit input').click(function () {
      $("#postcard").hide();
      $("#stripe").show();
    });


    $(".saved-cc-button").click(function () {
      alert("need to ajax post to charge the card");
      $("#savedpayer").hide();
      $("#paying").show();
      $.ajax({
              type: 'POST',
              url: '/stripe',
              data: { loggedinid : <%= current_user.id %> },
              headers: {
                'X-Transaction': 'POST Example',
                'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
            },
              success: function(msg) {
                $("#paying").hide();
                console.log(msg);
                alert("payment recieved");
              }
            });
    });

    $("#payment-form").submit(function(event) {
      // disable the submit button to prevent repeated clicks
      $('.submit-button').attr("disabled", "disabled");

      Stripe.createToken({
          number: $('.card-number').val(),
          cvc: $('.card-cvc').val(),
          exp_month: $('.card-expiry-month').val(),
          exp_year: $('.card-expiry-year').val()
      }, stripeResponseHandler);

      // prevent the form from submitting with the default action
      return false;
    });

    function stripeResponseHandler(status, response) {
      if (response.error) {
          // show the errors on the form
          $(".payment-errors").text(response.error.message);
          $(".submit-button").removeAttr("disabled");
      } else {
          var form$ = $("#payment-form");
          // token contains id, last4, and card type
          var token = response['id'];
          // insert the token into the form so it gets submitted to the server
          form$.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
          // and submit
          form$.get(0).submit();
        }
    }

  });
</script>