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

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

{% block content %}

{% set local = false %}
{% set titleLectureMaterial = '' %}
{% set descLectureMaterial = '' %}

{% for lectureMaterialTrans in lecture_material.getLectureMaterialsTranslates() %}
    {% if lectureMaterialTrans.getFkLanguage().code == app.request.get('_locale') %}
        {% set titleLectureMaterial = lectureMaterialTrans.title %}
        {% set descLectureMaterial = lectureMaterialTrans.description %}
        {% set local = true %}
    {% endif %}
{% endfor %}
{% if local == false %}
    {% for lectureMaterialTrans in lecture_material.getLectureMaterialsTranslates() %}
        {% if lectureMaterialTrans.getFkLanguage().code == 'en' %}
            {% set titleLectureMaterial = lectureMaterialTrans.title %}
            {% set descLectureMaterial = lectureMaterialTrans.description %}
        {% endif %}
    {% endfor %}
{% endif %}

<section class="l-breadcrumb">
    <nav class="l-breadcrumb__list" aria-label="breadcrumb">
        <a class="l-breadcrumb__item" href="{{ path('app_course_show', {'slug': course.slug}) }}#{{lecture.id}}">Course <span class="l-breadcrumb__next"> </span></a>
        <a class="l-breadcrumb__item is_active" href="#">{{ titleLectureMaterial }}</a>
    </nav>
</section>

<section class="l-container">
    <div class="l-container__item l-material">

        <h3 class="title-name">{{ titleLectureMaterial }}</h3>

        <div class="l-material__description">
            {{ descLectureMaterial|raw }}
        </div>

        <h4>View the material</h4>

        <div class="l-material__material">
            {% if lecture_material.type == 'image' %}
                <img src="{{ asset('materials/'~lecture_material.name) }}"/>
            {% elseif lecture_material.type == 'file' %}
                {% if '.pdf' in lecture_material.name %}
                    <iframe src="{{ asset('materials/'~lecture_material.name) }}" height="600" width="928"></iframe>
                {% else %}
                    <a href="{{ asset('materials/'~lecture_material.name) }}" download="{{ titleLectureMaterial }}">{{ titleLectureMaterial }}</a>
                {% endif %}
            {% elseif lecture_material.type == 'video' %}
                {% set codeVideo = lecture_material.file|split('youtube') %}
                {% if codeVideo [1] is defined %}
                    {% set codeVideo = lecture_material.file|split('?v=') %}
                    {% set codeTime = lecture_material.file|split('&t=') %}
                    {% set codeVideo = codeVideo[1]|split('&') %}
                    {% if codeTime is null %}
                        {% set codeTime = 0 %}
                    {% endif %}
                    {% set finalVideo = codeVideo[0] %}
                    {% set finalTime = codeTime[1] %}
                    {% set thumb_link = 'https://img.youtube.com/vi/'~codeVideo[0]~'/hqdefault.jpg' %}

                    <iframe width="928" height="615" src="https://www.youtube-nocookie.com/embed/{{ finalVideo }}?start=1924" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>   
                {% else %}
                    {% set codeVideo = lecture_material.file|split('.be/') %}
                    {% if codeVideo [1] is defined %}
                        {% set codeVideoTag = codeVideo[1]|split('?') %}
                        {% set finalVideo = codeVideoTag[0] %}
                        {% set codeTime = lecture_material.file|split('&t=') %}
                        {% if codeTime is null %}
                            {% set codeTime = [codeTime[0],'0'] %}
                        {% endif %}

                        {% set finalTime = codeTime[1] %}

                        {% set thumb_link = 'https://img.youtube.com/vi/'~codeVideo[1]~'/hqdefault.jpg' %}

                        <iframe width="928" height="615" src="https://www.youtube-nocookie.com/embed/{{ finalVideo }}?start={{ finalTime }}" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                    {% endif %}
                {% endif %}


            {% elseif lecture_material.type == 'url' %}
                <a href="{{ lecture_material.file }}">{{ titleLectureMaterial }}</a>
            {% endif %}
        </div>

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

{% block javascripts %}
    <script type="text/javascript">
        const screen = {
            mobileonly : null,
            phablet: window.matchMedia( '(min-width: 421px)' ),
            tablet : window.matchMedia( '(min-width: 601px)' ),
            desktop : window.matchMedia( '(min-width: 980px)' )
        };

        // add media query events
        for (let [scr, mq] of Object.entries(screen)) {
            if (mq) mq.addEventListener('change', mqHandler);
        }

        // first event
        mqHandler();

        // media query handler function
        function mqHandler() {

            let size = null;
            for (let [scr, mq] of Object.entries(screen)) {
                if (!mq || mq.matches) size = scr;
            }

            if (size == 'mobileonly')
            {
                const myTimeout = setTimeout(changeSize(340, 340), 5000);
            }
            else if (size == 'phablet')
            {
                const myTimeout = setTimeout(changeSize(420, 440), 5000);
            }
            else if (size == 'tablet')
            {
                const myTimeout = setTimeout(changeSize(612, 540), 5000);
            }
            else {
                const myTimeout = setTimeout(changeSize(928, 615), 5000);
            }
        }

        function changeSize (width, height)
        {
            if ($('iframe').length)
            {
                $('iframe').attr('width', width);
                $('iframe').attr('height', height);
            }
        }

    </script>
{% endblock %}