{% extends 'base.html' %}
{% load staticfiles %}
{% load app_filters %}

{% block content %}
<!-- section -->
<div class="section ranking_wrap">
  <div class="box_left box">
    <div class="rk_class">
      <h2>CLASS</h2>
      <ul class="list scrollbar-outer">
        {% for class in classes %}
        <li name="class_btns" id="{{ class.id }}" onclick="changeClass(event)">{{ class.name }}</li>
        {% endfor %}
      </ul>
    </div>
  </div>
  <div class="box_right">
    <div class="rk_content">
      <ul>
        <li class="on"><a onclick="changePeriodTab(event)" data-method="today">Today</a></li>
        <li><a onclick="changePeriodTab(event)" data-method="monthly">Monthly</a></li>
        <li><a onclick="changePeriodTab(event)" data-method="yearly">Yearly</a></li>
      </ul>
      <div class="rk_box">
        <ul class="rk_list scrollbar-outer" id="student_ranking_board">
        </ul>
        <div class="rk_wrap">
          <a id="sendkakao_btn" onclick="send_kakaotalk()" style="cursor:pointer;"><img src="{% static "img/btn_kakao.png" %}" alt="">
            <span>성적우수학생 알림톡</span>
          </a>
          <div class="today" id="today_ranking_board" style="display: block;">
            <div class="rk_red">
              <span class="lose" id="team_red_img"></span>
              <h4>RED TEAM</h4>
              <div id="team_red_score">
                <h5>0 <span>점</span></h5>
              </div>
            </div>
            <div class="rk_blue">
              <span class="lose" id="team_blue_img"></span>
              <h4>BLUE TEAM</h4>
              <div id="team_blue_score">
                <h5>0 <span>점</span></h5>
              </div>
            </div>
          </div>
          <div class="weekly" id="monthly_ranking_board" style="display: none;">
            <div>
              <figure>
                <h6 id="monthly_ranking_gold">English(Korean)</h6>
                <img src="{% static "img/w_gold.png" %}" alt="">
              </figure>
              <figure>
                <h6 id="monthly_ranking_silver">English(Korean)</h6>
                <img src="{% static "img/w_silver.png" %}" alt="">
              </figure>
              <figure>
                <h6 id="monthly_ranking_bronze">English(Korean)</h6>
                <img src="{% static "img/w_bronze.png" %}" alt="">
              </figure>
            </div>
          </div>
          <div class="monthly" id="yearly_ranking_board" style="display: none;">
            <div>
              <figure>
                <h6 id="yearly_ranking_gold">English(Korean)</h6>
                <img src="{% static "img/m_gold.png" %}" alt="">
              </figure>
              <figure>
                <h6 id="yearly_ranking_silver">English(Korean)</h6>
                <img src="{% static "img/m_silver.png" %}" alt="">
              </figure>
              <figure>
                <h6 id="yearly_ranking_bronze">English(Korean)</h6>
                <img src="{% static "img/m_bronze.png" %}" alt="">
              </figure>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- //section -->

<script>
  $(document).ready(function () {
    $(".scrollbar-outer").scrollbar();
  })
  var todayRanks = [];
  var tab = "today";
  var classId = 0;
  function displayTeamScore(blue, red){
    let $team_red_img = $("#team_red_img");
    let $team_red_score = $("#team_red_score");
    $team_red_img.attr("class", red > blue ? 'win' : 'lose');
    $team_red_score.html(`<h5>${red} <span>점</span></h5>`);

    let $team_blue_img = $("#team_blue_img");
    let $team_blue_score = $("#team_blue_score");
    $team_blue_img.attr("class", blue > red ? 'win' : 'lose');
    $team_blue_score.html(`<h5>${blue} <span>점</span></h5>`);
  }
  function changeClass(e) {
    let classes = $(e.target).siblings()
    for (let i = 0; i < classes.length; i++) {
      $(classes[i]).removeClass("on");
    }
    $(e.target).addClass("on");

    classId = e.target.id;
    switch ($("div.rk_content > ul > li").index($("div.rk_content > ul > li.on"))) {
      case 0:
        loadRanking(classId);
        break;
      case 1:
        loadTotalRanking("monthly");
        break;
      case 2:
        loadTotalRanking("yearly");
        break;
      default:
        break;
    }
    
  }
  function changePeriodTab(e) {
    let periodTabs = $(e.target).closest("li").siblings();
    for (let i = 0; i < periodTabs.length; i++) {
      $(periodTabs[i]).removeClass("on");
    }
    $(e.target).closest("li").addClass("on");
    
    const method = $(e.target).data("method");

    $("#today_ranking_board").hide();
    $("#monthly_ranking_board").hide();
    $("#yearly_ranking_board").hide();
    $(`#${method}_ranking_board`).show();
    tab = method;
    if (method === 'today') {
      $("#sendkakao_btn").show();
      let $activeClass = $("li[name=class_btns][class=on]")
      if ($activeClass.length > 0) {
        const classId = $activeClass[0].id
        loadRanking(classId);
      } else {
        loadRanking(0);
      }
    } else {
      $("#sendkakao_btn").hide();
      loadTotalRanking(method);
    }
  }
  function loadRanking(classId) {
    $("#student_ranking_board").html("");

    if (classId === 0) {
      return;
    }

    $.ajax({
      type: 'POST',
      url: '/api/ranking',
      data: {
        class_id: classId
      },
      dataType: 'json',
      success: function (data) {
        if (data.result === 200) {
          const list = data.data.today;
          todayRanks = [];
          if(list != null && list.length > 0){
            let $student_ranking_board = $("#student_ranking_board")
            for(var i = 0; i < list.length; i++){
              if(i < 3){
                todayRanks.push(list[i])
              }
              const score = parseInt(list[i].totalscore);
              let name = "";

              if (list[i].user__name_eng) {
                name += list[i].user__name_eng;

                if (list[i].user__g5_member__mb_name) {
                  name += ", ";
                }
              }

              if (list[i].user__g5_member__mb_name) {
                name += list[i].user__g5_member__mb_name;
              }

              $student_ranking_board.append(`<li><span><span style="color: #027ffe;">[${list[i].totalscore}]</span>${name ? name : "-"}</span></li>`);
            }
          }
          displayTeamScore(data.data.blue, data.data.red);
        } else {
          alert(data.error.message)
        }
      },
      error: function (data) {
        alert("데이터 로딩에 실패했습니다. 다시 시도해주세요.")
      }
    })
  }

  function send_kakaotalk(){

    console.log(tab);
    console.log(todayRanks);
    if(todayRanks.length > 0){
      var sendIds = [];
      for(var i = 0; i < todayRanks.length; i++){
        if(i > 2){
          break;
        }
        sendIds.push(todayRanks[i].user__g5_member__mb_no);
      }
      if(sendIds.length > 0 && confirm("푸시메시지를 발송 하시겠습니까?")){

        var formData = new FormData();
        for(var i = 0; i < sendIds.length; i++){
          formData.append("ids[]", sendIds[i]);
        }
        formData.append("class_id", classId);

        $.ajax({
          type: 'POST',
          url: '/api/ranking/sendkakao',
          data: formData,
          dataType: 'json',
          contentType:false,
          processData:false,
          success: function (data) {
            if (data.result === 200) {
              alert("전송되었습니다.")
            } else {
              alert(data.error.message)
            }
          },
          error: function (data) {
            alert("데이터 로딩에 실패했습니다. 다시 시도해주세요.")
          }
        });
      }
    }
  }

  function loadTotalRanking(method) {
    $("#student_ranking_board").html("");
    
    $.ajax({
      type: 'POST',
      url: '/api/ranking/total',
      data: {
        method:method
      },
      dataType: 'json',
      success: function (data) {
        if (data.result === 200) {
          var list = data.data.total;
          if(list != null && list.length > 0){
            let $student_ranking_board = $("#student_ranking_board")
            for(var i = 0; i < list.length; i++){
              const score = list[i].totalscore;
              let name = "";

              if (list[i].user__name_eng) {
                name += list[i].user__name_eng;

                if (list[i].user__g5_member__mb_name) {
                  name += ", ";
                }
              }

              if (list[i].user__g5_member__mb_name) {
                name += list[i].user__g5_member__mb_name;
              }

              $student_ranking_board.append(`<li><span><span style="color: #027ffe;">[${list[i].totalscore}]</span>${name ? name : "-"}</span></li>`);
              
              if (i === 0){
                $(`#${method}_ranking_gold`).html(list[i].user__name_eng);
              } else if (i === 1) {
                $(`#${method}_ranking_silver`).html(list[i].user__name_eng);
              } else if (i === 2) {
                $(`#${method}_ranking_bronze`).html(list[i].user__name_eng);
              }
            }
          }
        } else {
          alert(data.error.message)
        }
      },
      error: function (data) {
        alert("데이터 로딩에 실패했습니다. 다시 시도해주세요.")
      }
    })
  }
</script>

{% endblock %}