{% load crispy_forms_tags %}

{% if session_form %}
<div class="modal fade" id="session-{{session.id}}-status-modal" tabindex="-1" role="dialog" aria-labelledby="statusModalLabel">
    <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">x</span></button>
                <h4 class="modal-title" id="statsModalLabel">{{user.name}} - Session  {{session.id}}: Status ({{session.date}})</h4>
            </div>
            <div class="modal-body">
                <form action="{% url 'musictherapy:save_session_status' user.id session.id %}" class="form-horizontal" method="post" id="session-{{session.id}}-status-form">
                    <h4 id="session-status-form-error" style="color: red"></h4>
                    {% crispy session_form %}
                </form>
            </div>
            <div class="modal-footer">
                <input type="submit" name="submit" value="Save" class="btn btn-primary" form="session-{{session.id}}-status-form"/>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $("#session-{{session.id}}-status-form").submit(function(e) {
        e.preventDefault();
        $form = $(this);
        var url = $form.attr('action');
        var formId = "#session-{{session.id}}-status-form";

        $.ajax({
            type: "POST",
            url: url,
            dataType: 'json',
            data: $(formId).serialize(),
            success: function(data) {
                if (data == 200) {
                    toastr.success("Saved {{user.name}} Session {{session.id}} ({{session.date}})");
                } else {
                    toastr.error("There was a problem saving the Session {{session.id}} ({{session.date}}, try again later");
                }
                $('#session-{{session.id}}-status-modal').modal('toggle');
            }
        })
    })
</script>
{% endif %}