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

{% block content %}
{% include "audio.html" %}
<div class="section student_wrap">
  <div class="box_left box">
    <div class="st_class">
      <h2>CLASS</h2>
      <ul class="list scrollbar-outer">
        {% for class in classes %}
        <li id="{{ class.id }}" onclick="playAudio('click'); loadStudents(event)">{{ class.name }}</li>
        {% endfor %}
      </ul>
    </div>

    <div class="st_student">
      <h2>STUDENT
        <a onclick="playAudio('click'); attendAll();"><img src="{% static "img/students.png" %}" alt="">
          <span>일괄출석</span>
        </a>
      </h2>
      <div class="scrollbar-outer" id="students">
        
      </div>
    </div>
  </div>

  <div class="box_right box">
    <div class="st_join">
      <h2>JOIN
        <a id="btn-attendKakao" onclick="playAudio('click');"><span>출석알림톡</span><img src="{% static "img/join_kakao.png" %}" alt=""></a>
      </h2>
      <div class="scrollbar-outer">
        <div id="keyboard_infomation" class="keyboard_infomation" {% if redTeam|length > 0 or blueTeam|length > 0 %}style="display: none;"{% endif %}>
          <p class="title">** 키보드 배틀 로그인 방법 안내 **</p>
          <p class="main_text">네 자리 숫자를 순서대로 정확하게<br/>입력한 후 Enter키를 눌러줍니다. (# 제외)</p>
          <p class="main_text">입력 중 Enter키를 누르면 초기화됩니다.</p>
          <p class="title sub">** 키보드 기기 정상 여부 진단 **</p>
          <p class="sub_text">키보드 연동 상태에서 메모장을 열어 키보드<br/>입력이 정상적으로 이루어지면 기기 이상은<br/>아니므로 아래의 두 가지 사항을 점검해주시기<br/>바랍니다.</p>
          <p class="sub_text">1. usb허브와 노트북의 연결 상태 확인</p>
          <p class="sub_text" style="margin-top: 2px;">2. 키보드 내장 배터리 교체 후 재실행</p>
        </div>
        <h3 class="red">
          <span><img src="{% static "img/red_team.png" %}" alt=""></span>
          Red Team
        </h3>
        <ul class="red_t">
          {% for item in redTeam %}
          <li name="attendance" id="{{ item.mb_no }}" mbid="{{ item.mb_id }}" mbno="{{ item.mb_no }}" auth_code="{{ item.user__auth_code }}" keyboard_name="{{ item.user__keyboard_name }}" typename="attendance" img_uri="{% if item.user__photo_path %}{{item.user__photo_uri}}{% else %}{% static 'img/student_img.png' %}{% endif %}" >
              {{item.mb_name}}({{ item.user__name_eng }})
              <a onclick="playAudio('click'); moveToStudent(this)"></a>
          </li>
          {% endfor %}
        </ul>
        <h3 class="blue">
          <span><img src="{% static "img/blue_team.png" %}" alt=""></span>
          Blue Team
        </h3>
        <ul class="blue_t">
          {% for item in blueTeam %}
          <li name="attendance" id="{{ item.mb_no }}" mbid="{{ item.mb_id }}" mbno="{{ item.mb_no }}" auth_code="{{ item.user__auth_code }}" keyboard_name="{{ item.user__keyboard_name }}" typename="attendance" img_uri="{% if item.user__photo_path %}{{item.user__photo_uri}}{% else %}{% static 'img/student_img.png' %}{% endif %}" >
              {{item.mb_name}}({{ item.user__name_eng }})
              <a onclick="playAudio('click'); moveToStudent(this)"></a>
          </li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>

</div>

  <div class="devider-page"></div>

  <script>
    $(document).ready(function () {
      $(".scrollbar-outer").scrollbar();
      
      addListener()
      $('#btn-selectAll').on('click', function () {
        let attend = $('.attendance')

        for (let i = 0; i < attend.length; i++) {
          $(attend[i]).removeClass('basic')
          $(attend[i]).attr('selected', true)
        }
      })
      let attendance = $(".attendance")

      for (let i = 0; i < attendance.length; i++) {
        attendance[i].addEventListener('contextmenu', moveToStudent)
        attendance[i].addEventListener('click', toggleSelected)
      }
      $("#btn-attendKakao").on("click", send_kakaotalk);

      const classId = {% if request.user.user.userclassmap_set.first is not None %}{{request.user.user.userclassmap_set.first.class_id}}{% else %}0{% endif %};
      // $(`li#${classId}`).click();
    })
    function send_kakaotalk(e){
      var selected_btns = $("li[typename=attendance][class=on]");

      if(selected_btns.length == 0){
        alert("선택된 학생이 없습니다.");
        return;
      }
      var formData = new FormData();
      for(var i = 0; i < selected_btns.length; i++){
        console.log($(selected_btns[i]).attr("mbno"));
        formData.append("mb_no[]", $(selected_btns[i]).attr("mbno"));
      }
      if(confirm("출석 카톡을 전송 하시겠습니까?")){
        $.ajax({
          type: 'POST',
          url: '/api/send/kakao/attendance',
          data: formData,
          dataType: 'json',
          processData: false,
          contentType: false,
          success: function (data) {
            if (data.result === 1) {
              alert("전송 되었습니다.");
            } else {
              alert(data['error']['message'] + " (에러코드 " + data['error']['code'] + ")");
            }
          },
          error: function (xhr, errmsg, err) {
            alert("서버 오류가 발생했습니다. 다시 시도해주세요.");
          }
        });
      }


    }

    function addListener() {
      let dom = $('li[name=attendance]')
      for (let i = 0; i < dom.length; i++) {
        dom[i].addEventListener('click', toggleSelected)
      }

      dom = $('a[name=student]')
      for (let i = 0; i < dom.length; i++) {
        dom[i].addEventListener('click', onClickAttendance)
      }
    }

    function toggleSelected(e) {
      if (e.target.localName === "a") {
        return
      }
      e.preventDefault()
      let target = e.target
      if ($(target).attr('class')) {
        $(target).removeClass("on");
      } else {
        $(target).addClass("on");
      }
    }

    async function attendAll() {
      const students = $("a[name=student]");
      for (let student of students) {
        await moveToAttend(student)
      }
    }

    function onClickAttendance(e) {
      e.preventDefault()
      let target = $(e.target).closest("a")
      moveToAttend(target);
    }

    async function moveToAttend(target) {
      let data = await changeAttendStatus(target, 'attend')
      target = $(target)
      
      var $dom = null
      if (data.team === "red") {
        $dom = $("ul.red_t")
      } else {
        $dom = $("ul.blue_t")
      }
      $dom.append(`
                  <li id="${ target.attr("id") }" 
                      mbid="${ target.attr("mbid") }" 
                      mbno="${ target.attr("mbno") }" 
                      auth_code="${ target.find("span")[0].innerText.replace("# ", "") }"
                      name="attendance"
                      img_uri="${ target.attr("img_uri") }"
                      typename="attendance">
                    ${ target.find("h3")[0].innerText }
                    <a onclick="playAudio('click'); moveToStudent(this)"></a>
                  </li>
                  `);
      target.remove()
      addListener()

      if($("li[name=attendance]").length > 0) {
        $("#keyboard_infomation").hide();
      } else {
        $("#keyboard_infomation").show();
      }
    }

    async function moveToStudent(obj) {
      let data = await changeAttendStatus(obj, 'student')
      const $attendance = $($(obj).closest("li"));
      if (data.current_class === true) {
        const student_html = `
        <a id="${$attendance.attr("id")}" mbid="${$attendance.attr("mbid")}" mbno="${$attendance.attr("mbno")}" name="student" typename="attendance" onclick="playAudio('click')" img_uri="${$attendance.attr("img_uri")}">
          <figure>
            <img src="${$attendance.attr("img_uri")}" alt="">
          </figure>
          <div>
            <div>
              <h3>${$attendance[0].innerText}</h3>
              <span># ${$attendance.attr("auth_code")}</span>
            </div>
          </div>
        </a>
        `
        $('#students').append(student_html)
        $($attendance).remove()
        addListener()
      } else {
        $($attendance).remove()
      }

      if($("li[name=attendance]").length > 0) {
        $("#keyboard_infomation").hide();
      } else {
        $("#keyboard_infomation").show();
      }
    }

    function changeAttendStatusForKey(name) {
      let obj = $(document.getElementById(name))
      if (obj.length < 1) {
        return;
      }
      let authCode = obj.val()

      $.ajax({
        type: 'POST',
        url: '/api/attendance/keyboard/method',
        data: {
          auth_code: authCode,
          name: name,
          method:"attend"
        },
        dataType: 'json',
        success: function (data) {
          if (data.result === 201) {
            let attendance = $('li[name=attendance][id=' + data.member[0].mb_no + ']')
            if (attendance.length > 0) {
              attendance.attr('keyboard_name', data.member[0].user__keyboard_name)
              const team = attendance.closest('ul').attr("class").replace("_t", "");
              if (team !== data.member[0].user__team) {
                attendance.appendTo($(`ul.${data.member[0].user__team}_t`))
              }
            } else {
              var $dom = null
              if (data.member[0].user__team === "red") {
                $dom = $("ul.red_t")
              } else {
                $dom = $("ul.blue_t")
              }
              $dom.append(`
                          <li id="${ data.member[0].mb_no }"
                              mbid="${ data.member[0].mb_id }" 
                              mbno="${ data.member[0].mb_no }" 
                              auth_code="${data.member[0].user__auth_code}"
                              keyboard_name="${ data.member[0].user__keyboard_name }" 
                              img_uri="${ data.user__photo_path ? data.user__photo_uri : '{% static "img/student_img.png" %}' }"
                              name="attendance"
                              typename="attendance">
                              ${data.member[0].mb_name}(${data.member[0].user__name_eng})
                            <a onclick="playAudio('click'); moveToStudent(this)"></a>
                          </li>
                          `);
              // $('#attendance').append(`<button class="ui ${data.member[0].user__team} basic button attendance" type="button" typename="attendance" id="${data.member[0].mb_no}" mbid="${data.member[0].mb_id}" mbno="${data.member[0].mb_no}" name="${data.member[0].user__keyboard_name}"
              //         style="width: 100%; margin: 5px 0 5px 0;">[${data.member[0].user__auth_code}] ${data.member[0].mb_name}</button>`)
              addListener()
              if($("li[name=attendance]").length > 0) {
                $("#keyboard_infomation").hide();
              } else {
                $("#keyboard_infomation").show();
              }
            }
            $('a[name=student][id=' + data.member[0].mb_no + ']').remove()
          }
          obj.val('')
        },
        error: function (data) {
          alert("데이터 로딩에 실패했습니다. 다시 시도해주세요.")
        }
      })
    }

    function sendInputRequest(name, input, ishangul) {
      let attendance = $("li[keyboard_name="+name+"]")
      if (attendance.length > 0) {
        return
      }

      let obj = $(document.getElementById(name))
      if (obj.length < 1) {
        $('.devider-page').append(`<input class='keyboard' id='${name}' type='number' hidden/>`)
      }

      obj = $(document.getElementById(name))

      if (input.length > 0) {
        if (input === 'BACKSPACE') {
          let string = obj.val()
          let idx = lastAsciiIdx(string)
          let kor = korTypeToEng(string.substring(idx + 1))
          if (kor.length > 0) {
            obj.val(string.substring(0, idx + 1) + engTypeToKor(kor.substring(0, kor.length - 1)))
          } else {
            obj.val(string.substring(0, string.length - 1))
          }
        } else if (input === 'ENTER') {
          changeAttendStatusForKey(name)
        } else {
          if (ishangul) {
            let string = obj.val()
            let idx = lastAsciiIdx(string)
            obj.val(string.substring(0, idx + 1) + engTypeToKor(korTypeToEng(string.substring(idx + 1)) + input))
          } else {
            let string = obj.val()
            obj.val(string + input)
          }
        }
      }
    }

    function changeAttendStatus(obj, attend) {
      let selected = $('.list li.on').attr('id')
      let mb_no;
      if (attend == "attend") {
        mb_no = $(obj).closest("a").attr('mbno')
      } else {
        mb_no = $(obj).closest("li").attr('mbno')
      }

      return $.ajax({
        type: 'POST',
        url: '/api/attendance/method',
        data: {
          mb_no: mb_no,
          {#lecture_id: '{{ request.user.user.lecture_id }}',#}
          class_id: selected,
          method:attend,
        },
        dataType: 'json',
        success: function (data) {
          if (data.result === 201) {

          } else {
            alert(data.error.message)
          }
        },
        error: function (data) {
          alert("데이터 로딩에 실패했습니다. 다시 시도해주세요.")
        }
      })
    }

    function loadStudents(e) {
      let classes = $(e.target).siblings()
      for (let i = 0; i < classes.length; i++) {
        $(classes[i]).removeClass("on");
      }
      $(e.target).addClass("on");

      $.ajax({
        type: 'POST',
        url: '/api/attendance/students',
        data: {
          class_id: e.target.id,
          {#lecture_id: '{{ request.user.user.lecture_id }}',#}
        },
        dataType: 'json',
        success: function (data) {
          if (data.result === 200) {
            displayStudents(data.students)
          } else {
            alert(data.error.message)
          }
        },
        error: function (data) {
          alert("데이터 로딩에 실패했습니다. 다시 시도해주세요.")
        }
      })
    }

    function displayStudents(students) {
      let student_html = ''

      students.forEach(function (student) {
        console.log(student);
        student_html += `
        <a id="${student.mb_no}" mbid="${student.mb_id}" mbno="${student.mb_no}" name="student" typename="attendance" onclick="playAudio('click')" img_uri="${ student.user__photo_path ? student.user__photo_uri : '{% static "img/student_img.png" %}' }">
          <figure>
            <img src="${ student.user__photo_path ? student.user__photo_uri : '{% static "img/student_img.png" %}' }" alt="">
          </figure>
          <div>
            <div>
              <h3>${student.mb_name}(${student.user__name_eng})</h3>
              <span># ${student.user__auth_code}</span>
            </div>
          </div>
        </a>
        `
        // student_html += `<button class="ui primary basic button student" type="button" id="${student.mb_no}" typename="attendance" mbid="${student.mb_id}" mbno="${student.mb_no}"
        //               style="width: 100%; margin: 5px 0 5px 0;">[${student.user__auth_code}] ${student.mb_name}</button>`
      })

      $('#students').html(student_html)
      addListener()
    }
  </script>
{% endblock %}