<% include ../includes/header.ejs %>
    <div class="panel panel-default">
        <div class="panel-heading">
            <%=product.title%>
        </div>
        <form method="get" action="">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="검색 키워드를 입력하세요!" name="keyword" autocomplete='off'>
                <span class="input-group-btn">
                    <button class="btn btn-secondary" type="submit">찾기</button>
                </span>
            </div>
        </form>
        <form method="post" action="">
            <% for (var i in videos) { %>
                <div style="float:left;
                             padding: 15px;
                            ">
                    <input type="checkbox" name="videoNum" style="
                        position: absolute;
                        margin-top: 5px;
                        margin-left: 5px;
                        z-index: 4;
                        zoom:3.0;
                        " value="<%=videos[i].id + '///' + videos[i].title +'///'+ videos[i].categori +'///'+ videos[i].video_id +'///'+ videos[i].urls%>"/>
                    <div id="<%=videos[i].id%>" vid="<%=videos[i].video_id%>">
                    </div>
                </div>
                <%};%>
                <button class="btn btn-primary" style="margin-top: 10px; margin-left: 15px;" >영상담기</button>
        </form>
        <div class="panel-body">
            <div style="padding-bottom: 10px">
                작성일 : 
                <%=product.getDate.year%> - 
                <%=product.getDate.month%> - 
                <%=product.getDate.day%>
            </div>
            <% if(product.thumbnail){%>
                <p>
                    <img src="/uploads/<%=product.thumbnail%>" style="max-width: 100%"/>
                </p>
            <% } %>
            <%=product.description%>
            <!-- 댓글영역  -->
            <div>
                댓글작성하기
                <form id="commentForm" action="" method="post">
                    <input type="hidden" name="product_id" value="<%=product.id%>" />
                    <textarea class="form-control" name="content"></textarea>
                    <button class="btn btn-primary" style="margin-top: 10px" type="submit">댓글작성</button>
                </form>
            </div>
            <!-- 댓글영역  -->
            <hr />
            <div id="comment_area">
                <% comments.forEach(function(comment){ %>
                    <div>
                        <%=comment.content%>
                        ( <a class='comment_delete' comment_id='<%=comment._id%>'>삭제</a> )
                    </div>
                <% }); %>
            </div>
        </div>
    </div>
 
    <a href="/categori/products" class="btn btn-default">목록으로</a>
    <a href="/categori/products/edit/<%=product._id%>" class="btn btn-primary">수정</a>
<% include ../includes/footer.ejs %>
<script>
(function(){
    $(document).ready(function() {
        $('#commentForm').submit(function(){
            var $contentVal = $(this).children('textarea[name=content]').val();
            if($contentVal){
                $.ajax({
                    url: '/admin/products/ajax_comment/insert',
                    type: 'POST',
                    data: $(this).serialize(),
                })
                .done(function(args) {
                    if(args.message==="success"){
                        $('#comment_area').append(
                            '<div>' + args.content +
                            " ( <a class='comment_delete' comment_id='"+ args._id +"'>삭제</a> ) </div>"
                        );
                        $('#commentForm textarea[name=content]').val("");
                    }
                })
                .fail(function(args) {
                    console.log(args);
                });
            }else{
                alert('댓글 내용을 입력해주세요.')
            }
            return false;
        });
    });
})();
</script>
<script>
$(document).on('click' , '.comment_delete' , function(){
    if(confirm('삭제하시겠습니까?')){ //확인창 예 눌렀을 시만 진행
        var $self = $(this);
        $.ajax({
            url: '/admin/products/ajax_comment/delete',
            type: 'POST',
            data: { comment_id : $self.attr('comment_id') },
        })
        .done(function() {
            $self.parent().remove();
            alert("삭제가 완료되었습니다.");
        })
        .fail(function(args) {
            console.log(args);
        });
    }
});
</script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript">
    var $masonry_container = $('#masonry_container');
    $masonry_container.imagesLoaded(function () {
        $masonry_container.masonry({
            itemSelector: '.masonry-grid',
            columnWidth: 270
        });
    });
</script>
<script>
    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;
    var players = [];
    var videoIds = [];
    for (var i = 0; i < 10; i++) {
        players.push(String(i));
        videoIds.push($('#' + i).attr('vid'));
    }

    function onYouTubeIframeAPIReady() {
        for (var i = 0; i < videoIds.length; i++) {
            player = new YT.Player(players[i], {
                height: '300',
                width: '500',
                videoId: videoIds[i],
                events: {
                    // 'onReady': onPlayerReady,
                    // 'onStateChange': onPlayerStateChange
                }
            });
        }
    }
</script>