<div class="content-header row">
    <h1> 유튜브 </h1>
</div>

<style>
    .modal-dialog {
        margin: 30px auto;
    }

    .modal-body {
        position: relative;
        padding: 0px;
    }

    .close {
        position: absolute;
        right: -30px;
        top: 0;
        z-index: 999;
        font-size: 2rem;
        font-weight: normal;
        color: #fff;
        opacity: 1;
    }
</style>
<div id="dsItemListTableTool">
    <div class="form-inline" role="form">
        <select class="form-control btn btn-default podbbang-crawl-category">
            <option value="">분류</option>
            <option value="1">성경</option>
            <option value="2">설교</option>
            <option value="3">도서/신학/특강</option>
            <option value="4">교회/토크쇼</option>
            <option value="0">기타</option>
        </select>
        <input type="text" class="form-control keyword-search-input" name="keyword">
        <button type="submit" class="btn btn-primary podbbang-search-btn">검색</button>
    </div>
</div>
<table class="order-table fill table-condensed podbbang-table" data-page-size="50" data-page-list="[50,100,250,500,1000]" data-toolbar="#dsItemListTableTool" data-method="post" data-side-pagination="server" data-pagination="true" data-show-export="true" data-export-types="['excel','sheet']" data-show-refresh="true" data-show-columns="true" data-pagination-v-align="both" data-click-to-select="true" data-sort-name="vcDateCreated" data-sort-order="desc" data-url="/crawls/youtube/table">
    <thead>
        <tr>
            <th data-field="state" data-checkbox="true"></th>
            <th data-field="Category" data-align="left"> 카테고리 </th>   
            <th data-field="Thumbnail" data-align="left" data-formatter="ytThumbnailFormatter"> 이미지 </th>
            <th data-field="Title" data-align="left" data-formatter="ytTitleFormatter"> 제목 </th>
            <th data-field="VideoId" data-align="left"> 비디오아이디 </th>
            <th data-field="Views" data-align="left"> 방문수 </th>
            <th data-field="Likes" data-align="left"> 좋아요 </th>
            <th data-field="Subscribes" data-align="left"> 구독 </th>
            <th data-field="Comments" data-align="left"> 댓글수 </th>            
            <th data-field="Description" data-align="left" data-formatter="ytDescriptionFormatter"> 설명 </th>            
            <th data-field="UpdatedAt" data-align="left"> 업로드날짜 </th>
            <th data-field="CreatedAt" data-align="left"> 크롤링날짜 </th>                     
        </tr>
    </thead>
</table>

<div class="hide table-action-buttons">
    <div class="table-action-btn"><select class="btn btn-default">
            <option value="">분류변경</option>
            <option value="1">성경</option>
            <option value="2">설교</option>
            <option value="3">도서/신학/특강</option>
            <option value="4">교회/토크쇼</option>
            <option value="127">제외</option>
        </select></div>
</div>
<script src="/assets/alt/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="/assets/alt/bootstrap/js/bootstrap.min.js"></script>
<script src="/assets/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.js" integrity="sha256-eXHLyyVI+v6X1wbfg9NB05IWqOqY4E9185nHZgeDIhg=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/locale/bootstrap-table-ko-KR.min.js" integrity="sha256-Yb64uCOu811SJG/6YP+DHrXfkk0cEq9FI2aDHKrXsFA=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha256-bqVeqGdJ7h/lYPq6xrPv/YGzMEb6dNxlfiTUHSgRCp8=" crossorigin="anonymous"></script>

<script>
    $(function() {
        tableActionButtons = $('.table-action-buttons')
        var categoryOptions = tableActionButtons.find('select option');

        ytTableImageFormatter = function(value, row, index) {
            return '<img src="' + value + '">'
        }

        ytTableActionFormatter = function(value, row, index) {
            return tableActionButtons.clone().html()
        }

        ytThumbnailFormatter = function(value, row, index) {
            return '<img src="' + value + '" width="100">';
        }

        ytDescriptionFormatter = function(value, row, index) {
            return $.trim(value.substring(0, 100)) + (value.length > 100 ? '...' : '');
        }

        ytTitleFormatter= function(value, row, index) {
            return '<a href="https://www.youtube.com/watch?v=' + row.VideoId + '" target="_blank">'+value+'</a>';
        }

        var table = $('.podbbang-table').bootstrapTable()
        table.on('load-success.bs.table', function(e, data) {
            // $('.table-action-btn').each(function(i, n) {
            //     $(n).find('select').on('change', function() {
            //         $.post('/crawls/youtube/category', {
            //             category: this.value,
            //             id: table.bootstrapTable('getData')[$(n).parents('tr:eq(0)').data('index')].Id
            //         }, function(res) {
            //             table.bootstrapTable('refresh', {
            //                 query: {
            //                     keyword: searchInput.val(),
            //                     category: $('.podbbang-crawl-category').val()
            //                 }
            //             })
            //         })
            //     }).find('option[value="' + (data.rows[i] != undefined && data.rows[i].Category != 0 ? data.rows[i].Category : '') + '"]').get(0).selected = true;
            // })
        })

        var searchInput = $('.keyword-search-input').keyup(function(e) {
            if (e.keyCode == 13) {
                searchBtn.trigger('click')
            }
        })

        var searchBtn = $('.podbbang-search-btn').on('click', function() {
            table.bootstrapTable('refresh', {
                query: {
                    keyword: searchInput.val(),
                    category: $('.podbbang-crawl-category').val()
                }
            })
        })

    })
</script>