{% extends "admin/base.html" %}

{% block content %}
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.0/c3.min.css">

<div class="row">
    <br>
    <div id="confirm" class="reveal-modal" data-reveal>
        <h2 class="text-center">Delete User</h2>
        <form method="POST">
            <input type="hidden" name="id">
            <input type="hidden" name="nonce" value="{{ nonce }}">
            <div class="small-6 small-centered text-center columns">
                <p>Are you sure you want to delete <strong id="confirm-team-name"></strong>?</p>
                <button type="button" class="button alert radius" onclick="$('#confirm').foundation('reveal', 'close');">No</button>
                <button type="button" id="delete-user" class="button success radius">Yes</button>
            </div>
        </form>
    </div>
    <div id="user" class="reveal-modal" data-reveal>
        <h2 class="text-center">Edit User</h2>
        <form method="POST" action="/admin/teams/">
            <div class="row">
                <input type="hidden" name="nonce" value="{{ nonce }}">
                <input type="hidden" name="id">
                <div class="large-12 columns">
                    <label>Team Name
                        <input type="text" name="name" placeholder="Enter new team name" />
                    </label>
                </div>
                <div class="large-12 columns">
                    <label>Email
                        <input type="text" name="email" placeholder="Enter new email" />
                    </label>
                </div>
                <div class="large-12 columns">
                    <label>Password
                        <input type="password" name="password" placeholder="Enter new password" />
                    </label>
                </div>
                <div class="large-12 columns">
                    <label>Website
                        <input type="text" name="website" placeholder="Enter Website" />
                    </label>
                </div>
                <div class="large-6 columns">
                    <label>Affiliation
                        <input type="text" name="affiliation" placeholder="Enter Affiliation" />
                    </label>
                </div>
                <div class="large-6 columns">
                    <label>Country
                        <input type="text" name="country" placeholder="Enter Country" />
                    </label>
                </div>
                <div id="results">

                </div>
                <button id="update-user" class="radius" type="submit">Update</button>
            </div>
        </form>
        <a class="close-reveal-modal">&#215;</a>
    </div>
    <table id="teamsboard">
        <thead>
            <tr>
                <td><b>ID</b>
                </td>
                <td><b>Team</b>
                </td>
                <td><b>Email</b>
                </td>
                <td><b>Website</b>
                </td>
                <td><b>Affiliation</b>
                </td>
                <td><b>Country</b>
                </td>
                <td><b>Settings</b>
                </td>
            </tr>
        </thead>
        <tbody>
            {% for team in teams %}
            <tr name="{{ team.id }}">
                <td class="team-id">{{ team.id }}</td>
                <td class="team-name"><a href="/team/{{ team.id }}">{{ team.name }}</a>
                </td>
                <td class="team-email">{{ team.email }}</td>
                <td class="team-website"><a href="{{ team.website }}">{% if team.website %}{{ team.website }}{% endif %}</a>
                </td>
                <td class="team-affiliation"><span>{% if team.affiliation %}{{ team.affiliation }}{% endif %}</span>
                </td>
                <td class="team-country"><span>{% if team.country %}{{ team.country }}{% endif %}</span>
                </td>
                <td><span>
                    <i class="fa fa-pencil-square-o"></i>
                    <i class="fa fa-envelope"></i>
                    <i class="fa fa-times"></i>
                </span>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}

{% block scripts %}
<script>

function load_update_modal(id, name, email, website, affiliation, country){
    var modal_form = $('#user form');
    
    modal_form.find('input[name=name]').val(name)
    modal_form.find('input[name=id]').val(id)
    modal_form.find('input[name=email]').val(email)
    modal_form.find('input[name=website]').val(website)
    modal_form.find('input[name=affiliation]').val(affiliation)
    modal_form.find('input[name=country]').val(country)
    console.log(modal_form);
    $('#user form').attr('action', '/admin/team/'+id)
    $('#user').foundation('reveal', 'open');
}

$('#update-user').click(function(e){
    e.preventDefault();
    var id = $('#user input[name="id"]').val()
    var user_data = $('#user form').serializeArray()
    $.post($('#user form').attr('action'), $('#user form').serialize(), function(data){
        var data = $.parseJSON(JSON.stringify(data))
        for (var i = 0; i < data['data'].length; i++) {
            if (data['data'][i] == 'success'){
                var row = $('tr[name='+id+']')
                row.find('.team-name').text( $.grep(user_data, function(e){ return e.name == 'name'; })[0]['value'] )
                row.find('.team-email').text( $.grep(user_data, function(e){ return e.name == 'email'; })[0]['value'] )
                row.find('.team-website').attr('href', $.grep(user_data, function(e){ return e.name == 'website'; })[0]['value'] )
                row.find('.team-affiliation').text( $.grep(user_data, function(e){ return e.name == 'affiliation'; })[0]['value'] )
                row.find('.team-country').text( $.grep(user_data, function(e){ return e.name == 'country'; })[0]['value'] )
                $('#user').foundation('reveal', 'close');
            }
            else{
                $('#results').append($('p').text( data['data'][i] ))
            }
        };
    })
});

$('#delete-user').click(function(e){
    e.preventDefault();
    var id = $('#confirm input[name="id"]').val()
    var user_data = $('#confirm form').serializeArray()
    $.post($('#confirm form').attr('action'), $('#confirm form').serialize(), function(data){
        var data = $.parseJSON(JSON.stringify(data))
        if (data == "1"){
            location.reload()
        }
    })
});

$('.fa-pencil-square-o').click(function(){
    var elem = $(this).parent().parent().parent();
    var id = elem.find('.team-id').text().trim();
    var name = elem.find('.team-name').text().trim();
    var email = elem.find('.team-email').text().trim();
    var website = elem.find('.team-website').text().trim();
    var affiliation = elem.find('.team-affiliation').text().trim();
    var country = elem.find('.team-country').text().trim();

    load_update_modal(id, name, email, website, affiliation, country);
})

function load_confirm_modal(id, name){
    var modal = $('#confirm')
    modal.find('input[name=id]').val(id)
    modal.find('#confirm-team-name').text(name)
    $('#confirm form').attr('action', '/admin/team/'+id+'/delete');
    $('#confirm').foundation('reveal', 'open');
}

$('.fa-times').click(function(){
    var elem = $(this).parent().parent().parent();
    var id = elem.find('.team-id').text().trim();
    var name = elem.find('.team-name').text().trim();
    load_confirm_modal(id, name)
})

</script>
{% endblock %}