{% extends 'base.html' %} {% load staticfiles %} {% load app_filters %} {% block content %}
<!-- section -->
{% include "audio.html" %}
<div class="section book_wrap">
    <div class="box_left box">
        <div class="book_curri">
            <h2>CURRICULUM</h2>
            <ul class="list scrollbar-outer">
                {% for category in categories %}
                <li id="{{ category.id }}" onclick="playAudio('click'); loadBooks(event)">{{ category.name }}</li>
                {% endfor %}
            </ul>
            <ul class="curri scrollbar-outer" style="display: none" id="curri_ui_type1">
                <li class="on">Starter 1</li>
                <li>Starter 2</li>
            </ul>
            <ul class="curri_file dp1 scrollbar-outer" style="display: block" id="curri_ui_type2"></ul>
        </div>
    </div>
    <div class="box_right box">
        <div class="book_prev">
            <h2>BOOK PREVIEW</h2>
            <div class="type2" style="display: none" id="preview_container">
                <div class="book_info">
                    <figure>
                        <img id="preview_img" alt="" />
                    </figure>
                    <div class="scrollbar-outer">
                        <h3 id="preview_title"></h3>
                        <p id="preview_description" style="white-space: pre-line"></p>
                    </div>
                </div>
                <div class="book_btn">
                    <a onclick="playAudio('click'); startLecture()" class="b_start"></a>
                    <a onclick="playAudio('click'); window.open('http://epamus.com/bbs/board.php?bo_table=Pamus_data')" class="b_ref"></a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- //section -->
<div id="my-spinner" onclick="hideMySipnner()">
    <div>
        <span>
            <img src="//cdnjs.cloudflare.com/ajax/libs/galleriffic/2.0.1/css/loader.gif" />
        </span>
    </div>
    <div id="spinner-message" style="opacity: 1; position: absolute; top: calc(50% + 38px); left: calc(50% - 300px); width: 600px; text-align: center; color: #000"></div>
</div>

<script>
    $(document).ready(function () {
      $(".scrollbar-outer").scrollbar();
    })

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

      $('#description_preview').html('')
      $('#description').html('')

      $.ajax({
        type: 'POST',
        url: '/api/book',
        data: {
          category_id: category_id
        },
        dataType: 'json',
        success: function (data) {
          if (data.result === 200) {
            displayBooks(data.books)
          } else {
            alert(data.message)
          }
        },
        error: function (data) {
          alert("데이터 로딩에 실패했습니다. 다시 시도해주세요.")
        }
      })
    }

    function loadDetail(e) {
      let book_id = $(e.target).closest('li').attr('id')
      let siblings = $(e.target).closest('li').siblings()
      for (let i = 0; i < siblings.length; i++) {
        $(siblings[i]).removeClass("on");
      }
      $(e.target).closest('li').addClass("on");

      $.ajax({
        type: 'POST',
        url: '/api/book/detail',
        data: {
          book_id: book_id,
        },
        dataType: 'json',
        success: function (data) {
          if (data.result === 200) {
            displayDetail(data.book[0])
          } else {
            alert(data.message)
          }
        },
        error: function (data) {
          alert("데이터 로딩에 실패했습니다. 다시 시도해주세요.")
        }
      })
    }

    function loadSmall(obj) {
      const middle = $(obj).closest("li").data("middle");
      let siblings = $("ul.curri_file.dp1 ul.dp2 li");
      for (let sibling of siblings) {
        $(sibling).remove();
      }

      $.ajax({
        type: 'POST',
        url: '/api/book/small',
        data: {
          middle: middle,
        },
        dataType: 'json',
        success: function (data) {
          if (data.result === 200) {
            displaySmall(obj, data.smalls)
          } else {
            alert(data.message)
          }
        },
        error: function (data) {
          alert("데이터 로딩에 실패했습니다. 다시 시도해주세요.")
        }
      })
    }

    function loadAcademyBooks(obj) {
      const middle = $(obj).closest("ul.curri_file > li").data("middle");
      const small = $(obj).closest("li").data("small");
      let siblings = $("ul.dp3 li");
      for (let sibling of siblings) {
        $(sibling).remove();
      }

      $.ajax({
        type: 'POST',
        url: '/api/book/academy',
        data: {
          middle: middle,
          small: small
        },
        dataType: 'json',
        success: function (data) {
          if (data.result === 200) {
            console.log(data);
            displayAcademyBooks(obj, data.books)
          } else {
            alert(data.message)
          }
        },
        error: function (data) {
          alert("데이터 로딩에 실패했습니다. 다시 시도해주세요.")
        }
      })
    }

    function displayAcademyBooks(obj, books) {
      let html = ''

      books.forEach(function (book) {
        html += `<li id="${book.id}" distribution-version="${book.distribution_version}" data-is-distribute="${book.is_distribute}" data-action-id="${book.book_action.id}" data-action-type="${book.book_action.action_type}" data-icon-type="${book.book_action.icon_type}" onclick="playAudio('click'); loadDetail(event)"><span>${book.name}</span></li>`
      })

      $($(obj).closest("li").find("ul.dp3")[0]).html(html)
    }

    function displaySmall(obj, smalls) {
      let html = ''

      smalls.forEach(function (small) {
        html += `
                <li data-small="${small.small}"><span onclick="playAudio('click'); loadAcademyBooks(this)">${small.small ? small.small : '기타'}</span>
                  <ul class="dp3">
                  </ul>
                </li>
                `
      })

      $($(obj).closest("li").find("ul.dp2")[0]).html(html)
    }

    function displayBooks(books) {
      // $(".list li.on").attr("id") === 1 -> 학원자체컨텐츠
      let html = ''

      if ($(".list li.on").attr("id") === "1") {
        $("#curri_ui_type1").closest("div").hide();
        $("#curri_ui_type1").hide();
        $('#curri_ui_type2').show();

        books.forEach(function (book) {
          html += `
                  <li data-middle="${book.middle}"><span onclick="playAudio('click'); loadSmall(this)">${book.middle ? book.middle : '기타'}</span>
                    <ul class="dp2">
                    </ul>
                  </li>
                  `
        });

        $('#curri_ui_type2').html(html)
      } else {
        $("#curri_ui_type1").closest("div").show();
        $("#curri_ui_type1").show();
        $('#curri_ui_type2').hide();

        books.forEach(function (book) {
          html += `<li id="${book.id}" distribution-version="${book.distribution_version}" data-is-distribute="${book.is_distribute}" onclick="playAudio('click'); loadDetail(event)" ondblclick="startLecture();">${book.name}</li>`
        })

        $('#curri_ui_type1').html(html)
      }
    }

    function displayDetail(book) {
      $("#preview_container").show();
      $("#preview_img").attr("src", book.thumbnail__uri);
      $("#preview_title").text(book.name);
      var description = book.description;
      description.replace(/\n/g, '<br/>');
      $("#preview_description").text(description);
    }

    function startLecture() {
      let book_id;
      let distributionVersion;
      let isDistribute;

      if ($(".list li.on").attr("id") === "1") {
        book_id = $('ul.dp3 li.on').attr('id');
        distributionVersion = $('ul.dp3 li.on').attr('distribution-version');
        isDistribute = $('ul.dp3 li.on').data("is-distribute")
      } else {
        book_id = $('ul.curri li.on').attr('id');
        distributionVersion = $('ul.curri li.on').attr('distribution-version');
        isDistribute = $('ul.curri li.on').data("is-distribute")
      }

      if (!isDistribute) {
        alert("교재 배포 후 이용해주세요.")
        return;
      }

      gotoBook();
    }

    function gotoBook() {
      let categoryId = $('ul.list li.on').attr("id");
      let $book;
      let bookId;
      let distributionVersion;

      if (categoryId === "1") {
        $book = $('ul.curri_file li.on');
        bookId = $book.attr('id');
        distributionVersion = $book.attr('distribution-version');
      } else {
        $book = $('ul.curri li.on');
        bookId = $book.attr('id');
        distributionVersion = $book.attr('distribution-version');
      }

      {%  if client == 'WEB' %}
        // window.location.href = '/viewer?book_id=' + bookId
        finishCheckBook();
      {% else %}
        console.log("showMySpinner");
        showMySpinner();
        window.location = 'http://segimapp/checkbook/' + bookId + '?distribution_version=' + distributionVersion + "&user_mb_no={{ request.user.mb_no }}";
      {% endif %}
    }

    function finishCheckBook() {
      let categoryId = $('ul.list li.on').attr("id");

      if (categoryId === "1") {
        let $book = $('ul.curri_file li.on');
        let bookId = $book.attr('id');
        let actionId = $book.data("action-id");
        const actionType = $book.data("action-type");

        if (actionType === "choice") {
          window.location.href = `/viewer/exercise/choice?action_id=${actionId}&ref=/book`;
        } else {
          window.location.href = `/viewer/learning/word?action_id=${actionId}&ref=/book`;
        }
      } else {
        let $book = $('ul.curri li.on');
        let bookId = $book.attr('id');

        window.location.href = "/viewer?book_id=" + bookId;
      }
    }

    function startDownloadSpinner() {
      showMySpinner("교재를 다운 로드 중입니다.");
    }
</script>
{% endblock %}