{% extends 'Layout/layout.html.twig' %}

{% block title %} TIMEPAC ACADEMY: {{course_title}} {% endblock %}

{% block content %}

{% set local = false %}
{% set title = '' %}
{% set description = '' %}
{% set targetGroup = '' %}
{% set place = '' %}

{% for courseTrans in course.getCourseTranslates() %}
    {% if courseTrans.getFkLanguage().code == app.request.get('_locale') %}
        {% set title = courseTrans.title %}
        {% set description = courseTrans.description %}
        {% set targetGroup = courseTrans.targetGroup %}
        {% set place = courseTrans.place %}
        {% set local = true %}
    {% endif %}
{% endfor %}
{% if local == false %}
    {% for courseTrans in course.getCourseTranslates() %}
        {% if courseTrans.getFkLanguage().code == 'en' %}
            {% set title = courseTrans.title %}
            {% set description = courseTrans.description %}
            {% set targetGroup = courseTrans.targetGroup %}
            {% set place = courseTrans.place %}
        {% endif %}
    {% endfor %}
{% endif %}

<div class="modal d-none" id="modal_confirm">
    <div class="bk"></div>
    <div class="center mb-1">
        <p class="color text-center mb-2">{% trans %}You are going to register for{% endtrans %}</p>
        <h5 class="title-section mb-4 text-center"></h5>
        <div class="text-center">
            <div class="d-flex justify-content-center">
                
            </div>
        </div>
    </div>
</div>

<section class="l-breadcrumb">
    <nav class="l-breadcrumb__list" aria-label="breadcrumb">
        <a class="l-breadcrumb__item" href="{{path('home')}}">{% trans %}Home{% endtrans %} <span class="l-breadcrumb__next"> </span></a>
        <a class="l-breadcrumb__item is_active" href="#">{{title}}</a>
    </nav>
</section>

<section class="l-container l-container--min-color">
    <div class="l-container__item">

        <div class="header-course">
            <div class="header-course__left">

                <h3>{{ title|raw }}</h3>

                <div class="header-course__description">{{ description|raw }}</div>

            </div>

            <div class="header-course__right">
                {{ include('course/_card.html.twig')}}
            </div>

        </div>

    </div>
</section>
{% if id_youtube %}
<section class="l-container">
    <div class="l-container__item">

        <h3 class="title-section">{% trans %}Complete session{% endtrans %}</h3>
        <div class="lecture">
            {% set thumb_link = 'https://img.youtube.com/vi/'~id_youtube.video~'/hqdefault.jpg' %}
            {% set timer = id_youtube.time %}
            {% if timer|slice(-1) == 's' %}
                {% set timer = timer|slice(0, timer|length - 1) %}
            {% endif %}

            {# <div style="margin-bottom: 20px">
                <a href="https://youtu.be/{{id_youtube.video}}?t={{timer}}s" target="_blank">
                    <img src="{{ asset('custom/' ~ id_youtube.video ~ '.png') }}">
                </a>
            </div>
            <div style="margin-bottom: 20px">
                <a href="https://youtu.be/{{id_youtube.video}}?t={{timer}}s" target="_blank">
                    <img src="{{thumb_link}}">
                </a>
            </div> #}

            <div>
                <iframe width="928" height="615" src="https://www.youtube-nocookie.com/embed/{{ id_youtube.video }}?start={{ timer }}" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
            </div>
        </div> 
    </div>
</section>
{% endif %}
<section class="l-container">
    <div class="l-container__item">
        {% if course.getCourseLectures()|length > 0 %}
            <h3 class="title-section">{% trans %}Sessions{% endtrans %}</h3>
        {% endif %}

        {% set partners = [] %}
        {% set guests = [] %}
        {% for lecture in course.getCourseLectures() %}
            {% set local = false %}
            {% set titleLecture = '' %}
            {% set descriptionLecture = '' %}

            {% for lectureTrans in lecture.getFkLecture().getLectureTranslates() %}
                {% if lectureTrans.getFkLanguage().code == app.request.get('_locale') %}
                    {% set titleLecture = lectureTrans.title %}
                    {% set descriptionLecture = lectureTrans.description %}
                    {% set local = true %}
                {% endif %}
            {% endfor %}
            {% if local == false %}
                {% for lectureTrans in lecture.getFkLecture().getLectureTranslates() %}
                    {% if lectureTrans.getFkLanguage().code == 'en' %}
                        {% set titleLecture = lectureTrans.title %}
                        {% set descriptionLecture = lectureTrans.description %}
                    {% endif %}
                {% endfor %}
            {% endif %}

            <div class="lecture">

                <h4>{{ titleLecture }}</h4>

                <p class="lecture__lang">{{ lecture.language }}</p>

                <div class="lecture__copy">{{ descriptionLecture|raw }}</div>

                <p class="lecture__lecturer">
                    {# {{dump(lecture.getFkLecture())}} #}
                    
                    {% for lecturer in lecture.getFkLecture().getFkLecturers() %}
                        {% set name =  lecturer.name ~ ' ' ~ lecturer.lastname %}
                        {% set person =  lecturer %}
                        {% if lecturer.type == 'Partner' %}
                            {% if person not in partners %}
                                {% set partners = partners|merge([person]) %}
                            {% endif %}
                        {% else %}
                            {% if person not in guests %}
                                {% set guests = guests|merge([person]) %}
                            {% endif %}
                        {% endif %}
                        {% if loop.first == true %}
                            {% trans %}Lecturer{% endtrans %}: 
                        {% endif %}
                        
                        {{ name }}
                        
                        {% if loop.last == false %} - {% endif %}
                    {% endfor %}
                </p>

                {% if lecture.getFkLecture().getLectureMaterials()|length > 0 %}
                    <a name="{{ lecture.getFkLecture().id }}"></a>
                    <h5>{% trans %}Session materials{% endtrans %}</h5>
                {% endif %}

                <div class="lecture__materials owl-carousel owl-theme">
                    {{ include('course/_materials.html.twig') }}
                </div>

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

<section class="l-container">
    <div class="l-container__item">
        <h3 class="title-section">{% trans %}Lecturers{% endtrans %}</h3>

        <div class="lecturers">
            {% if partners|length > 0%}
                <h4 class="lecturers__type lecturers__type--first">{% trans %}Partners involved{% endtrans %}</h4>
            {% endif %}

            <div class="lecturers__carrousel">
                {% set partnersOrdered = partners|sort((a, b) => a.orderList <=> b.orderList) %}
                {% for partner in partnersOrdered %}
                    {{ include('course/_card-personal.html.twig', {'person': partner}) }}
                {% endfor %}
            </div>
        </div>

        <div class="lecturers">
            {% if guests|length > 0 %}
                <h4 class="lecturers__type">{% trans %}Guest experts{% endtrans %}</h4>
            {% endif %}

            <div class="lecturers__carrousel">
                {% for guest in guests %}
                    {{ include('course/_card-personal.html.twig', {'person': guest}) }}
                {% endfor %}
            </div>
        </div>
    </div>
</section>

{% endblock %}

{% block javascripts %}
    <link rel="stylesheet" type="text/css" href="{{ asset('build/css/owlcarousel/owl.carousel.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('build/css/owlcarousel/owl.theme.default.min.css') }}">
    <script src="{{ asset('build/js/owlcarousel/owl.carousel.min.js') }}"></script>

    <script type="text/javascript">

    
    var explore_baseUrl = '{{ base_url|replace({'/es': '/', '/en': '/', '/ca': '/', '/de': '/', '/el': '/', '/hr': '/', '/it': '/', '/sl': '/'}) }}';


        $(function(){
            var carousel = $(".owl-carousel").owlCarousel({
                loop: false,
                center: false,
                navigation: true,
                video: true,
                margin: 10,
                responsiveClass: true,
                responsive:{
                    0:{
                        items: 1,
                        nav: true
                    },
                    480:{
                        items: 2,
                        nav: true
                    },
                    1000:{
                        items: 4,
                        nav: true
                    }
                }
            });
        });

        function signUpCourse(id) {
            let url = explore_baseUrl + "admin-rel_user_course-create/" + id;
            window.location.href = url;
        }

        function openModalRegister(id) {

            var titleText = $('.header-course h3').text();
            var title = titleText;
            
            var buttonHtml = '<a class="c-button c-button--primary c-button--coming me-2 ms-2" onclick="signUpCourse('+id+')"><span class="c-button__body c-button__body--primary c-button__body--coming">Yes</span></a><a class="c-button c-button--primary c-button--coming me-2 ms-2"><span class="c-button__body c-button__body--primary c-button__body--coming" onclick="closeModal()">No</span></a>';
            
            $('#modal_confirm .d-flex').prepend(buttonHtml);
            $('#modal_confirm h5').prepend(title);
            $('#modal_confirm').removeClass('d-none');
        }

        function closeModal() {
            $('#modal_confirm').addClass('d-none');
            $('#modal_confirm .d-flex').html('');
            $('#modal_confirm h4').text('');
        }

    </script>
{% endblock %}