<h3>Manually Create Events</h3>

<h4 id='event-creation-status'></h4>

<%= form_tag handle_details_post_agent_path(@agent), :id => "create-event-form" do %>
  <div class="form-group">
    <textarea rows="10" id="payload" name="payload" class="payload-editor" data-height="200">
      {}
    </textarea>
  </div>

  <%= submit_tag "Submit", :class => "btn btn-primary" %>
<% end %>

<script>
  $(function () {
    var payloadJsonEditor = window.setupJsonEditor($(".payload-editor"));
    $("#create-event-form").submit(function (e) {
      e.preventDefault();
      var $form = $("#create-event-form");
      var $status = $("#event-creation-status");
      $.ajax({
        url: $form.attr('action'),
        method: "post",
        data: { payload: JSON.parse($form.find("textarea").val()) },
        dataType: "JSON",
        success: function(json) {
          if (json.success) {
            $status.text("Success!");
          } else {
            $status.text("An error occurred: " + json.error);
          }
        },
        error: function(response) {
          $status.text("An error occurred: " + response.responseText)
        }
      });
    });
  });
</script>