{% load crispy_forms_tags %}
{% if user %}
<form action="{% url 'musictherapy:save_userinfo' user.id %}" class="form-horizontal" method="post">
{% else %}
<form action="{% url 'musictherapy:new_userinfo' %}" class="form-horizontal" method="post">
{% endif %}
    {% crispy user_info_form %}

    <div class="form-actions">
        <button type="button" class="btn btn-primary btn-md" data-toggle="modal" data-target="#new-program-modal">Add New Program</button>
    </div>

    <br/>

    <div class="form-actions">
        <input type="submit" name="submit" value="Save" class="btn btn-primary" id="submit-id-submit"/>
    </div>
</form>

<div class="modal fade" id="new-program-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <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">Add New Program</h4>
      </div>
      <div class="modal-body">
          <form action="{% url 'musictherapy:save_program' %}" class="form-horizontal" method="post" id="new-program-form">
              <h4 id="new-program-form-error" style="color: red"></h4>
              {% crispy program_form %}
          </form>
      </div>
      <div class="modal-footer">
        <input type="submit" name="submit" value="Save" class="btn btn-primary" form="new-program-form"/>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

{% if user_last_update %}
<p>Last updated {{ user.updated }} </p>
{% endif %}

<script type="text/javascript">
$("#new-program-form").submit(function(e) {
    e.preventDefault();
    $form = $(this);
    var url = $form.attr('action');
    var errorText = $("#new-program-form-error");
    errorText.html('');

    $.ajax({
        type: "POST",
        url: url,
        dataType: 'json',
        data: $("#new-program-form").serialize(),
        success: function(data) {
            if (data == 404) {
                toastr.error("There was a problem saving the program, try again later.");
            } else {
                var label = $('<label class="checkbox"></label>');
                var input = $('<input type="checkbox" name="program">');
                input.attr('value', data["pk"]);
                input.attr('id', "id_program_" + data["pk"]);
                input.attr('checked', 'checked');

                var element = $('#div_id_program div');
                label.append(input);
                label.append(data["display"]);
                element.append(label);
                $('#new-program-modal').modal('toggle');
                toastr.success("Saved new program " + data["display"])
            }
        }
    });
});
</script>