@extends("board.qna.layout-board-qna")

@section("board-qna-content")
@php
    $dayOfWeek = config("edmclass.day_of_weeks");
    $content = $post->content;
    $messages = json_decode($content->content, 1);

    $time = '';
@endphp

<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" style="display: block;"><span>{{ date('Y-m-d', strtotime($post->created_at)) }} {{ $dayOfWeek[date('w', strtotime($post->created_at))] }}요일</span></div>
                    <div class="right talk select-category"><p id="category-text">{{ $post->type }}</p></div> <!-- 선택했던 문의 카테고리 -->
                    <div class="message" id="message">
                        @foreach ( $messages as $key => $message)
                            @php
                                $time =  ! isset($messages[$key + 1]) || date('H:i', $message['timer']) != date('H:i', $messages[$key + 1]['timer']) ? date('H:i', $message['timer']) : "";
                            @endphp
                            <div class="right talk">
                                <span class="time" style="display: block;">{{ $time }}</span>
                                @if ($message['type'] == 'text')
                                    <p>{{ $message['message'] }}</p>
                                @else
                                    @php
                                        $file = $post->attachments[$message['message']];
                                    @endphp
                                    <div class="pic"><figure style="background-image:url('{{ app(\S3Helper::class)->getPublicUrl($file->s3_key) }}');"></figure></div>
                                @endif
                            </div>
                        @endforeach

                        @if ( $post->getComments()->count() > 0 )
                            @php
                                $comment = $post->getComments()->first();
                            @endphp
                            @if ( date("Y-m-d", strtotime($post->created_at))  != date("Y-m-d", strtotime($comment->created_at))  )
                                <div class="now-date" style="display: block;"><span>{{ date('Y-m-d', strtotime($comment->created_at)) }} {{ $dayOfWeek[date('w', strtotime($comment->created_at))] }}요일</span></div>
                            @endif
                            <div class="left talk">
                                <span class="time">{{ date('H:i', strtotime($comment->created_at)) }}</span>
                                <p>{!! nl2br($comment->content) !!}</p>
                            </div>


                            @if ($comment->attachments->isNotEmpty())
                                @php
                                    $data = $comment->getAttachmentByType();;
                                    extract($data);
                                @endphp

                                @if ( count($images) > 0 )
                                    <div class="left talk">
                                        <div class="pic">
                                            <button type="button" class="open-managerPopup"></button>
                                            <div class="allNum"><span>{{ count($images) }}</span></div>
                                            @foreach ($images as $image)
                                            <img src="{{ $image['url'] }}" alt="" />
                                            @endforeach
                                        </div>
                                    </div>
                                @endif

                                @if ( count($files) > 0 )
                                    @foreach($files as $file)
                                    <div class="left talk">
                                        <div class="file-down">
                                            <div class="infoWrap">
                                                <div class="name"><p class="ellipsis_1">{{ $file['pathInfo']['filename'] }}</p><span>{{ $file['pathInfo']['extension'] }}</span></div>
                                                <div class="info">
                                                    @if($file['is_expire'])
                                                        <p><b>다운로드 유효기간 ~ </b>{{ $file['expire_at'] }}</p>
                                                    @else
                                                        <p>다운로드 기간이 만료되었습니다.</p>
                                                    @endif

                                                    <p><b>용량 </b>{{ $file['sizeText'] }}</p>
                                                </div>
                                            </div>
                                            @if($file['is_expire'])
                                            <a href="{{ $file['url'] }}" target="_blank" class="downBtn" style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/board/file_down_gray-24.svg');" download><span class="hidden">파일 다운로드</span></a>
                                            @endif
                                        </div>
                                    </div>
                                    @endforeach
                                @endif
                            @endif
                            <p class="after-text">답변이 종료되었습니다. <br>추가문의는 새로 등록해 주시기 바랍니다.</p>
                        @endif
                    </div>
                </div>
            </div>
            </div>
        </div>

        <!-- 메시지 작성 -->
        <div class="user-inputWrap">
            <div class="btnWrap">
                <div class="after">
                    <a href="javascript:onViewPage('list', 1)">확인</a>
                </div>
            </div>
        </div>
    </div>
</form>


<!-- 관리자 이미지, 파일 첨부 (이미지 팝업) -->
<div id="managerPopup">
    <div class="max-width">
        <div class="pageTitle">
            <div class="closeIcon closeBtn"></div>
            <p class="popupTit">상세이미지</p>
            <div class="pagination"></div>
        </div>
        <div class="slideWrap">
            <div class="scrollWidth">
                <div class="scrollWrap">
                    <div class="slide-navigation pc-nav">
                        <button type="button" class="nav nav-prev"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 5L8 12L15 19" stroke="#7D7B90" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
                        <button type="button" class="nav nav-next"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 5L16 12L9 19" stroke="#7D7B90" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
                    </div>
                    <div class="slide slide2">
                        <div class="swiper-wrapper"></div>
                    </div>
                    <div class="pc-pic-detail">
                        <div class="flex btnWrap">
                            <button type="button" style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/zoomOut.svg');" class="btn zoomOut"></button>
                            <button type="button" style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/zoomIn.svg');" class="btn zoomIn"></button>
                            <button type="button" style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/zoomReset.svg');" class="btn zoomReset"></button>
                        </div>
                    </div>
                    <div class="slide slide1" thumbsSlider="">
                        <div class="swiper-wrapper"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



@endsection

@section("qna-script")
<script>
    $(function() {
        /*
            관리자 이미지 첨부
        */
       $('.open-managerPopup').on('click',function(){
            $('#managerPopup').addClass('active');
            $('html,body').addClass('noScroll');

            /* 팝업 이미지 슬라이드 */
            $('.board-write .left.talk .pic img').each(function(index,item){
                let leftPic = $(item).attr('src');
                // $('#managerPopup .slide2 .swiper-wrapper').prepend("<div class='swiper-slide'><div class='zoomWrap zoomist-image' data-zoomist-src='"+leftPic+"'></div></div>");
                $('#managerPopup .slide2 .swiper-wrapper').prepend("<div class='swiper-slide'><div class='zoomWrap zoomist-image'><img src='"+leftPic+"' /></div></div>");
                $('#managerPopup .slide1 .swiper-wrapper').prepend("<div class='swiper-slide'><div class='zoomWrap zoomist-image'><img src='"+leftPic+"' /></div></div>");
            });
            $('#managerPopup .slide1 .swiper-slide').eq(0).addClass('swiper-slide-thumb-active');
                managerPopup1.enable();
                managerPopup2.enable();
                managerPopup1.slideTo(0);
                managerPopup2.slideTo(0);

            let nowZoom = 100; // 현재 비율

            // 화면크기 축소
            $('#managerPopup .zoomOut').on('click',function(){
                nowZoom = nowZoom - 10;
                zooms();
            });

            // 화면크기 확대
            $('#managerPopup .zoomIn').on('click',function(){
                nowZoom = nowZoom + 20;
                zooms();
            });

            // 원래 화면크기도 되돌아가기
            $('#managerPopup .zoomReset, #managerPopup .slide1 .swiper-slide').on('click',function(){
                nowZoom = 100;
                zooms();
            });

            function zooms() {
                document.querySelector('#managerPopup .slide2 .swiper-slide-active .zoomWrap img').style.transform = "scale(" + nowZoom + "%)";
                $( "#managerPopup .slide2 .swiper-slide-active .zoomWrap" ).draggable({revert: true});
            }
        });



        var managerPopup1 = new Swiper("#managerPopup .slide1", {
            loop: false,
            spaceBetween: 8,
            slidesPerView: 4.2,
            freeMode: true,
            watchSlidesProgress: true,
            breakpoints:{
                1200: {
                    slidesPerView: 7,
                    spaceBetween: 16,
                },
            },
        });
        var managerPopup2 = new Swiper("#managerPopup .slide2 ", {
            loop: false,
            spaceBetween: 16,
            simulateTouch: false,
            breakpoints:{
                1200: {
                    spaceBetween: 20,
                },
            },
            navigation: {
                nextEl: "#managerPopup .nav-next",
                prevEl: "#managerPopup .nav-prev",
            },
            pagination: {
                el: '#managerPopup .pagination',
                type: 'fraction',
            },
            thumbs: {
                swiper: managerPopup1,
            },
            on:{
                init: function(){
                    $('#managerPopup .slide2 .swiper-slide .zoomWrap img').css({
                        'transform':'scale(100%)'
                    });
                },
                realIndexChange: function(){
                    $('#managerPopup .slide2 .swiper-slide .zoomWrap img').css({
                        'transform':'scale(100%)'
                    });
                },
            },
        });

        $('#managerPopup .closeBtn').on('click',function(){
            $('#managerPopup').removeClass('active');
            $('html,body').removeClass('noScroll');
            $('#managerPopup .slide .swiper-wrapper .swiper-slide').remove();
            managerPopup1.disable();
            managerPopup2.disable();
        });

        /* 이미지 개수 표시 */
        let receivePic = $('.message .left.talk .pic').find('img').length;
        if(receivePic >= 2){
            $('.message .left.talk .pic .allNum span').text(receivePic);
        }else{
            $('.message .left.talk .pic .allNum').hide();
        }

    })
</script>
@endsection