{% extends "admin.html" %}

{% load staticfiles coreextras %}

{% block headtitle %}Add Sessions - {% endblock %}

{% block meeting_information_active %}active{% endblock %}

{% block headstyle %}
    <link rel="stylesheet" href="{% static 'lib/jquery/jquery-ui-timepicker-addon.css' %}" />
{% endblock %}

{% block headscript %}
    <script src="{% static 'lib/jquery/jquery-ui-timepicker-addon.js' %}"></script>
{% endblock %}

{% block headscript_multi %}

{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-lg-12">
            <ul class="breadcrumb">
                <li><a href="{% url 'admin' %}">Admin</a> </li>
                <li><a href="{% url 'admin_meeting_information' %}">Meetings</a></li>
                <li><a href="{% url 'admin_meeting_information_programme' meeting.id %}">Meeting Programme</a></li>
                <li class="active">Add Sessions</a></span></li>
            </ul>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12 page-header">
            <div class="pull-left">
                <h1>Manage Sessions For <small>{{ meeting }}</small></h1>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <h2>
                <a href="{% url 'admin_meeting_information_programme' meeting.id %}" class="btn btn-default btn-md"><i class="glyphicon glyphicon-chevron-left"></i> Back to Programme</a>
            </h2>

            <form action="" method="post">
                {% csrf_token %}
                <div>{{ session_formset.management_form }}</div>
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="session_table">
                        <thead>
                            <th>Name</th>
                            <th>Day</th>
                            <th>Start</th>
                            <th>End</th>
                            <th>Morning/Afternoon</th>
                            <th>Programme Title</th>
                            <th>Programme Description</th>
                            <th>Programme Presenters</th>
                            <th>Session Type</th>
                            <th>Primary Sub</th>
                            <th>Location</th>
                            <th>Chair</th>
                            <th>2nd Chair</th>
                            <th>Delete?</th>
                        </thead>
                        <tbody id="sessions">
                            {% for form in session_formset %}
                                <tr class="item_{{ forloop.counter }}">
                                    {% for field in form.visible_fields %}
                                        <td>
                                            {{ field }}
                                            {{ field.errors }}
                                            {% if forloop.last %}
                                                {% for field in form.hidden_fields %}
                                                    {{ field }}
                                                {% endfor %}
                                            {% endif %}
                                        </td>
                                    {% endfor %}
                                </tr>
                            {% endfor %}
                        </tbody>

                        <tbody id="empty_form" class="hidden">
                            <tr>
                                {% for field in psef %}
                                    <td>{{ field }}</td>
                                {% endfor %}
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <hr/>
                <div class="pull-right">
                    <a id="add_row" href="#" class="btn btn-success btn-md"><i class="glyphicon glyphicon-plus"></i> Add New Item</a>
                    <input type="submit" value="Submit" class="btn btn-primary"/>
                </div>
                <div class="clearfix"></div>
            </form>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function(){
            {% for form in session_formset %}
                $('#id_form-{{ forloop.counter0 }}-start_time,#id_form-{{ forloop.counter0 }}-end_time').timepicker({'stepMinute':5}).css('width','60px');
                $("*[id$='chair'], *[id$='chair_2']").css('width','175px');
                /*$("*[id$='chair'], *[id$='chair_2']").multiselect({
                    buttonClass: 'btn btn-sm btn-default btn-dropdown',
                    enableCaseInsensitiveFiltering: 1,
                    numberDisplayed: 2000
                });*/
            {% endfor %}
        });

        $(document).on('click','#add_row',function(e){
            e.preventDefault();
            number = $('#session_table #sessions tr').length;
            html = $('#empty_form').html().replace(/__prefix__/g, 'form-' + number);
            $('#session_table #sessions').append(html);
            $('#id_form-TOTAL_FORMS').val(number + 1);
            $('#id_form-'+ number +'-start_time,#id_form-'+ number +'-end_time').timepicker({'stepMinute':5}).css('width','60px');
        });

    </script>


{% endblock %}