{% extends 'base.html' %}
{%load staticfiles%}
{% block content %}

<style>
select.form-control:not([size]):not([multiple]) {
    height: calc(2.25rem + 10px);
}
#graph-card {
  background-color:#fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  width: 98%;
  min-height: 200px ;
  margin: 5px;
  transition: 0.3s;
  border-radius: 5px;
  border: 1px solid white;

}
.buttontoggle {
  background-color: #3d6bce; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}

.buttontoogle {
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
}

.button2toggle:hover {
  background-color: #008CBA;
  color: white;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content" style="background-color: #f4f4f4">
            <button onclick="topFunction()" id="myBtn" title="Go to top"><i class="glyphicon glyphicon-hand-up"></i></button>
               <div>
                 <button class="buttontoggle button2toggle" type="button"   id="sidebarCollapse"><i class="glyphicon glyphicon-align-left" style="color: white;"></i>
                                <span style="color: white;">Toggle Sidebar</span></button>
               </div>
              <br>
<!---------------Start of Report ------------>
<h3 style="font-family:sans-serif;" align="center" >My Influencer's : {{ user }} </h3>
    <div class="col-md-12 pgraph">
        <div id="treedata"></div>
    </div>

<!----div class="row"------>

    <div class="col-md-12 graph ">
        <h3 class="text-center">Segmentation by Influence</h3><hr>


        <!----table -------->
  <div id="graph-card">
      <div class="col-md-12" id="tt_cat">
          </br>
          <form method="get" action="{% url 'dashboard:influencer_analysis' %}" enctype="multipart/form-data" class="cts"> {% csrf_token %}
                <select id = "category" name ="cat_sel" class="form-control" required >
                    <option value="all" selected="selected">Choose Categories</option>
                    {%for i in follower_cat %}
                    <option name = '{{i}}' value="{{i}}">{{i}}</option>
                    {% endfor %}
                </select>
              <button type="submit" class="btn btn-success btn-block" style="background: #3d6bce;">Submit</button>
          </form>
    </div>
      <!--- graphs------>
    <div class="table-responsive">
        <table class="table" style="font-size: 13px;">
            <thead>
                <tr>
                    <th scope="col">User</th>
                    <th scope="col">Name</th>
                    <th scope="col">Bio</th>
                    <th scope="col"># of followers</th>
                    <th scope="col">Last Active in Days</th>
                </tr>
            </thead>
            <tbody id="d1" style=""></tbody>
        </table>
    </div>
    <div id="pagination_block"></div>
  </div>
</div>

</div>
<!---Loading on default----->

<script>

$(function(){

  var page = 1,
    pagelimit = 10,
    totalrecord = 0;

  fetchData(page);

  // handling the prev-btn
    $(document).on('click', ".page-link", function(){
          page = $(this).data('page');
          fetchData(page);
          console.log("current Page: " + page);
      })

      $(document).on('click', "#previous", function(){
        if (page > 1) {
          page--;
          fetchData(page);
        }
        console.log("Prev Page: " + page);
      });

  // handling the next-btn
  $(document).on('click', "#next", function(){
    if (page * 10 < totalrecord) {
      page++;
      fetchData(page);
    }
    console.log("Next Page: " + page);
  });


function fetchData(page){

var category = document.getElementById('category').value;
var url = "{% url 'api:influencer_list' %}?";
if (category && category != "all")
{
    url += "cat_sel=" + category + "&";
}
if(page)
{
    url += "page=" + page;
}
$.ajax({
  url: url,
  method: 'get',
  success:function(data){
    totalrecord = data.count;
         var cat_option = ''
        for(var customer in data.results){
            cat_option+= '<tr><td><img src='+data.results[customer].t_profile_image_url +' class="img-circle" alt="image description" width="45" height="45"/></td><td><a href="http://twitter.com/'+data.results[customer].t_screen_name+'" target="_blank">'+data.results[customer].t_screen_name+'</a></td> <td>'+data.results[customer].t_description+'</td><td>'+data.results[customer].t_followers_count+'</td><td>'+data.results[customer].t_status_created_at_daydiff+'</td></tr>'
        }
        $('#d1').html(cat_option)
        var pagination_html = "<ul class=\"pager\">";
            pagination_html += "<li><button id='previous' class='btn btn-primary'><<</button></li>";
            for(var page_item = 0; page_item < data.total_pages; page_item++)
            {
                if(page_item >= (page - 1) && page_item <= (page + 1))
                {
                    pagination_html += "<li class=\"page-item\">";
                        pagination_html += "<a data-page=\""+ page_item + "\" class=\"page-link\" href=\"#\">" +  page_item + " </a>";
                    pagination_html += "</li>";
                }
            }
            pagination_html += "</li>";
            pagination_html += "</ul>";
        $('#pagination_block').html(pagination_html);
  },
  error:function(errorData){
    console.log('error')
    console.log(errorData)
  }
});
}
});

</script>



<!-- graph and customer selection with pagination -->
<script>
   $(document).ready(function(){
   var t20 = $(".cts")
   t20.submit(function(event){
        event.preventDefault();
        var page = 1,
            pagelimit = 10,
            totalrecord = 0;
        fData();
          // handling the prev-btn
  $("#previous").on("click", function(){
    if (page > 1) {
      page--;
      fData();
    }
    console.log("Prev Page cat: " + page);
  });

  // handling the next-btn
  $("#next").on("click", function(){
    if (page * 10 < totalrecord) {
      page++;
      fData();
    }
    console.log("Next Page cat: " + page);
  });


    function fData(){
        var category = document.getElementById('category').value;
        $.ajax({

              url: "{% url 'api:influencer_list' %}?cat_sel="+category,
              method: 'get',
              data: {
                page: page,
                    },
              success:function(data){
                     var cat_option = ''
                    for(var customer in data.results){
                        cat_option+= '<tr><td><img src='+data.results[customer].t_profile_image_url +' class="img-circle" alt="image description" width="45" height="45"/></td><td><a href="http://twitter.com/'+data.results[customer].t_screen_name+'" target="_blank">'+data.results[customer].t_screen_name+'</a></td> <td>'+data.results[customer].t_description+'</td><td>'+data.results[customer].t_followers_count+'</td><td>'+data.results[customer].t_status_created_at_daydiff+'</td></tr>'
                    }
                    $('#d1').html(cat_option)
              },
              error:function(errorData){
                console.log('error')
                console.log(errorData)
              }
        });

                      }
});

        return false;
   });

</script>




<!-- treemap -->

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>

<style>
#treedata {
    min-length: 100%;
    min-width: 100%;
    max-width: 100%;
    margin: 0 auto;

}
</style>

<script>

Highcharts.chart('treedata', {
    series: [{
        type: "treemap",
        layoutAlgorithm: 'stripes',
        alternateStartingDirection: true,
        levels: [{
            level: 1,
            layoutAlgorithm: 'sliceAndDice',
            dataLabels: {
                enabled: true,
                align: 'center',
                verticalAlign: 'center',
                style: {
                    fontSize: '18px',
                    fontWeight: 'lighter'

                }
            }
        }],
        data: {{ data | safe}}
    }],
    title: {
        text: ' '
    }
});
</script>


{% endblock %}