{% 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>
<meta charset="UTF-8">
    <title>RFM Project</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->

<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 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>



    <ul class="pager">
      <li><button id='previous' class='btn btn-primary'><<</button></li>
      <li><button id = 'next'   class='btn btn-primary'>>></button></li>
    </ul>


    <
  </div>
</div>

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

<script>

$(function(){

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

  fetchData();

  // handling the prev-btn
  $("#previous").on("click", function(){
    if (page > 1) {
      page--;
      fetchData();
    }
    console.log("Prev Page: " + page);
  });

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


function fetchData(){

$.ajax({
          url: "{% url 'api:influencer_list' %}",
          method: 'get',
          data: {
        page: page,
      },
              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)
              },
              error:function(errorData){
                console.log('error')
                console.log(errorData)
              }
        });
}
console.log(page)
});

    </script>

<script></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 %}