<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>배경음관리</title>
    <%@ include file="/WEB-INF/jsp/adm/include/topLinkTag.jsp"%>
    <style>
        .filebox label{
            min-width: 50px;
            height: 30px;
            display: inline-block;
            line-height: 28px;
            text-align: center;
            padding: 0 10px;
            letter-spacing: 0;
            border-radius: 3px;
            color: #fff;
            font-size: 0.875rem;
            font-weight: 300;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            background-color: #000;
        }
        .filebox input[type="file"] { /* 파일 필드 숨기기 */
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
        }
        .progress {
            position: relative;
            width: 100%;
            border: 1px solid #ddd;
            padding: 1px;
            border-radius: 3px;
        }
        .bar {
            background-color: #B4F5B4;
            width:0%;
            height:20px;
            border-radius: 3px;
        }
        .percent {
            position:absolute;
            display:inline-block;
            top:3px;
            left:48%;
        }
        .minIco.stopBtnIco {
            background: url("/lib/assets/images/ico-stopBtn.png") no-repeat;
            background-size: contain;
        }
    </style>
</head>
<body>

<h1>ICOMSYS ADMIN</h1>
<h1>대시보드</h1>
<div class="skip_navigation">
    <ul>
        <li>
            <a href="#Content" class="go_content">본문 바로가기</a>
        </li>
        <li>
            <a href="#Gnb">메뉴 바로가기</a>
        </li>
    </ul>
</div>

<header id="header">
    <%@ include file="/WEB-INF/jsp/adm/include/header.jsp"%>
</header>
<c:import url="/adm/menu/getLnbMenu.do" />
<h1>DASH BOARD</h1>

<section id="Content" class="bot_common">
    <div class="location">
        <ul>
            <li class="home"><a href="#">HOME</a></li>
            <li><a href="#">운영관리</a></li>
            <li><a href="#">배경음관리</a></li>
        </ul>
    </div>

    <div class="sub_cont">
        <div class="cont_box">
            <div class="box_title">

                <div class="fl">
                    <h2 class="mt12">배경음 조회</h2>
                </div>
                <div class="fr">
                    <div class="btn_wrap fr">
                        <a href="#" id="searchBtn" class="btn" data-role="search">조회</a>
                    </div>
                </div>
            </div>

            <div class="tbl">

                <table class="search block table-fixed">
                    <colgroup>
                        <col width="130px">
                        <col width="auto">
                    </colgroup>
                    <tbody>
                    <tr>
                        <th class="tl">파일명</th>
                        <td class="tl">
                            <div class="ipt_box listen">
                                <input type="text" id="search_filename" name="typeText" placeholder="검색할 파일명을 입력하세요">
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>

            </div>
        </div>

        <div class="cont_box">
            <div class="box_title">
                <div class="btn_wrap fr">
                    <a id="btnFileUpload" href="#" rel="bgm_upload_modal" class="btn line modalLoad" data-role="openModal">파일 업로드</a>
                </div>
            </div>

            <div class="tbl">
                <div id="resultTable_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
                    <table id="resultTable" class="click dataTable">
                        <colgroup>
                            <col width="5%">
                            <col width="auto">
                            <col width="20%">
                            <col width="20%">
                            <col width="10%">
                        </colgroup>
                        <thead>
                        <tr role="row">
                            <th class="center sorting_disabled" rowspan="1" colspan="1">No.</th>
                            <th class="center sorting_disabled" rowspan="1" colspan="1">파일명</th>
                            <th class="center sorting_disabled" rowspan="1" colspan="1">등록자</th>
                            <th class="center sorting_disabled" rowspan="1" colspan="1">등록일</th>
                            <th class="center sorting_disabled" rowspan="1" colspan="1">재생</th>
                        </tr>
                        </thead>
                        <tbody></tbody> <%-- 여기에 조회 결과 출력 --%>
                    </table>
                    <div class="dataTables_info" id="resultTable_info" role="status" aria-live="polite"></div>
                    <div class="bottom"></div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>

        <div>
            <!--  modal :: bgm 파일 업로드 -->
            <div class="modal" id="bgm_upload_modal" tabindex="-1">
                <div class="modal-dialog modal-lg">
                    <div class="modal_header">
                        <h3>파일 업로드 안내</h3>
                    </div>
                    <div class="modal_body">
                        <div class="modal_cont">
                            <!-- 제한사항 안내. 언제든 바뀔 수 있습니다 -->
                            <div class="my-5">
                                <ul class="dot-list">
                                    <li>업로드는 wav 파일만 가능합니다.</li>
                                    <li>파일명은 최대 70자까지 허용하고, 한글이 포함될 경우 등록할 수 없습니다.</li>
                                    <li>파일은 한 번에 여러 개를 등록할 수 있습니다. 파일당 10MB까지 업로드할 수 있습니다.</li>
                                </ul>
                            </div>

                            <div>
                                <h4>
                                    <em class="important fl my-2">음원 파일 업로드</em>
                                </h4>
                                <!--jsj-->

                                <div class="filebox" style="float: right;">
                                    <label for="file_to_upload">파일 선택</label>
                                    <input name="upFile" type="file" id="file_to_upload" class="file_upload" accept=".wav" onchange="selectFile(this.files)" multiple>
                                </div>
                            </div>
                            <div class="tbl">
                                <form name="uploadForm" id="uploadForm" enctype="multipart/form-data" method="post">
                                    <table class="">
                                        <tbody id="fileTableTbody">
                                        <tr>
                                            <th>파일명</th>
                                        <tr style="height: 100px;">
                                            <td id="dropZone">파일을 드래그 하세요</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </form>
                            </div>
                            <div>

                            </div>
                        </div>
                        <!--<button type="button" class="btn ml-1" data-role="deleteFile">삭제</button>-->
                    </div>
                    <div class="modal_footer">
                        <div class="btn_wrap fr">
                            <a href="#" onclick="" class="btn grey close">취소</a>
                            <%--<a href="#" id="file_save_btn" class="btn" data-role="uploadFile">저장</a>--%>
                            <a href="#" id="uploadBtn" class="btn fr">저장</a>
                            <!--<a href="#" id="file_save_btn" class="btn" data-role="uploadFile">저장</a>-->
                        </div>
                    </div>
                    <div class="modal_controller">
                        <a href="#" class="close">close</a>
                    </div>
                </div>
            </div>
        </div> <!-- cont_box 끝 -->
    </div>
</section>
<!-- 컨텐트 끝 -->



<div class="clone-box hide">
    <div class="loading">
        <div class="loader default default-01">
            <div class='loader-container'>
                <div class='ball'></div>
                <div class='ball'></div>
                <div class='ball'></div>
                <div class='ball'></div>
                <div class='ball'></div>
                <div class='ball'></div>
                <div class='ball'></div>
                <div class='ball'></div>
                <div class='ball'></div>
                <div class='ball'></div>
            </div>
        </div>
    </div>
</div>
<div class="audio-box hide">
    <audio src=""></audio>
</div>


<script type="text/javascript">
    $(document).ready(function() {
        search();

        if (!checkPermissionPolicy("rcpoprmanagebgmmanageFull")) {
            $("#btnFileUpload").hide();
        }

        $("a[data-role=openModal]").click(function() {
            $("input:file").val('');
            $("input.upload_name").val('');

            if(fileList.length > 0){
                for(var i=0; i<fileList.length; i++){
                    deleteFile(i);
                }
            }
        });
/*
        var opts = {
            columns: [
                { data: "rowNum" },
                { data: "fileName" },
                { data: "registId" },
                { data: "registDate" },
                { data: "filePath" },
            ],
            columnDefs: [
                {
                    "defaultContent": "-",
                    "targets": "_all",
                    "className": "center"
                },
                {
                    targets: 0,
                    render: function() {
                        return 0;
                    }
                },
                {
                    targets: 4,
                    render: function(data) {
                        return '<div class="time-side-btn">'
                                +    '<a data-file-path="' + data.filePath + data.fileName + '" class="minIco listeningIco" title="녹취 듣기">녹취 듣기</a>'
                                +   '</div>';
                    }
                }
            ]
        }
*/
    });

    $(()=>{
        $('#uploadBtn').on("click",function(){
            //var form = $('#file_to_upload')[0].files;

            var formData = new FormData();
            //formData.append('files', form);

            if(totalFileSize > 0){
                fileList.forEach(function(f){
                    formData.append("fileList", f);
                });

                $.ajax({
                    type: "POST",
                    enctype: 'multipart/form-data',
                    url: "/admin/rcp/oprmanage/bgm/upload.do",
                    data: formData,
                    processData: false,
                    contentType: false,
                    timeout: 600000,
                    success: function (data) {
                        // console.log(data);
                        //addBgm(data);
                        //alert("성공");
                        $(".btn.close").click();
                        $.utils.success("성공");
                        search();

                    },
                    error: function (e) {
                        $.utils.warning("파일 업로드 실패");
                    }
                });

                $('#resultTable tbody tr').remove();
            }else{
                $.utils.warning("파일이 없습니다.");
            }

        });
    })

    function search() {
        $("#resultTable").DataTable().destroy();
        var searchKeyword = $("#search_filename").val();
        /*
        $.ajax({
            type: "GET",
            url: '<c:url value="/admin/rcp/oprmanage/bgm/list.do"/>',
            datatype: 'text',
            data: {
                searchKeyword : searchKeyword
            },
            success: function(data) {
                $("#resultTable").renderTable(data.list);
            },
            error: function(error) {
                $.utils.error("ERROR!");
            }
        });
        */
        //var param = {

        // }

        $.ajax({
            type: "GET",
            //async: false,
            data: {
                searchKeyword : searchKeyword
            },
            contentType : "application/x-www-form-urlencoded; charset=utf-8",
            url: "/admin/rcp/oprmanage/bgm/list.do",
            success: function(data) {

                //$("#resultTable").DataTable().destroy();
                var html;
                // console.log("length" + data);

                if (data.results.length > 0) {
                    for (var i = 0; i < data.results.length; i++) {
                        const TIME_ZONE = 9 * 60 * 60 * 1000;
                        const d = new Date(data.results[i].registDate);

                        const date = new Date(d.getTime() + TIME_ZONE).toISOString().split('T')[0];
                        const time = d.toTimeString().split(' ')[0];

                        html += '<tr role="row" rel="odd tmp">'
                            +       '<td>' + (i+1) + '</td>'
                            //+       '<td>' + data[i].seq + '</td>'
                            +       '<td>' + data.results[i].fileName + '</td>'
                            +       '<td>' + data.results[i].registId + '</td>'
                            +       '<td>' + date + ' ' +time + '</td>'
                            //+       '<td>' + data.results[i].registDate + '</td>'
                            +       '<td>'
                            +           '<div class="time-side-btn">'
                            +               '<a data-file-path="' + data.results[i].filePath + data.results[i].fileName + '" class="minIco listeningIco" title="녹취 듣기">녹취 듣기</a>'
                            //+                '<button type="button" data-role="playRecFile" data-file-path="' + data.results[i].filePath + data.results[i].fileName + '" class="play-btn" title="녹취 듣기"></button>'
                            +           '</div>'
                            +       '</td>'
                            +     '</tr>'
                    }
                    $("#resultTable tbody").append(html);
                    $("#resultTable_info").html('Showing 1 to ' + i +' of '+ i + ' entries');
                }
                /*
                $.each(data, function(index, item) {
                    $("#resultTable").append("<tr><td><input type='checkbox' name='' checked></td><td>" + item +"</td></tr>");
                });

                 */
            },
            error: function(error) {
                $.utils.error("ERROR!");
                //alert("Error!");
                // console.log(error);
            }
        });
    }

    //조회 버튼 클릭 - 이전 행들을 remove 후 전부 다시 불러옴.

    $('#searchBtn').on('click', function() {
        $('#resultTable tbody tr').remove();
        search();
    });

    // 등록 파일 삭제
    $("[data-role=deleteFile]").click(function() {
        $("input:file").val('');
        $("input.upload_name").val('');
    });

    // 파일 업로드
    $("[data-role=uploadFile]").click(function() {
        if($.utils.isBlank($("input:file").val())) {
            $.utils.warning("파일을 선택해주세요.");
            return false;
        }

        //var formData = new FormData($("form[name=uploadForm]")[0]);

        $.ajax({
            url: "<c:url value='/admin/rcp/oprmanage/bgm/upload.do'/>",
            data: formData,
            processData: false,
            contentType: false,
            enctype : 'multipart/form-data',
            type: 'POST',

            success: function (data) {
                // console.log(formData);
                // console.log(data);
                addBgm(data);
                //alert("성공");
                $.utils.success("성공");
                $(".btn.close").click();
            },
            error: function (e) {
                //alert("실패");
                $.utils.warning("실패");
            }
        });
    });


    // 파일 리스트 번호
    var fileIndex = 0;
    // 등록할 전체 파일 사이즈
    var totalFileSize = 0;
    // 파일 리스트
    var fileList = new Array();
    // 파일 사이즈 리스트
    var fileSizeList = new Array();
    // 등록 가능한 파일 사이즈 MB
    var uploadSize = 10;
    // 등록 가능한 총 파일 사이즈 MB
    var maxUploadSize = 500;

    fileDropDown();

    // Drag 파일 드롭 다운
    function fileDropDown(){
        const dropZone = $("#dropZone");
        //Drag기능
        dropZone.on('dragenter',function(e){
            e.stopPropagation();
            e.preventDefault();
            dropZone.css('background-color','#E3F2FC');
        });
        dropZone.on('dragleave',function(e){
            e.stopPropagation();
            e.preventDefault();
            dropZone.css('background-color','#FFFFFF');
        });
        dropZone.on('dragover',function(e){
            e.stopPropagation();
            e.preventDefault();
            dropZone.css('background-color','#E3F2FC');
        });
        dropZone.on('drop',function(e){
            e.preventDefault();
            dropZone.css('background-color','#FFFFFF');

            let files = e.originalEvent.dataTransfer.files;
            if(files != null && files != undefined){
                if(files.length < 1){
                    alert("폴더 업로드 불가");
                    return;
                }
                selectFile(files);
            }else{
                alert("ERROR");
            }
        });
    }

    // Drag 파일 선택시
    function selectFile(fileObject){
        let files = null;

        if(fileObject != null){
            // 파일 Drag 이용하여 등록시
            files = fileObject;
        }else{
            // 직접 파일 등록시
            files = $('#multipartFileList_' + fileIndex)[0].files;
        }

        //$("#dropZone").text("")


        // 다중파일 등록
        if(files != null){
            for(var i = 0; i < files.length; i++){
                // 파일 이름
                let fileName = files[i].name;
                let fileNameArr = fileName.split("\.");
                // 확장자
                let ext = fileNameArr[fileNameArr.length - 1];
                // 파일 사이즈(단위 :MB)
                let fileSize = files[i].size / 1024 / 1024;

                check = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;
                if(check.test(fileName)){
                    $.utils.warning("한글 파일명을 지원하지 않습니다.");
                    break;
                }else if(ext != "wav"){
                    // 확장자 체크
                    $.utils.warning("등록 불가 확장자");
                    break;
                }else if(fileName.length + 1 > 70){
                    $.utils.error('파일명이 너무 깁니다. 70자 이내로 수정해주세요.');
                    break;
                }else if(fileSize > uploadSize){
                    // 파일 사이즈 체크
                    $.utils.warning("용량 초과\n업로드 가능 용량 : " + uploadSize + " MB");
                    break;
                }else{
                    $("#dropZone").parent().css("display","none");
                    // 전체 파일 사이즈
                    totalFileSize += fileSize;

                    // 파일 배열에 넣기
                    fileList[fileIndex] = files[i];

                    // 파일 사이즈 배열에 넣기
                    fileSizeList[fileIndex] = fileSize;

                    // 업로드 파일 목록 생성
                    addFileList(fileIndex, fileName, fileSize);

                    // 파일 번호 증가
                    fileIndex++;
                }
            }

        }else{
            $.utils.error("ERROR");
        }
    }

    // Drag 업로드 파일 목록 생성
    function addFileList(fIndex, fileName, fileSize){

        var html = "";
        html += "<tr id='fileTr_" + fIndex + "'>";
        html += "   <td style='text-align:left;'>" + fileName + "&nbsp; <a href='#' onclick='deleteFile(" + fIndex + "); return false;' class='btn small ml_3 bg_02 '>삭제</a></td>";
        html += "</tr>"

        $('#fileTableTbody').append(html);
    }

    // Drag 업로드 파일 삭제
    function deleteFile(fIndex){
        // 전체 파일 사이즈 수정
        totalFileSize -= fileSizeList[fIndex];

        // 파일 배열에서 삭제
        delete fileList[fIndex];

        // 파일 사이즈 배열 삭제
        delete fileSizeList[fIndex];

        // 업로드 파일 테이블 목록에서 삭제
        $("#fileTr_" + fIndex).remove();
        //jsjsj
        if(totalFileSize == 0 || isNaN(totalFileSize)){
            $("#dropZone").parent().css("display","");
        }
    }

    function addBgm(obj) {

        var param = {
            filePath: obj.filePath,
            fileName: obj.fileName,
            registDate: obj.registDate,
            custCode: obj.custCode,
            registId: obj.registId
        }

        $.ajax({
            type: "POST",
            async: false,
            datatype: "JSON",
            contentType : "application/json; charset=utf-8",
            url: "/admin/rcp/oprmanage/bgm/insert.do",
            data: JSON.stringify(param),
            success: (function(data) {
                // console.log(data);
                if (data == 1) {
                    alert('저장되었습니다.');
                }

            })
        });
    }

    /*
    $(document).on("click", ".listeningIco", function() {
        $.ajax({
            type: "POST",
            async: false,
            datatype: "JSON",
            contentType : "application/json; charset=utf-8",
            url: "/admin/rcp/oprmanage/bgm/play.do",
            data: {fileName: $(this).data("file-path")},
            success: (function(data) {
                var audio = $(".audio-box audio")[0];
                audio.pause();
                audio.src = data;
                audio.play();
            })
        });
    });
     */

    $(document).on("click", ".stopBtnIco", function() {
        var audio = $(".audio-box audio")[0];
        audio.pause();

        $(this).removeClass('stopBtnIco');
        $(this).addClass('listeningIco');
    });

    $(document).on("click", ".listeningIco", function() {
        var varThis = this;
        var audio = $(".audio-box audio")[0];

        $('a.stopBtnIco').each(function(index,item){
            $(this).removeClass('stopBtnIco');
            $(this).addClass('listeningIco');
        });

        $(this).removeClass('listeningIco');
        $(this).addClass('stopBtnIco');

        $.ajax({
            type: "POST",
            async: false,
            datatype: "JSON",
            contentType : "application/json; charset=utf-8",
            url: "/admin/rcp/oprmanage/bgm/play.do",
            data: {fileName: $(this).data("file-path")},
            success: (function(data) {
                if (audio.src == data) {
                    audio.play();
                }
                else {
                    audio.pause();
                    audio.src = data;
                    audio.play();
                }
            })
        });

        audio.onended = function() {
            $(varThis).removeClass('stopBtnIco');
            $(varThis).addClass('listeningIco');
        };
    });

</script>
</body>
</html>