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

{% block headtitle %}My Programme{% endblock %}

{% load staticfiles %}

{% 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 'my_meeting' 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">MY PROGRAMME</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="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="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="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 'meeting_my_programme' meeting_information.slug %}";
                var state_url = base_url + day + '/' + period + '/';
                var load_url = base_url + 'load/'+ day + '/' + period + '/';

                $('.list_ajax_wrapper').fadeOut(function(){
                    $('.list_ajax_wrapper').load(load_url, function(){
                        $('.list_ajax_wrapper').fadeIn();
                        history.pushState({}, "My 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 %}