{% extends 'layouts/layout_user.html' %}
{% from 'bootstrap/wtf.html' import form_field %}

{% block title %}
Epg | {{ config['PUBLIC_CONFIG'].site.title }}
{% endblock %}
{% block styles %}
{{super()}}
{% endblock %}
{% block content %}
<div class="panel panel-default">
    <div class="panel-heading">
        <h1 class="panel-title">
            <div class="col-md-11">
                <a href="{{ url_for('HomeView:index') }}">{{ config['PUBLIC_CONFIG'].site.title }}</a>
            </div>
            <div>Version: {{ config['PUBLIC_CONFIG'].project.version }}</div>
        </h1>
    </div>
    <div class="panel-body">
        <div class="container-fluid">
            <div class="row well">
                <div class="col-md-8">
                    <p>Epg</p>
                </div>
                <div class="col-md-2">
                    <a href="{{ url_for('ProviderView:dashboard') }}" role="button" class="btn btn-info">
                        Dashboard
                    </a>
                </div>
                <div class="col-md-2">
                    <a href="{{ url_for('ProviderView:logout') }}" class="btn btn-warning" role="button">
                        Logout
                    </a>
                </div>
            </div>
            <div class="row well">
                <div class="row">
                    <table id='epgs_table' class="table">
                        <thead>
                        <tr>
                            <th class="number">#</th>
                            <th class="value">Url</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for epg in epgs %}
                        <tr id='{{ epg.id }}'>
                            <td>{{ loop.index }}</td>
                            <td>{{ epg.uri }}</td>
                            <td>
                                <button type="submit" class="btn btn-success btn-xs"
                                        onclick="edit_epg('{{ epg.id }}')">
                                    Edit
                                </button>
                                <button type="submit" class="btn btn-danger btn-xs"
                                        onclick="remove_epg('{{ epg.id }}')">
                                    Remove
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <button type="submit" class="btn btn-success" onclick="add_epg()">
                        Add epg
                    </button>
                </div>
                <div class="col-md-4">
                    <a href="{{ url_for('EpgView:upload_urls') }}" role="button" class="btn btn-success">
                        Upload txt urls
                    </a>
                </div>
                <div class="col-md-4">
                    <button type="submit" class="btn btn-success" onclick="update_urls()">
                        Update
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="epg_dialog" class="modal fade" tabindex=-1 role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script type="text/javascript" charset="utf-8">
    function add_epg_entry(url) {
        $.ajax({
            url: url,
            type: "POST",
            dataType: 'json',
            data: $('#epg_entry_form').serialize(),
            success: function (response) {
                console.log(response);
                $('#epg_dialog').modal('hide');
                window.location.reload();
            },
            error: function (error) {
                console.error(error);
                $('#epg_dialog .modal-content').html(data);
            }
        });
    }

    function add_epg() {
        var url = "{{ url_for('EpgView:add') }}";
        $.get(url, function(data) {
            $('#epg_dialog .modal-content').html(data);
            $('#epg_dialog').modal();

            $('#apply').click(function(event) {
                event.preventDefault();
                add_epg_entry(url);
            })
        });
    }

    function edit_epg_entry(url) {
        $.ajax({
            url: url,
            type: "POST",
            dataType: 'json',
            data: $('#epg_entry_form').serialize(),
            success: function (response) {
                console.log(response);
                $('#epg_dialog').modal('hide');
                window.location.reload();
            },
            error: function (error) {
                console.error(error);
                $('#epg_dialog .modal-content').html(data);
            }
        });
    }

    function update_urls() {
        var url = "{{ url_for('EpgView:update_urls') }}";
        $.ajax({
            url: url,
            type: "GET",
            success: function (response) {
                alert(JSON.stringify(response));
            },
            error: function (error) {
                console.error(error);
            }
        });
    }

    function edit_epg(sid) {
        var url = "/epg/edit/" + sid;
        $.get(url, function(data) {
            $('#epg_dialog .modal-content').html(data);
            $('#epg_dialog').modal();

            $('#apply').click(function(event) {
                event.preventDefault();
                edit_epg_entry(url);
            })
        });
    }

    function remove_epg(sid) {
        $.ajax({
            url: "{{ url_for('EpgView:remove') }}",
            type: "POST",
            dataType: 'json',
            data: {"sid":sid},
            success: function (response) {
                console.log(response);
                window.location.reload();
            },
            error: function (error) {
                console.error(error);
            }
        });
    }

</script>
{% endblock %}