@extends("board.qna.layout-board-qna")
@section("board-qna-content")
<!-- 1:1문의 하기 (카테고리 선택) -->
<div class="board-list" id="write">

    <div class="inquiry-area valueWrap">
        <div class="selectValue">
            <p><b>문의 유형을 선택해 주세요.</b></p>
            <p>수업자료, 강의내용 등 학습에 대한 질문사항은 <br>내강의실 → 1:1게시판을 이용해 주시기 바랍니다.</p>
            <div class="value flex">
                @foreach( $types as $type )
                <a href="javascript:onSelectInquiry('{{ $type }}')">{{ $type }}</a>
                @endforeach
            </div>
            <div class="exit"><a href="javascript:onViewPage('intro', 0)" class="hover-primary2">상담 나가기 <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 13L13 8M13 8L8 3M13 8L3 8" stroke="#9B9BAA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></a></div>
        </div>
    </div>
</div>

<!-- 1:1문의 하기 (작성) -->
<form action="" id="qna-form" enctype="multipart/form-data">
    <div class="board-write">
        <div class="scrollWidth outer">
            <div class="scrollWrap outer">
                <p class="top-text"><b>문의 내용을 입력해 주세요.</b></p>
                <div class="infoBox">
                    <div class="title"><figure></figure>[고객센터 운영시간]&nbsp; <em>상담시간 : 10:00~16:00</em></div>
                    <p class="dotTxt">운영시간 내에 소중한 시간 내어 주신 회원님께 최선을 다해 답변드릴 수 있도록 하겠습니다. 답변은 고객지원 → 1:1 문의내역을 통해 확인하실 수 있습니다. </p>
                </div>
                <div class="scrollWidth inner">
                    <div class="scrollWrap inner">
                        <div class="now-date"><span></span></div>
                        <div class="right talk select-category"><p id="category-text"></p></div> <!-- 선택했던 문의 카테고리 -->
                        <div class="right backBtn" id="btnBack"><button type="button" class="hover-primary2" onclick="onSelectInquiry('')">뒤로가기 <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 13L13 8M13 8L8 3M13 8L3 8" stroke="#9B9BAA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button></div>
                        <div class="message" id="message"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 메시지 작성 -->
        <div class="user-inputWrap">
            <div class="inputWrap">
                <button type="button" class="send-text input-btn" onclick="onSendMessage()"><span class="el-hide">입력</span></button>
                <label class="send-file input-btn"><input type="file" class="el-hide" id="file" accept=".png, .jpg, .jpeg, .webp"><span class="el-hide">첨부 파일</span></label>
                <div class="message-boxWrap"><textarea name="" id="message-box" placeholder="내용을 입력해 주세요."></textarea></div>
            </div>
            <div class="btnWrap">
                <div class="before">
                    <div class="flex sb">
                        <button type="button" class="cancelBtn alertOn" onclick="onCancel()">취소하기</button>
                        <input type="button" value="1:1 문의 접수하기" class="submitBtn alertOn" onclick="onSubmit()"></input>
                    </div>
                </div>

                <div class="after">
                    <a href="">확인</a>
                </div>
            </div>
        </div>
    </div>
</form>



@endsection

@section("qna-script")
{!! resource('js/common/board/default.js') !!}
<script>
    setPageConfig({
        "service" : '{{ $service }}',
        "boardType" : '{{ $board["page"] }}',
    })
</script>
<script>
    let inquiryType = "";
    function onSelectInquiry(type) {
        inquiryType = type;
        if (type != '') {
            $('#wrap').addClass('write-select').removeClass('category-select history-select');
            $('#category-text').text(type);
        } else {
            $('#wrap').addClass('category-select').removeClass('write-select history-select');
        }
    }

    let now = new Date();
    const arrDayStr = ['일','월','화','수','목','금','토'];
    const messages = [];
    const files = [];

    function getNowTime() {
        now = new Date();
        return ('0' + now.getHours()).slice(-2) + ':' + ('0' + now.getMinutes()).slice(-2);

    }

    function onSendMessage() {
        if ($('#message-box').val().trim("\n").length > 0)  {
            onViewMessage($('#message-box').val().trim("\n"), 'text');
        }
    }

    function isSameDateTime(timestamp1, timestamp2) {
        // 두 타임스탬프를 Date 객체로 변환
        const date1 = new Date(timestamp1);
        const date2 = new Date(timestamp2);

        // 년, 월, 일, 시간, 분 비교
        return (
            date1.getHours() === date2.getHours() &&
            date1.getMinutes() === date2.getMinutes()
        );
    }


    function onViewMessage(message, type = "text", image = '') {
        $('#btnBack').hide();

        const nowTime = getNowTime();
        if ( messages.length == 0 ) {
            const nowDate = now.getFullYear() + '-' + ('0' + (now.getMonth() + 1)).slice(-2) + '-' + ('0' + now.getDate()).slice(-2) + ' ' + arrDayStr[now.getDay()] + '요일';
            $('.changeArea .board-write .now-date span').text(nowDate);
        } else {
            //마지막 입력한 채팅과 시간이 동일한 경우, 마지막 건 hide
            const messageIdx = messages.length - 1;
            const lastMessage = messages[messageIdx];
            if (  isSameDateTime(now.getTime(), lastMessage.timer * 1000) ) {
                $('#message .talk:last-of-type .time').hide()
            }
        }

        messages.push({'type' : type, 'message' : message, 'timer' : Math.floor(now.getTime() / 1000) });

        let content = '<div class="right talk"><span class="time">'+ nowTime +'</span>';
        if (type == 'text') {
            content += '<p>' + message + '</p>'
        } else {
            content += '<div class="pic"><figure style="background-image:url('+ image +');"></figure></div>'
        }
        content += "</div>";

        $('#message').append(content);
        $('.changeArea .board-write .scrollWrap').scrollTop($('.changeArea .board-write .scrollWrap')[0].scrollHeight);
        $('#message-box').val("")

        $('.changeArea .board-write').addClass('progress'); // 메시지 상태 변경

        $('.send-text').hide();
        $('.send-file').show();
    }

    function onCancel() {
        if ( messages.length > 0 || files.length > 0 ) {
            alertPopup("남기신 메시지가 저장되지 않고 초기화됩니다. <br>취소하시겠습니까?", {
                onConfirm : function() {
                    location.href = "{{ route('qna.index', $service) }}";
                }
            })
        } else {
            location.href = "{{ route('qna.write', $service) }}";
        }
    }

    async function onSubmit() {
        if (messages.length == 0) {
            alertPopup("문의내용을 입력하세요")
            return false;
        }

        const formData = new FormData(document.getElementById('qna-form'));
        formData.append('type', inquiryType);
        formData.append("content", JSON.stringify(messages));

        $.each(files, function(key) {
            formData.append("files[]", files[key]);
        })

        const result = await useFetch(getRoute("store"), {
            method: 'POST',
            body: formData,
        });


        if (result.status) {
            const message = "1:1 문의가 접수 되었습니다. <br>답변은 고객지원> 1:1문의> 문의내역에서 확인하실 수 있습니다.";
            alertPopup(message, {
                onConfirm: function() {
                    location.href = getRoute('write');
                }, onClose: function() {
                    location.href = getRoute('write');
                }
            })
        }
    }

    function getAccepts() {
        const accepts = $('#file').attr('accept').split(',').map(type => type.trim());
        return accepts;
    }


    function checkValidation(file) {
        const accepts = getAccepts();
        const isValid = accepts.some(type => {
            return file.type.includes(type.replace(".", "")) || file.name.endsWith(type);
        });

        if ( ! isValid) {
            $('#file').val("")
            return false;
        }

        return isValid;
    }


    $(function() {
        $('#file').on("change", function(e) {
            const file = $(this).get(0).files[0];
            if (checkValidation(file)) {
                const onEvent = function(image) {
                    onViewMessage(files.length, 'image', image);
                    files.push(file)
                }
                getPreviewImage(file, onEvent)
            } else {
                alertPopup("이미지만 업로드 가능합니다.")
            }

        })
        $("#message-box").on('keyup',function(key){
            if(key.keyCode==13 && ! $.isEmptyObject($(this).val().trim("\n"))) {
                onViewMessage($(this).val().trim("\n"), 'text');
            } else {
                if ( $.isEmptyObject($(this).val())) {
                    $('.send-text').hide();
                    $('.send-file').show();
                } else {
                    $('.send-text').show();
                    $('.send-file').hide();
                }
            }
        });


    });

</script>
@endsection