{% extends "base.html" %}
{% block content %}

{#<div>#}
{#  <form id='program_list'>#}
{#  {{ macros.setting_input_text_and_buttons('code', '작품 Code', [['analysis_btn', '분석'], ['go_ohli24_btn', 'Go OHLI24']], desc='예) "https://ohli24.net/c/녹을 먹는 비스코" 이나 "녹을 먹는 비스코"') }}#}
{#  </form>#}
{#  <form id="program_auto_form">#}
{#  <div id='episode_list'></div>#}
{#  </form>#}
{#</div> <!--전체-->#}

<div>
    <div id="anime_category" class="btn-group" role="group" aria-label="Basic example">
        <button id="ing" type="button" class="btn btn-success">방영중</button>
        <button id="movie" type="button" class="btn btn-primary">극장판</button>
        <button id="complete_anilist" type="button" class="btn btn-dark">완결</button>
    </div>
    <form id="airing_list_form">
        <div id="airing_list"></div>
    </form>
    <form id="screen_movie_list_form">
        <div id="screen_movie_list" class="container">
        </div>
    </form>
    <div class="text-center">
        <div id="spinner" class="spinner-border" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <form id="program_auto_form">
        <div id='episode_list'></div>
    </form>
</div> <!--전체-->


<script type="text/javascript">
    const package_name = "{{arg['package_name'] }}";
    const sub = "{{arg['sub'] }}";
    const ohli24_url = "{{arg['ohli24_url']}}";
    let current_data = null;


    const get_anime_list = (type, page) => {
        console.log(`type: ${type}, page: ${page}`)
            let url = ''
        let data = {"page": page, "type": type}

        switch (type) {
            case 'ing':
                url = '/' + package_name + '/ajax/'+sub+'/anime_list'
                break;
            case 'movie':
                url = '/' + package_name + '/ajax/'+sub+'screen_movie_list'
                break;
            case 'complete':
                url = '/' + package_name + '/ajax/'+sub+'screen_movie_list'
                break
            default:
                break;
        }

        $.ajax({
            url: url,
            type: "POST",
            data: data,
            cache: false,
            dataType: "json",
            success: (ret) => {
                current_screen_movie_data = ret
                console.log('ret::>', ret)

                if (current_screen_movie_data !== '') {
                    if (type === "ing") {
                        make_airing_list(ret.data, page)
                    } else {
                        make_screen_movie_list(ret, page)
                    }
                    div_visible = true
                    console.log(div_visible)
                }
                next_page = page + 1
            }
        })
    }


    function make_airing_list(data, page) {
        let str = ''
        let tmp = ''

        {#str += "<d"#}
        {#str += m_hr_black();#}
        {#str += m_row_start(0);#}
        {##}
        {#str += m_row_end();#}
        {#str += m_hr_black();#}
        str += '<div>';
        str += '<button type="button" class="btn btn-info">Page <span class="badge bg-warning">' + page + '</span></button>';
        str += '</div>';
        str += '<div id="inner_screen_movie" class="row infinite-scroll">';
        for (let i in data.anime_list) {

            tmp = '<div class="col-sm-4">';
            tmp += '<div class="card">';
            tmp += '<img class="card-img-top" src="' + data.anime_list[i].image_link + '" />';
            tmp += '<div class="card-body">'
            {#tmp += '<button id="code_button" data-code="' + data.episode[i].code + '" type="button" class="btn btn-primary code-button bootstrap-tooltip" data-toggle="button" data-tooltip="true" aria-pressed="true" autocomplete="off" data-placement="top">' +#}
            {#    '<span data-tooltip-text="'+data.episode[i].title+'">' + data.episode[i].code + '</span></button></div>';#}
            tmp += '<h5 class="card-title">' + data.anime_list[i].title + '</h5>';
            tmp += '<p class="card-text">' + data.anime_list[i].code + '</p>';
            tmp += '<a href="./request?code=' + data.anime_list[i].code + '" class="btn btn-primary cut-text">' + data.anime_list[i].title + '</a>';
            tmp += '</div>';
            tmp += '</div>';
            tmp += '</div>';
            str += tmp

        }
        str += '</div>';
        str += m_hr_black();

        if (page > 1) {

            const temp = document.createElement('div')
            temp.innerHTML = str;
            while (temp.firstChild) {
                document.getElementById("screen_movie_list").appendChild(temp.firstChild);
            }
            page++

        } else {

            document.getElementById("screen_movie_list").innerHTML = str;

        }

    }

    function make_screen_movie_list(data, page) {
        let str = ''
        let tmp = ''

        {#str += "<d"#}
        {#str += m_hr_black();#}
        {#str += m_row_start(0);#}
        {##}
        {#str += m_row_end();#}
        {#str += m_hr_black();#}
        str += '<div>';
        str += '<button type="button" class="btn btn-info">Page <span class="badge bg-warning">' + page + '</span></button>';
        str += '</div>';
        str += '<div id="inner_screen_movie" class="row infinite-scroll">';
        for (let i in data.anime_list) {

            tmp = '<div class="col-sm-4">';
            tmp += '<div class="card">';
            tmp += '<img class="card-img-top" src="' + data.anime_list[i].image_link + '" />';
            tmp += '<div class="card-body">'
            {#tmp += '<button id="code_button" data-code="' + data.episode[i].code + '" type="button" class="btn btn-primary code-button bootstrap-tooltip" data-toggle="button" data-tooltip="true" aria-pressed="true" autocomplete="off" data-placement="top">' +#}
            {#    '<span data-tooltip-text="'+data.episode[i].title+'">' + data.episode[i].code + '</span></button></div>';#}
            tmp += '<h5 class="card-title">' + data.anime_list[i].title + '</h5>';
            tmp += '<p class="card-text">' + data.anime_list[i].code + '</p>';
            tmp += '<a href="./request?code=' + data.anime_list[i].code + '" class="btn btn-primary cut-text">' + data.episode[i].title + '</a>';
            tmp += '</div>';
            tmp += '</div>';
            tmp += '</div>';
            str += tmp

        }
        str += '</div>';
        str += m_hr_black();

        if (page > 1) {

            const temp = document.createElement('div')
            temp.innerHTML = str;
            while (temp.firstChild) {
                document.getElementById("screen_movie_list").appendChild(temp.firstChild);
            }
            page++

        } else {

            document.getElementById("screen_movie_list").innerHTML = str;

        }

    }


    $(document).ready(function(){
    {#if ( "{{arg['ohli24_current_code']}}" !== "" ) {#}
    {#    document.getElementById("code").value = "{{arg['ohli24_current_code']}}";#}
    {#    // 값이 공백이 아니면 분석 버튼 계속 누름#}
        {#document.getElementById("analysis_btn").click();#}
    {#}#}

    $('#anime_category #ing').on("click", function() {
        {#console.log(this.id)#}
        let spinner = document.getElementById('spinner');
        spinner.style.visibility = 'visible';
        get_anime_list("ing", 1)
    })

    // 분석 버튼 클릭시 호출
    $("body").on('click', '#analysis_btn', function(e){
        e.preventDefault();
        const code = document.getElementById("code").value
        console.log(code)
    $.ajax({
        url: '/' + package_name + '/ajax/' + sub + '/analysis',
        type: "POST",
        cache: false,
        data: {code:code},
        dataType: "json",
        success: function (ret) {
           if (ret.ret === 'success' && ret.data != null) {
               {#console.log(ret.code)#}
               console.log(ret.data)
               make_program(ret.data)
           } else {
               $.notify('<strong>분석 실패</strong><br>' + ret.log, {type: 'warning'});
           }
        }
    });



    $("body").on('click', '#go_ohli24_btn', function(e){
        e.preventDefault();
        window.open("{{arg['ohli24_url']}}", "_blank");
    });

    $("body").on('click', '#all_check_on_btn', function(e){
        e.preventDefault();
        $('input[id^="checkbox_"]').bootstrapToggle('on')
    });

    $("body").on('click', '#all_check_off_btn', function(e){
        e.preventDefault();
        $('input[id^="checkbox_"]').bootstrapToggle('off')
    });

    $("body").on('click', '#add_queue_btn', function(e){
      e.preventDefault();
      data = current_data.episode[$(this).data('idx')];
      console.log('data:::>', data)
      $.ajax({
        url: '/' + package_name + '/ajax/' + sub + '/add_queue',
        type: "POST",
        cache: false,
        data: {data:JSON.stringify(data)},
        dataType: "json",
        success: function (data) {
          if (data.ret == 'enqueue_db_append' || data.ret == 'enqueue_db_exist') {
            $.notify('<strong>다운로드 작업을 추가 하였습니다.</strong>', {type: 'success'});
          } else if (data.ret == 'queue_exist') {
            $.notify('<strong>이미 큐에 있습니다. 삭제 후 추가하세요.</strong>', {type: 'warning'});
          } else if (data.ret == 'db_completed') {
            $.notify('<strong>DB에 완료 기록이 있습니다.</strong>', {type: 'warning'});
          } else {
            $.notify('<strong>추가 실패</strong><br>' + ret.log, {type: 'warning'});
          }
        }
      });
});
});
});

</script>
{% endblock %}