{% extends "base.html" %}

{% block content %}
    <div class="container" style="text-align: center">

    <video id="player" class="video-js vjs-big-play-centered" style="display: inline-block" controls preload="auto" width="1100"
           poster="https://image.tmdb.org/t/p/original{{ episode.still_path }}" data-setup="{}">
        <source src="{{ url_for("tv_movies.index") }}/get_episode/{{ episode.imdb_id }}" type="video/webm">
        <p class='vjs-no-js'>
          To view this video please enable JavaScript, and consider upgrading to a web browser that
          <a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
        </p>
    </video>
    {% for episode in episodes %}
        {% if episode.season == season_num and episode.episode == episode_num %}
            {% if loop.index0 - 1 >= 0 %}
                <form style="display: inline-block; float: left; margin-top: 5px" action="" method="get">
                    <input name="season" value="{{ episodes[loop.index0 - 1].season }}" hidden>
                    <input name="episode" value="{{ episodes[loop.index0 - 1].episode }}" hidden>
                <button type="submit">Prev</button>
                </form>
            {% endif %}
                <h1 style="display: inline-block">Episode {{ episode.episode }}: {{ episode.title }}</h1>
            {% if loop.index0 + 1 < episodes|length %}
                <form style="display: inline-block; float: right; margin-top: 5px" action="" method="get">
                    <input name="season" value="{{ episodes[loop.index0 + 1].season }}" hidden>
                    <input name="episode" value="{{ episodes[loop.index0 + 1].episode }}" hidden>
                <button type="submit">Next</button>
                </form>
            {% endif %}
        {% endif %}
    {% endfor %}
    <p style="text-align: left">{{ episode.description }}</p>
    <a class="btn btn-primary" href="{{ url_for("tv_movies.index") }}/get_episode/{{ episode.imdb_id }}" download="{{ episode.title }}">Download</a>

    {% with %}
        {% set seasons = [] %}
        <form action="" method="get" class="form-row">
        <div class="col-auto">
            <select name="season" onchange='this.form.submit()' class="custom-select">
             {% for episode in episodes %}
                {% if episode.season not in seasons %}
                    <option value="{{ episode.season }}" {% if episode.season == season_num %}selected{% endif %}>
                        Season {{ episode.season }}
                    </option>
                    {{ seasons.append(episode.season) }}
                {% endif %}
            {% endfor %}
            </select>
        </div>
        <button type="submit" hidden>submit</button>
        </form>
    {% endwith %}
    <div style="overflow: auto; white-space: nowrap">
    <form action="" method="get">
    <input name="season" value="{{ season_num }}" hidden>
    {% for episode in episodes %}
        {% if episode.season == season_num %}
            <button name="episode" value="{{ episode.episode }}" onclick="this.form.submit()" style="border: none">
                <div class="w3-display-container">
                    <img src="https://image.tmdb.org/t/p/original{{ episode.still_path }}" width="350px">
                    <div class="w3-display-topleft w3-container w3-round" style="background: rgba(105,105,105,0.61);color: white">Episode {{ episode.episode }}</div>
                    <div class="w3-display-bottommiddle w3-container w3-round" style="background: rgba(105,105,105,0.61);color: white">{{ episode.title }}</div>
                    {% for data in user_tv_show_data %}
                        {% if data.imdb_id == episode.imdb_id and data.finished %}
                            <div class="w3-display-topright w3-container" style="background: rgba(105,105,105,0.61); border-radius: 5px 0 0 5px">
                                <img src="/static/svg/verified.svg" >
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
                {% for data in user_tv_show_data %}
                    {% if data.imdb_id == episode.imdb_id and data.time != 0 and data.length != 0 %}
                        <div class="w3-light-gray">
                            <div class="w3-red" style="height: 5px; width: {{ (data.time/data.length)*100 }}%"></div>
                        </div>
                    {% endif %}
                {% endfor %}
            </button>
        {% endif %}
    {% endfor %}
    </form>
    </div>
    </div>

{% endblock %}

{% block footer_content %}
    <div class="container">
        <img src="/static/svg/tmdb.svg" alt="" style="height: 40px;">
        <p>This product uses the TMDb API but is not endorsed or certified by TMDb.</p>
    </div>
    <script>
    videojs("player").ready(function(){
        let myPlayer = videojs.getPlayer("player");
        let saved_time = {{ user_data.time }};
        let finished = {{ user_data.finished|string|lower }}; //converts python bool into javascript bool
        let length = 0;
        if (saved_time > 5 && !finished) {
            myPlayer.currentTime(saved_time);
        }

        function reqListener() {
            console.log(this.responseText);
        }

        let time = myPlayer.currentTime();
        myPlayer.on("timeupdate", function () {
            if (myPlayer.currentTime()-time >= 10) {
                length = myPlayer.duration();
                let oReq = new XMLHttpRequest();
                oReq.addEventListener("load", reqListener);
                oReq.open("POST", "https://rpi.narnian.us/tv_movies/{{ episode.imdb_id }}?time="+(time+5)+"&parent={{ episode.parent_imdb_id }}&length="+length);
                oReq.send();
                time = myPlayer.currentTime();
        }
        });
        myPlayer.on("pause", function () {
            length = myPlayer.duration();
            let oReq = new XMLHttpRequest();
            oReq.addEventListener("load", reqListener);
            oReq.open("POST", "https://rpi.narnian.us/tv_movies/{{ episode.imdb_id }}?time="+(time+5)+"&parent={{ episode.parent_imdb_id }}&length="+length);
            oReq.send();
            time = myPlayer.currentTime();
        });

    });
    </script>
{% endblock footer_content %}