@extends('common.layout')
@section('commostyle')
<link rel="stylesheet" type="text/css" href="{{asset('css/ct.css') }}" />
<script type="text/javascript" src="{{asset('cmm/utils.js') }}"></script>
@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="beforeLetterCtn">0</span> / 20,000 자
          </p>
        </div>

        <!-- 교정 전 textArea 영역-->
        <!-- textArea에 caution생기면 height값 변경됨-->
        <!-- textArea에 focus시 focus걸리고 색변경 -->
        <!-- textEmphasize before : 개인식별정보(빨강) -->
        <div class="textArea" id="beforeTextWrap">
          <div class="scroll">
            <div id="beforeText" class="beforeText placehorder txt14_400_L" contenteditable="true">
              내용 입력 후 아래 [교정하기]를 눌러주세요.
            </div>
          </div>
        </div>
         <!--개인식별정보 입력시 유호성체크 문구-->
         <!-- <p class="cautionText txt12_400">개인식별정보를 제외하고 입력해주세요</p> -->

        <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" onmouseleave="tooTipHover(event, 'leave')">
                <div class="tipTit" onmouseenter="tooTipHover(event, 'enter')">
                  <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="afterLetterCtn">0</span> / 20,000 자
          </p>
        </div>

        <!-- 교정 후 textArea 영역-->
        <div class="textArea" id="afterTextWrap">
            <div class="scroll">
                <div id="afterText" class="afterText disabled txt14_400_L" tabindex="-1">
                    교정 후 내용이 출력됩니다.
                </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>
  <!---- E : 교정 섹션 ---->

  <!---- S :가이드, 피드 섹션 ---->
  <section id="sec02" class="sec02 wtfrm1">
    <div class="selectArea">
      <p class="txt15_600">콘텐츠 유형</p>
      <!--셀렉박스 영역-->
      <div class="selectBox">
        <select name="contentType" id="contentType" class="txt14_400">
          <option value="일반" class="txt14_400">일반</option>
            <option value="버튼" class="txt14_400">버튼</option>
            <option value="팝업" class="txt14_400">팝업</option>
            <option value="입력필드" class="txt14_400">입력필드</option>
            <option value="헤드메시지" class="txt14_400">헤드메시지</option>
            <option value="완료메시지" class="txt14_400">완료메시지</option>
            <option value="오류메시지" class="txt14_400">오류메시지</option>
            <option value="유의사항" class="txt14_400">유의사항</option>
            <option value="자주하는 질문" class="txt14_400">자주하는 질문</option>
        </select>
      </div>
    </div>
    <!-- 콘텐츠 작성 가이드 영역 -->
    <div class="gaideWrap">
      <div class="gaideTitle">
        <p class="border txt15_600">콘텐츠 작성 가이드</p>
      </div>
      <!--리스트 영역 오버시 세로 스크롤-->
      <div class="gaideList"> 
        <div class="scroll">
          <div class="gaideItem">
            <!-- S : 가이드 내용 변경 영역 -->
            <p class="depth_one">버튼은 고객의 선택과 판단, 의사결정을 확인하고 프로세스 진행을 돕는 컴포넌트로 다음 기준을 따릅니다.</p>
            <p class="depth_two">1. 기본 버튼</p>
            <p class="depth_three">기본버튼(단독)</p>
            <p class="depth_four">4자 이내 명사형으로 간결하게 작성</p>
            <p class="depth_five">단, 버튼에 구체적 정보를 담을 경우 3어절 이내로 작성</p>
            <p class="depth_four">[확인], [취소], [완료], [로그인], [다음에] 버튼에 ‘~하기' 없이 작성</p>
            <p class="depth_three">기본 버튼 + 보조 버튼</p>
            <p class="depth_four">취사 선택 버튼은 ‘액션(실행)’으로 작성</p>

            <p class="depth_two">2. 예/아니요, 여부 버튼</p>
            <p class="depth_three">예/아니요 버튼</p>
            <p class="depth_four">취소, 해지, 중단 상황을 묻는 경우 사용</p>
            <p class="depth_four">‘예'와 ‘아니요'로 답하는 것이 더 직관적인 경우 사용</p>
            <p class="depth_five">보험료 결제를 취소하시겠어요?</p>
            <p class="depth_six">아니요 / 예 (O)  취소 / 확인 (X)</p>

            <p class="depth_three">여부 버튼</p>
            <p class="depth_four">여부를 묻는 질문에는 [액션 안함], [액션]으로 작성</p>
            <!-- E : 가이드 내용 변경 영역 -->
          </div>
        </div>
      </div>
    </div>

    <!-- 콘텐츠 유형 피드 영역 -->
    <div class="feedWrap">
      <!--피드배너 버튼 클릭시 피드검색팝업 노출-->
      <button id="moreBtn" class="fdPopOpenBtn" type="button">
        <p class="txt14_600">참고할 만한 <br>콘텐츠 찾아보기</p>
        <img src="{{asset('images/notePen.svg') }}" alt="노트와펜아이콘">
      </button>
    </div>
  </section>

  <div id="toastPop" class="toastPop" style="display: none;">
    <p class="txt14_600">내용 복사가 완료되었습니다.</p>
  </div>
  <!---- E :가이드, 피드 섹션---->
</div>
<!-- <script type="text/javascript" src="{{asset('js/ctClass.js') }}"></script> -->
<script>
  // 피드배너 버튼 클릭시 피드검색팝업 노출
  document.querySelector("#moreBtn").addEventListener("click", () => {
    tmsClass.tmsPopOrganize("","http://localhost:8000/ct/fdpop", true, "");
  });
  
  // 교정영역에 focus시 focus클래스 추가, 삭제
  document.getElementById("beforeText").addEventListener("focusin", function() {
    let textArea = this.closest(".textArea");
    if(textArea.classList.contains("placehorder")) {
      this.textContent = '';
      textArea.classList.remove("placehorder");
    }
    textArea.classList.add("focus");
  });
  document.getElementById("beforeText").addEventListener("focusout", () => {
    let textArea = document.getElementById("beforeText").closest('.textArea');
    console.log(document.getElementById("beforeText").textContent.length);
    if(document.getElementById("beforeText").textContent.length == 0) {
      textArea.classList.add("placehorder");
      document.getElementById("beforeText").textContent = '내용 입력 후 아래 [교정하기]를 눌러주세요.';
    }
    textArea.classList.remove('focus');
  });
  
 
</script>

@endsection