@extends('common.layout')
@section('commostyle')
<link rel="stylesheet" type="text/css" href="{{asset('css/ct.css') }}" />
@endsection('commostyle')
@section('content')

<div class="container">
  <!---- S : 교정 섹션 ---->
  <section id="sec01" class="sec01">
    <ul class="breadCrumb">
      <li>홈</li>
      <li>콘텐츠 교정</li>
    </ul>

    <!-- 제목 영역-->
    <div class="titleWrap">
      <div class="title">
        <h2 class="txt23_700">콘텐츠 교정</h2>
      </div>
    </div>

    <div class="editWrap">
      <div class="editBeforeWrap contWrap">
        <div class="topArea">
          <p class="txt14_600">교정 전 내용</p>
          <p class="letterCtn txt12_500">
            <span id="beforeTextCnt">0</span> / 20,000 자
          </p>
        </div>

        <div class="textArea" id="beforeTextWrap">
          <div class="scroll">
            <div id="beforeText" class="placeholder beforeText txt14_400_L" contenteditable="true"  >
                내용 입력 후 아래 [교정하기]를 눌러주세요.
            </div>
          </div>
        </div>

        <div class="bottomArea">
          <div class="checkBoxArea">
            <div class="formCheckBox">
              <input type="checkbox" id="adCheck" name="adCheck">
              <label for="adCheck" role="checkbox" class="txt12_400">상품광고 등 CR 검토가 필요한 내용이면 체크해 주세요.</label>
              <div class="tooltip" id="tooltip" >
                <div class="tipTit" id="tipTit">
                  <img src="{{asset('images/question_small_gray.svg') }}" alt="" />
                </div>
                <div class="tipTxt">
                  <p>CR 유의 문구를 함께 점검하여 안내해 드립니다.</p>
                </div>
              </div>
            </div>
          </div>

          <button type="button" id="editBtn" class="btn01 btnBlue ">
            <span>교정 하기</span>
          </button>
        </div>
      </div>

      <div class="editAfterWrap contWrap">
        <div class="topArea">
          <p class="txt14_600">교정 후 내용</p>
          <p class="letterCtn txt12_500">
            <span id="afterTextCnt">0</span> / 20,000 자
          </p>
        </div>

        <div class="textArea" id="afterTextWrap">
            <div class="scroll">
                <div id="afterText" class="afterText disabled txt14_400_L" tabindex="0" >
                    교정 후 내용이 출력됩니다.
                </div>
            </div>
        </div>

        <div class="bottomArea">
          <button type="button" id="copyBtn" class="btn01 btnDisabled">
            <span>내용복사</span>
            <img class="sIcon" src="{{asset('images/copy_small_gray.svg') }}" alt="복사 아이콘" />
          </button>
          <button type="button" id="feedShareBtn" class="btn01 btnDisabled">
            <span>피드에 공유</span>
            <img class="sIcon" src="{{asset('images/write_small_gray.svg') }}" alt="피드공유 아이콘" />
          </button>
        </div>
      </div>
    </div>
  </section>

  <section id="sec02" class="sec02 wtfrm1">
    <div class="selectArea">
        <p class="txt14_600">콘텐츠 유형별 작성 가이드</p>
        <div class="selectBox">
          <select name="contentType" id="contentType" class="txt14_400">
          </select>
        </div>
    </div>

    <div class="gaideWrap">

      <div class="gaideList">
        <div class="scroll">
          <div class="gaideItem">
          </div>
        </div>
      </div>
    </div>

  </section>

  <div id="toastPop" class="toastPop" style="display: none;">
    <p class="txt14_600">내용 복사가 완료되었습니다.</p>
  </div>
  <div id="feedtoastPop" class="toastPop" style="display: none;">
    <p class="txt14_600">피드가 공유되었습니다.</p>
  </div>
</div>
<script type="text/javascript" src="{{asset('js/ctClass2.js') }}"></script>
<script>
    clsUrlSearchParam.init(location.search);
  clsTmsClass.setSearchParam(clsUrlSearchParam);
  clsListClass.setSearchParamClass(clsUrlSearchParam);
  clsTmsClass.setTmsPop(clsPopClass);
    function popCloseFnc() {
        if (event.target.parentElement.previousElementSibling.firstElementChild.textContent == " 피드에 공유하기") {
            Rectify.sendFeed()
            var toastPopElement = document.getElementById('feedtoastPop');
            toastPopElement.style.display = 'block';
            setTimeout(function() {
                toastPopElement.style.opacity = 1;
            }, 100);
            setTimeout(function() {
                toastPopElement.style.opacity = 0;
            }, 1000);
            setTimeout(function() {
                toastPopElement.style.display = 'none';
            }, 1500);
        }
        clsTmsClass.popClose();
    }

    /*
    function setWordLogItem(){
       return ["bword"=>bword,"aword"=>aword];
    }

    function getWordLogData(){
       var arInParam = [];
       arInParam.push(setWordLogItem());
    }*/
</script>

@endsection