Untitled

{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
    <title>Likegram</title>
    <link href="/static/css/bootstrap.css" rel="stylesheet">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#q1").keyup(function() {
                if ($('#name_user').text()) {
                    $("p.mydata").remove();
                    $('#name_user').text('')
                }
                if ($('#q1').val().length > 1) {
                    $.ajax({
                    url: '/support',
                    dataType: 'json',
                    data : { q1 : $('#q1').val() },
                    success: function(data_django) {
                        var datalist = document.getElementById("browsers");
                        datalist.textContent = '';
                        for (var i = 0; i < data_django.length; i++) {
                            var option = document.createElement("option");
                            option.value = "ID: " + data_django[i].id + " Name: " + data_django[i].first_name + " " + data_django[i].last_name;
                            datalist.appendChild(option);
                        };
                    },
                })
            }
        })
        $('#q1').bind('select', function() {
            $.ajax({
                url: '/support',
                data: { selected_user : $('#q1').val() },
                dataType: 'json',
                success: function(data) {
                    var id = $("<p class='mydata'></p>").text("ID: " + data.id);
                    var name = $("<p class='mydata'></p>").text("Имя: " + data.first_name + " " + data.last_name);
                    var joined = $("<p class='mydata'></p>").text("Дата регистрации: " + data.join);
                    var tariff = $("<p class='mydata'></p>").text("Текущий тариф: " + data.tariff);
                    $("#tab-1").append(id, name, joined, tariff);
                    for (var i = 0; i < data.opponents.length; i++) {
                        var opponent = $("<p class='mydata'></p>").text("Конкурент: " + data.opponents[i]);
                        $("#tab-2").append(opponent);
                    }
                    for (var i = 0; i < data.orders.length; i++) {
                        var orders = $("<p class='mydata'></p>").text("Платеж от: " + data.orders[i][0] + " На сумму: " + data.orders[i][1] + " руб.");
                        $("#tab-3").append(orders);
                    }
                    $('#name_user').text("Информация о пользователе: " + data.first_name + " " + data.last_name);
                }

            });
        });
    })
    </script>
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#mytabs a").click(function(e){
                e.preventDefault();
                $(this).tab('show');
            });
        });
    </script>
    <br>
    <div class="container">
        <div class="col-md-8">
            <input list="browsers" class="form-control" id="q1" type="text" placeholder="Введите имя пользователя ... " required autofocus>
            <datalist id="browsers"></datalist>
        </div>
    </div>
    <div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="tabs">
                <h2 id='name_user'></h2>
                <br>
                <ul class="nav nav-tabs" id="mytabs">
                    <li class="active"><a href="#tab-1" data-toogle="tab" >Основная информация</a></li>
                    <li><a href="#tab-2" data-toogle="tab">Конкуренты</a></li>
                    <li><a href="#tab-3" data-toogle="tab">Платежи</a></li>
                </ul>
                <div class="tab-content">
                    <div id="tab-1" class="tab-pane fade in active">
                        <br>
                    </div>
                    <div id="tab-2" class="tab-pane fade">
                        <h3>Список конкурентов</h3>
                    </div>
                    <div id="tab-3" class="tab-pane fade">
                        <h3>Список платежей</h3>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</body>
</html>