{% extends "meeting-base.html" %}
{% load staticfiles %}

{% block headtitle %}By Day | Programme{% endblock %}

{% block content %}
    <div class="body">
        <div class="main-header programme-day-header search-reactive">
            <div class="return">
                <div class="container-fluid pad-30">
                    <div class="row mar-30">
                        <div class="col-xs-2 col-sm-1 pad-30 text-left">
                            <a href="{% url 'programme' meeting_information.slug %}">
                                <img src="{% static 'images/microsite/navigation/arrow-left.png' %}" />
                            </a>
                        </div>
                        <div class="col-xs-8 col-sm-10 pad-30 text-center">
                            <div class="title">PROGRAMME - BY DAY</div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="selectCarousel" class="carousel slide" data-ride="carousel" data-day="{% if current_day %}{{ current_day.id }}{% else %}{{ days.first.id }}{% endif %}">
                <div class="carousel-inner">
                    {% for day in days %}
                        <div class="item {% if current_day %}{% if current_day.id == day.id %}active{% endif %}{% elif forloop.first %}active{% endif %}" data-day="{{ day.id }}">
                            <div class="option">
                                <span class="hidden-xs">{{ day.date|date:"l jS F"}}</span>
                                <span class="visible-xs">{{ day.date|date:"D. jS N"}}</span>
                            </div>
                        </div>
                    {% endfor %}
                </div>
                <a class="carousel-control left" href="#selectCarousel" data-slide="prev"></a>
                <a class="carousel-control right" href="#selectCarousel" data-slide="next"></a>
            </div>

            <div class="options" data-period="{% if current_time %}{{ current_time }}{% else %}morning{% endif %}">
                <div class="container-fluid pad-0">
                    <div class="row mar-0">
                        <div class="col-xs-6 text-center pad-0">
                            <a class="option {% if current_time == 'morning' or not current_time %}active{% endif %}" href="#" data-period="morning">
                                <div class="add-note-share"></div>
                                <div class="label">MORNING</div>
                            </a>
                        </div>
                        {% comment %}
                            <div class="col-xs-4 text-center pad-0">
                                <a class="option {% if current_time == 'lunch' %}active{% endif %}" href="#" data-period="lunch">
                                    <div class="add-note-share"></div>
                                    <div class="label">LUNCH</div>
                                </a>
                            </div>
                        {% endcomment %}
                        <div class="col-xs-6 text-center pad-0">
                            <a class="option last {% if current_time == 'afternoon' %}active{% endif %}" href="#" data-period="afternoon">
                                <div class="add-note-share"></div>
                                <div class="label">AFTERNOON</div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="main-body programme-day-body search-reactive">
            <div class="list_ajax_wrapper"></div>
        </div>
    </div>
{% endblock %}

{% block footer_script %}

<script type="text/javascript">
    $(document).ready(function(){

        // Update sessions data
        function session_control(){

            // Retrieve new session filters
            var day = $('#selectCarousel').attr('data-day');
            var period = $('.options').attr('data-period');
            var base_url = "{% url 'programme_by_day' meeting_information.slug %}"
            var load_url = base_url + 'load/' + day + '/' + period + '/';
            var state_url = base_url + day + '/' + period + '/';

            $('.list_ajax_wrapper').fadeOut(function(){
                $('.list_ajax_wrapper').load(load_url, function(){
                    $('.list_ajax_wrapper').fadeIn();
                    history.pushState({}, "By Day | Programme | PSGBI {{ meeting_information }}", state_url);
                });
            });
        }

        // Enable or disable buttons
        function button_control(){
            if (
                $("#selectCarousel .carousel-inner .item:first").hasClass("active") &&
                !$("#selectCarousel .carousel-inner .item:last").hasClass("active")
            ) {
                $("#selectCarousel").children(".left").hide();
                $("#selectCarousel").children(".right").show();
            } else if (
                !$("#selectCarousel .carousel-inner .item:first").hasClass("active") &&
                $("#selectCarousel .carousel-inner .item:last").hasClass("active")
            ) {
                $("#selectCarousel").children(".right").hide();
                $("#selectCarousel").children(".left").show();
            } else if (
                $("#selectCarousel .carousel-inner .item:first").hasClass("active") &&
                $("#selectCarousel .carousel-inner .item:last").hasClass("active")
            ){
                $("#selectCarousel").children(".left").hide();
                $("#selectCarousel").children(".right").hide();
            } else {
                $("#selectCarousel").children(".carousel-control").show();
            }
            $('#selectCarousel').attr('data-day',$('#selectCarousel .carousel-inner .item.active').attr('data-day'));
        }

        // Prevent auto scrolling
        $("#selectCarousel").carousel({
            interval : false,
        });

        // Control buttons after slide change
        $("#selectCarousel").on('slid.bs.carousel', function () {
            button_control();
            session_control();
        });

        // Allow changing of period
        $(".options .option").click(function(evt){
            evt.preventDefault();
            var period = $(this).attr('data-period');
            $('.options').attr('data-period',period);
            $(".options .option").removeClass('active');
            $(this).addClass('active');
            // Update sessions data
            session_control();
        });

        // Enable or disable buttons
        button_control();
        session_control();

    });
</script>

{% endblock %}