{% extends "public/content.html" %}
{% load staticfiles %}

{% block headtitle %}{{ abstract_request }}{% endblock %}

{% block headstyle %}
    <style type="text/css">
        #id_abstract {
            font-family: 'Open Sans',sans-serif;
            font-size: 0.85em;
        }
    </style>
{% endblock %}

{% block headscript %}

<script type="text/javascript" src="{% static 'lib/jquery.textareacounter.js' %}"></script>
<script type="text/javascript">
    $(document).ready(function() {

        $("#id_abstract_content").textareaCounter({ limit: 400 });
        var count = $('.author').length;
        $('#id_num_authors').val(count);

        $(document).on('click','.add_author',function(){

            number = parseInt($(this).attr('rel'));
            number = number + 1;

            $('.authors').append('<div class="author" id="author_'+ number +'"><h3><span class="name">Author '+ number +'</span> <span class="remove_author">Remove Author</span></h3><input name="authors" value="'+ number +'" type="hidden"><div class="form_contents"><div class="form-group "><label class="control-label col-lg-4" for="id_author_'+ number +'1-name"> Name  <span class="required">*</span></label><div class="col-lg-4"><input name="author_'+ number +'-name" class="form-control" maxlength="200" id="id_author_'+ number +'-name" value="" type="text"></div></div><div class="form-group "><label class="control-label col-lg-4" for="id_author_'+ number +'-status"> Grade  <span class="required">*</span></label><div class="col-lg-4"><select name="author_'+ number + '-status" class="form-control">{% for value, text in author_forms.0.status.field.choices %}<option value="{{ value }}">{{ text }}</option>{% endfor %}</select></div></div><div class="form-group "><label class="control-label col-lg-4" for="id_author_'+ number +'-institution"> Institution  <span class="required">*</span></label><div class="col-lg-4"><input name="author_'+ number +'-institution" class="form-control" maxlength="200" id="id_author_'+ number +'-institution" value="" type="text"></div></div><div class="form-group "><label class="control-label col-lg-4" for="id_author_'+ number +'-department"> Department  <span class="required">*</span></label><div class="col-lg-4"><input name="author_'+ number +'-department" class="form-control" maxlength="200" id="id_author_'+ number +'-department" value="" type="text"></div></div><div class="form-group "><label class="control-label col-lg-4" for="id_author_'+ number +'-email"> Email <span class="required">*</span></label><div class="col-lg-4"><input name="author_'+ number +'-email" class="form-control" maxlength="75" id="id_author_'+ number +'-email" value="" type="text"></div></div><div class="form-group "><label class="control-label col-lg-4" for="id_author_'+ number +'-telephone"> Contact Number  <span class="required">*</span></label><div class="col-lg-4"><input name="author_'+ number +'-telephone" class="form-control" maxlength="20" id="id_author_'+ number +'-telephone" value="" type="text"></div></div></div></div><p class="add_author add_another" rel="'+number+'">Add Another Co Author</p>');
            $(this).remove();

            $('#id_presenter').append('<option name="Author '+ number + '">Author '+number +'</option>');

            var count = $('.author').length;
            $('#id_num_authors').val(count);

        });

        $(document).on('click','.remove_author',function(){
            var h3 = ($(this).parent().find('.name').text());

            $(this).parent().parent().remove();

            var count = $('.author').length;
            $('#id_num_authors').val(count);

            $('#id_presenter').find('option[name="'+ h3 + '"]').remove();
        });


        $(document).on('click','.add_file',function(){

            number = parseInt($(this).attr('rel'));
            number = number + 1;

            $('.files').append('<div id="file_'+ number + '" class="file"><input type="hidden" value="'+ number + '" name="files"><div class="form-group "><label for="id_file_'+ number + '-file" class="control-label col-lg-4"> File  <span class="required">*</span></label><div class="col-lg-5"><input type="file" id="id_file_'+ number + '-file" name="file_'+ number + '-file"></div><div class="remove_file col-lg-2">Remove File</div></div></div>');
            $(this).attr('rel', number);
            
            var count = $('.author').length;
            $('#id_num_authors').val(count);

        });

        $(document).on('click','.remove_file',function(){
            $(this).parent().parent().remove();
        });
    });

</script>

{% endblock %}

{% block left_content %}
    <h2>Abstract Content</h2>

    <ul class="nav nav-stacked">
        <li class="">
            <a href="{% url 'abstract_submission' abstract_request.slug %}">1. Personal Details</a>
        </li>
        <li class="active">
            <a href="" class="">2. Abstract Details</a>
        </li>
     </ul>
{% endblock %}

{% block title %}

    <ul class="breadcrumb">
        <li><a href="/">Home</a></li>
        <li><a href="{% url 'abstract_submission' abstract_request.slug %}">{{ abstract_request }}</a></li>
        <li>Abstract Content</li>
    </ul>

    <h1>Add Abstract Content</h1>
{% endblock %}

{% block content %}

    <p>Please complete the fields below with the contents of your abstract.</p>

    <div id="submit_content">

        {% if errors %}
            {% for error in errors %}
                <div class="error">{{ error }}</div>
            {% endfor %}
        {% endif %}

        <form action="" method="post" class="form-horizontal" enctype="multipart/form-data">
            {% csrf_token %}

            <h2>Abstract Information</h2>
            {% include "public/partials/form.html" with form=content_submission_title_form %}

            <h2>Abstract Authors</h2>
            <p>Please enter the details of the Primary Author and any Contributors to your abstract.</p>

            <div class="authors">
                {% if author_forms %}
                    {% for author_form in author_forms %}
                        <div class="author" id="author_{{ forloop.counter }}">
                            <h3><span class="name">{% if forloop.counter == 1 %}First Author and Primary Contact</span> {% else %}Author {{ forloop.counter }}</span> <span class="remove_author">Remove Author</span> {% endif %}</h3>
                            <input type="hidden" name="authors" value="{{ forloop.counter }}">
                            {% include "public/partials/form.html" with form=author_form %}
                        </div>

                        {% if forloop.last %}
                            <p class="add_author add_another col-lg-2" rel="{{ forloop.counter }}">Submit details of Co Authors</p>
                        {% endif %}

                    {% endfor %}
                {% endif %}
            </div>

            {% include "public/partials/form.html" with form=confirmation_form %}

            <h2>Abstract Content</h2>
            {% include "public/partials/form.html" with form=content_submission_data_form %}

            <div class="files">
                {% if file_forms %}
                    {% for file_form in file_forms %}
                        <div class="file" id="file_{{ forloop.counter }}">
                            <input type="hidden" name="files" value="{{ forloop.counter }}">
                            {% include "public/partials/form.html" with form=file_form remove_file=True %}
                        </div>
                    {% endfor %}
                {% endif %}
            </div>
            
            <p class="add_file add_another" rel="{% if file_forms %}{% for file_form in file_forms %}{% if forloop.last %}{{ forloop.counter }}{% endif %}{% endfor %}{% else %}0{% endif %}">Add A File</p>

            <div class="submit">
                <div class="col-lg-offset-4 col-lg-8">
                    <input type="submit" name="submit" value="Submit" class="btn btn-primary"/>
                    <input type="submit" name="save" value="Save Contents" class="btn btn-secondary"/>
                </div>
            </div>

        </form>
    </div>

{% endblock %}