@extends('common.layout')

<link rel="stylesheet" type="text/css" href="{{asset('css/form.css') }}" />

@section('content')
<script type="text/javascript" src="{{asset('cmm/clsValidation.js') }}"></script>

<div class="container">
  <section id="sec01" class="sec01">
    <div class="contWrap">
      <div class="wrContWrap">
        <div class="titleWrap">
          <h2 class="title txt23_700">TXCloud 권장 표현</h2>
        </div>

        <form id="frm" class="smWrFormArea" onsubmit="return nSend()">
          <!-- 기본정보 -->
          <div class="formArea">
            <p class="txt18_600">기본정보</p>

            <!-- 상품 광고 표현 여부 -->
            <div class="inputBox adCheck">
              <div class="formCheckBox">
                <input type="checkbox" id="isad" name="isad" onchange="onChangeIsAd()">
                <label for="isad" role="checkbox">상품 광고 표현</label>
              </div>
            </div>

            <!-- 기존용어 -->
            <div class="inputBox">
              <label for="bword" class="inputBoxTitle txt14_600 required">기존 표현</label>
              <input id="bword" type="text" name="bword" placeholder="기존 표현을 입력해주세요" data-type="required|min:1">
            </div>

            <!-- 이렇게 쓰지 마세요 -->
            <div class="inputBox badInputBox">
              <div class="iconBox">
                <img class="crossIcon" src="{{asset('images/cross.svg') }}" alt="x아이콘">
                <p class="txt14_600">이렇게 쓰지 마세요</p>
              </div>
              <div class="inputList">
                <div class="inputItem">
                  <input id="exabad" type="text" name="exabad[]" placeholder="예문을 작성해주세요">
                  <button class="plusBtn recommendBtn exabad" type="button" onClick="btnPlusRecommend(this,true)"></button>
                </div>
              </div>
            </div>

            <!-- 권장표현 -->
            <div class="inputBox awordInputBox">
              <label for="aword" class="inputBoxTitle txt14_600 awordLabel required">권장 표현</label>
              <div class="inputList">
                <div class="inputItem">
                  <input id="aword" name="aword[]" type="text" placeholder="권장 표현을 입력해주세요" data-type="required|min:1">
                  <button class="plusBtn wordPlusBtn" type="button"></button>
                </div>
              </div>
            </div>

            <!-- 이렇게 쓰세요 -->
            <div class="inputBox goodInputBox">
              <div class="iconBox">
                <img class="checkIcon" src="{{asset('images/check.svg') }}" alt="체크 아이콘">
                <p class="txt14_600">이렇게 쓰세요</p>
              </div>
              <div class="inputList">
                <div class="inputItem">
                  <input id="exagood" type="text" name="exagood[]" placeholder="예문을 작성해주세요">
                  <button class="plusBtn recommendBtn exagood" type="button"  onClick="btnPlusRecommend(this,false)"></button>
                </div>
              </div>
            </div>

            <!-- 허용표현 -->
            <div class="inputBox">
              <label for="allowd" class="inputBoxTitle txt14_600">허용 표현</label>
              <input id="allowd" type="text" name="allowd" placeholder="허용 표현을 입력해주세요">
            </div>
          </div>

          <!-- 개선 이유 -->
          <div class="formArea">
            <p class="inputBoxTitle txt18_600 reasonTitle required">개선 이유</p>
            <div class="inputBox">
              <div class="selectBox reason">
                <select id="reason" name="reason" class="txt14_400">
                  <option value="" class="txt14_400" disabled selected>선택</option>
                </select>
              </div>
            </div>
          </div>

          <!-- 가이드 참고 -->
          <div class="formArea">
            <p class="txt18_600">가이드 참고</p>
            <div class="inputBox">
              <label class="txt14_600 formGuideLineLabel">가이드라인</label>
              <div class="gaideLineList">
                <div class="gaideLineItem">
                  <div class="selectBox">
                    <select id="oneDepth" class="oneDepth txt14_400" onchange="setSubMenu(this,1)">
                      <option value="" class="txt14_400">1차 메뉴 선택</option>
                    </select>
                  </div>
                  <div class="selectBox">
                    <select id="twoDepth" class="twoDepth txt14_400" onchange="setSubMenu(this,2)">
                      <option value="" class="txt14_400">2차 메뉴 선택</option>
                    </select>
                  </div>
                  <div class="selectBox">
                    <select id="threeDepth"  class="threeDepth txt14_400">
                      <option value="" class="txt14_400">3차 메뉴 선택</option>
                    </select>
                  </div>
                  <button class="plusBtn gdPlusBtn" onclick="setGdLine(this)"  type="button"></button>
                </div>
              </div>
            </div>
          </div>

          <!-- 사용여부 -->
          <div class="formArea">
            <p class="txt18_600">사용여부</p>
            <div class="selectBox useSelectBox">
              <select name="isuse" id="isuse">
                <option value="Y">사용</option>
                <option value="N">숨김</option>
              </select>
            </div>
          </div>
        </form>

        <div class="btnBox">
          <button type="button" class="btn01">취소</button>
          <button id="saveBtn" type="button" class="btn01 btnBlue" onclick="nSend()">저장</button>
        </div>
      </div>
    </div>
  </section>
  <script>
    clsValidtion.init("frm");
    clsUrlSearchParam.init(location.search);
    clsTmsClass.setSearchParam(clsUrlSearchParam);
    clsListClass.setSearchParamClass(clsUrlSearchParam);

    // 파라미터에서 wdNo가져오기
    var wdNo = clsTmsClass.getParams('no');
    var menuData; // 메뉴데이터
    var reasonData; // 개선 이유 데이터


    function setInitData(){
         // 개선이유 데이터
        clsTmsClass.setDataInformation("{{ asset('api/reason.json') }}", "GET", "" , function(data){
            reasonData = JSON.parse(data);
            //개선이유 초기 셋팅
            var keys = Object.keys(reasonData);
            for(var i=0;i<keys.length;i++){
              var reasonOption = document.createElement('option');
              reasonOption.value      = keys[i];
              reasonOption.innerText  = reasonData[reasonOption.value];
              document.querySelector("#reason").appendChild(reasonOption);
              }
       });


        // 가이드라인 데이터
        clsTmsClass.setDataInformation("{{ asset('api/gaide.json') }}", "GET", "" ,function(data){
            // 가이드 1차메뉴 뿌리기
            menuData = JSON.parse(data).onedepth;
            var keys = Object.keys(menuData);
            for(var i=0;i<keys.length;i++){
              var oneDepthOption = document.createElement('option');
              oneDepthOption.value = keys[i];
              oneDepthOption.innerText = menuData[keys[i]]["title"];
              document.querySelector(".gaideLineItem .oneDepth").appendChild(oneDepthOption);
            }
        });

        // 수정페이지일때 상세 데이터 불러오기
       if (wdNo){
          clsTmsClass.setDataInformation("/mda/api/db/vw", "GET", {"no":wdNo, "mode": "sf"} , function(data){
            setViewData(JSON.parse(data));
          });
      }

    }

    // 상세데이터 input에 넣기
    function setViewData(data) {
      // 상품광고 표현 여부
      document.getElementById("isad").checked = data.data.isad == "Y" ? true : false;
      if(data.data.isad == "Y") {// 상품 광고 표현 일때 => 권장용어가 선택값
       // document.querySelector(".awordLabel").classList.remove('required');
       document.querySelector(".awordLabel").className.replace('required','');
        document.querySelector("#aword").removeAttribute('data-type');
      }
      else {// 권장용어가 팔수값
        //document.querySelector(".awordLabel").classList.add('required');
        document.querySelector(".awordLabel").className += ' required';
        document.querySelector("#aword").dataset.type = 'required|min:1';
      }

      // 기존 표현
      document.getElementById("bword").value = data.data.bword;

      // 활용 예시 (bad)
      var badInputBox = document.querySelector('.badInputBox .inputList');
      var txtWord     =  '';
      for(var i=0;i<data.data.exabad.length;i++){
          txtWord = data.data.exabad[i];
          if ( i==0){
            badInputBox.querySelector('#exabad').value = txtWord;
          } else {
            if ( txtWord[0] == ',')txtWord = txtWord.substr(1);
            var divElement = document.createElement("div");
            //divElement.classList.add("inputItem");
            divElement.className +=" inputItem";
            divElement.innerHTML = '<input type="text" name="exabad[]" placeholder="예문을 작성해주세요" value="'+txtWord+'"><button class="minusBtn" type="button" onClick="minusInput(this)"></button>';
            badInputBox.appendChild(divElement);
          }
      }
      // 권장 표현
      var awordInputBox = document.querySelector('.awordInputBox .inputList');
      for(var j=0;j<data.data.aword.length;j++){
          txtWord = data.data.aword[j];
          if(j == 0) {
            awordInputBox.querySelector('#aword').value = txtWord;
          }
          else {
            var divElement = document.createElement("div");
            if ( txtWord[0] == ',')txtWord = txtWord.substr(1);
            //divElement.classList.add("inputItem");
            divElement.className +=" inputItem";
            var inHtmls = '<input type="text" name="aword[]" placeholder="권장표현을 입력해주세요" value="'+txtWord+'">';
            inHtmls+='<button class="minusBtn" type="button" onClick="minusInput(this)"></button>';
            divElement.innerHTML = inHtmls;
            awordInputBox.appendChild(divElement);
          }
      }

      // 활용 예시 (good)
      var goodInputBox = document.querySelector('.goodInputBox .inputList');
      for(var k=0;k<data.data.exagood.length;k++){
        txtWord = data.data.exagood[k];
        if(k == 0) {
          goodInputBox.querySelector('#exagood').value = txtWord;
        }
        else {
          if ( txtWord[0] == ',')txtWord = txtWord.substr(1);
          var divElement = document.createElement("div");
          //divElement.classList.add("inputItem");
          divElement.className += " inputItem";
          divElement.innerHTML = '<input type="text" name="exagood[]" placeholder="예문을 작성해주세요" value="'+txtWord+'"><button class="minusBtn" type="button" onClick="minusInput(this)"></button>';
          goodInputBox.appendChild(divElement);
        }
      }

      // 허용 표현
      document.getElementById("allowd").value = data.data.allowd;

      //개선 이유
      document.getElementById("reason").value = data.data.reason;

      // 가이드참고
      var gaideLineList = document.querySelector('.gaideLineList');
      for(var g=0;g<data.data.guide.length;g++){
        if(g == 0) {
          document.querySelector("#oneDepth").value = data.data.guide[g].guide01;
          setViewSubMenu(document.querySelector("#twoDepth"), data.data.guide[g].guide01, data.data.guide[g].guide02, data.data.guide[g].guide03);
        }
        else {
          var gdItem = document.createElement('div');
          //gdItem.classList.add('gaideLineItem');
          gdItem.className += ' gaideLineItem';

          var tmpHtml = '<div class="selectBox">';
          tmpHtml +='   <select class="oneDepth txt14_400" onchange="setSubMenu(this,1)">';
          tmpHtml +='         <option value="" class="txt14_400">1차 메뉴 선택</option>';
          tmpHtml +='   </select>';
          tmpHtml +='   </div>';
          tmpHtml +='   <div class="selectBox">';
          tmpHtml +='   <select class="twoDepth txt14_400" onchange="setSubMenu(this,2)">';
          tmpHtml +='   <option value="" class="txt14_400">2차 메뉴 선택</option>';
          tmpHtml +='   </select>';
          tmpHtml +='   </div>';
          tmpHtml +='   <div class="selectBox">';
          tmpHtml +='   <select class="threeDepth txt14_400">';
          tmpHtml +='   <option value="" class="txt14_400">3차 메뉴 선택</option>';
          tmpHtml +='   </select>';
          tmpHtml +='   </div>';
          tmpHtml +='   <button class="minusBtn gdminusBtn" type="button"  onClick="minusInput(this)"></button>';
          gdItem.innerHTML = tmpHtml;
          var keys = Object.keys(menuData);
          for(var h=0;h<keys.length;h++){
            var oneDepthOption = document.createElement('option');
            oneDepthOption.value = keys[h];
            oneDepthOption.innerText = menuData[oneDepthOption.value].title;
            gdItem.querySelector('.oneDepth').appendChild(oneDepthOption);
          }

          gaideLineList.appendChild(gdItem);
          gdItem.querySelector(".oneDepth").value = data.data.guide[g].guide01;
          setViewSubMenu(gdItem.querySelector(".twoDepth"), data.data.guide[g].guide01, data.data.guide[g].guide02, data.data.guide[g].guide03);
        }
      }

      // 2차,3차메뉴에 상세데이터 넣기
      function setViewSubMenu(select, oneDepthValue, twoDepthValue, threeDepthValue) {
        // 2차 메뉴셋팅
        var oneDepthVal = oneDepthValue;
        var twoDepthVal = twoDepthValue;
        var threeDepthVal = threeDepthValue;

        select.innerHTML = "<option value=''>2차 메뉴 선택</option>";
        select.parentNode.parentNode.querySelector('.threeDepth').innerHTML = "<option value=''>3차 메뉴 선택</option>";
        select.parentNode.parentNode.querySelector('.threeDepth').disabled = false;

        if(oneDepthVal !== "") {
          var keys      = Object.keys(menuData[oneDepthValue].twodepth);
          for(var i=0;i<keys.length;i++){
            var twoDepthOption = document.createElement('option');
            twoDepthOption.value = keys[i];
            twoDepthOption.innerText = menuData[oneDepthValue].twodepth[twoDepthOption.value].title;
            select.appendChild(twoDepthOption);
          }
          select.value = twoDepthValue;
        }

        // 3차 메뉴변경
        select.parentNode.parentNode.querySelector('.threeDepth').innerHTML= "<option value=''>3차 메뉴 선택</option>";
        select.parentNode.parentNode.querySelector('.threeDepth').disabled = false;

        if(twoDepthVal !== "") {
          if(typeof menuData[oneDepthVal].twodepth[twoDepthVal] == "object" && menuData[oneDepthVal].twodepth[twoDepthVal].threedepth !== "") {

            var objItem   = menuData[oneDepthVal].twodepth[twoDepthVal].threedepth;
            var oKeys     = Object.keys(objItem);
            for(var j=0;j<oKeys.length;j++){
              var threeDepthOption = document.createElement('option');
              threeDepthOption.value = oKeys[j];
              threeDepthOption.innerText = objItem[threeDepthOption.value].title;
              select.parentNode.parentNode.querySelector('.threeDepth').appendChild(threeDepthOption);
            }
            select.parentNode.parentNode.querySelector('.threeDepth').value = threeDepthValue;
          }
          else {
            select.parentNode.parentNode.querySelector('.threeDepth').disabled = true;
          }
        }
      }

      //사용여부
      document.getElementById("isuse").value = data.data.isuse;
    }


    // 2차,3차메뉴 변경
    function setSubMenu(oThis, type) {
      // 2차 메뉴변경
      if(type == 1){
        var oneDepthVal = oThis.value;
        oThis.parentNode.parentNode.querySelector('.twoDepth').innerHTML = "<option value=''>2차 메뉴 선택</option>";
        oThis.parentNode.parentNode.querySelector('.threeDepth').innerHTML = "<option value=''>3차 메뉴 선택</option>";
        oThis.parentNode.parentNode.querySelector('.threeDepth').disabled = false;

        if(oneDepthVal !== "") {
          //console.log(menuData[oneDepthVal]);
          var objItem     = menuData[oneDepthVal].twodepth;
          var keys        = Object.keys(objItem);
          for(var i=0;i< keys.length;i++){
            var twoDepthOption = document.createElement('option');
            twoDepthOption.value = keys[i];
            twoDepthOption.innerText = objItem[twoDepthOption.value].title;
            oThis.parentNode.parentNode.querySelector('.twoDepth').appendChild(twoDepthOption);
          }
        }
      }
      // 3차 메뉴변경
      else if(type == 2) {
        var oneDepthVal = oThis.parentNode.parentNode.querySelector('.oneDepth').value;
        var twoDepthVal = oThis.value;
        oThis.parentNode.parentNode.querySelector('.threeDepth').innerHTML= "<option value=''>3차 메뉴 선택</option>";
        oThis.parentNode.parentNode.querySelector('.threeDepth').disabled = false;
        if(twoDepthVal !== "") {
          if(menuData[oneDepthVal].twodepth[twoDepthVal].threedepth !== "") {
            var objItem       = menuData[oneDepthVal].twodepth[twoDepthVal].threedepth;
            var keys          = Object.keys(objItem);
            for(var i=0;i<keys.length;i++){
              var threeDepthOption = document.createElement('option');
              threeDepthOption.value = keys[i];
              threeDepthOption.innerText = objItem[threeDepthOption.value].title;
              oThis.parentNode.parentNode.querySelector('.threeDepth').appendChild(threeDepthOption);
            }
          }
          else {
            oThis.parentNode.parentNode.querySelector('.threeDepth').disabled = true;
          }
        }
      }
    }

    function setGdLine(obj) {
      var gdItem = document.createElement('div');
          gdItem.className += ' gaideLineItem';
      var inHtml ='<div class="selectBox">';
          inHtml +='<select class="oneDepth txt14_400" onchange="setSubMenu(this,1)">';
          inHtml +='<option value="" class="txt14_400">1차 메뉴 선택</option>';
          inHtml +='</select>';
          inHtml +='</div>';
          inHtml +='<div class="selectBox">';
          inHtml +='<select class="twoDepth txt14_400" onchange="setSubMenu(this,2)">';
          inHtml +='<option value="" class="txt14_400">2차 메뉴 선택</option>';
          inHtml +='</select>';
          inHtml +='</div>';
          inHtml +='<div class="selectBox">';
          inHtml +='<select class="threeDepth txt14_400">';
          inHtml +='<option value="" class="txt14_400">3차 메뉴 선택</option>';
          inHtml +='</select>';
          inHtml +='</div>';
          inHtml +='<button class="minusBtn gdminusBtn" type="button"  onClick="minusInput(this)"></button>';
          gdItem.innerHTML = inHtml;

      var keys      = Object.keys(menuData);
      for(var i=0;i<keys.length;i++){
        var oneDepthOption = document.createElement('option');
        oneDepthOption.value = keys[i];
        oneDepthOption.innerText = menuData[oneDepthOption.value].title;
        gdItem.querySelector('.oneDepth').appendChild(oneDepthOption);
      }
      obj.parentNode.parentNode.appendChild(gdItem);
    }


    function btnPlusRecommend(obj , isBad){
      var divElement = document.createElement("div");
      divElement.className += " inputItem";
      var isBads = isBad ? 'exabad[]' : 'exagood[]';
      divElement.innerHTML = '<input type="text" name="'+isBads+'" placeholder="예문을 작성해주세요"><button class="minusBtn" type="button" onClick="minusInput(this)"></button>';
      obj.parentNode.parentNode.appendChild(divElement);
    }

    for(var i=0;i < document.querySelectorAll(".wordPlusBtn").length;i++){
      var element = document.querySelectorAll(".wordPlusBtn")[i];
        if ( window.attachEvent){
        element.attachEvent("onclick" , function(e){
          var divElement = document.createElement("div");
          divElement.className +=" inputItem";
          divElement.innerHTML =  '<input name="aword[]" type="text" placeholder="권장 표현을 입력해주세요"><button class="minusBtn" type="button" onClick="minusInput(this)"></button>';
          e.target.parentNode.parentNode.appendChild(divElement);
        });
      } else {
        element.onclick = function(evt){
          evt = evt || window.event;
          var divElement = document.createElement("div");
          divElement.className += "inputItem";
          divElement.innerHTML =  '<input name="aword[]" type="text" placeholder="권장 표현을 입력해주세요"><button class="minusBtn" type="button" onClick="minusInput(this)"></button>';
          evt.target.parentNode.parentNode.appendChild(divElement);
        }
      }
    }

    // (-) 클릭
    function minusInput(_this){
       var parent = _this.parentNode;
       parent.parentNode.removeChild(parent);
    }

    // 상품광고 표현 체크박스 체크시 권장표현 필수값 아니게 바꾸기
    function onChangeIsAd(obj){
      if(obj.checked){
        document.querySelector(".awordLabel").className.replace("required","")
        document.querySelector("#aword").removeAttribute('data-type');
      }
      else {
        document.querySelector(".awordLabel").className += " required"
        document.querySelector("#aword").dataset.type = 'required|min:1';
      }
    }

    // 저장버튼 클릭
    function nSend(){
      var isFormVal = true;
      var frm = document.forms.frm;

      if ( document.querySelector("#bword").value == "" || document.querySelector("#bword").value.length>99){
         alert("정확한 기존 표현을 입력하세요.");
         document.querySelector("#bword").focus();
         return;
      }
      var isad = document.querySelector("input[name=isad]").checked;
      if ( !isad ){
          var txtAword = "";
          if ( document.querySelectorAll("input[name='aword[]']").length > 1){
            txtAword = frm.elements['aword[]'][0].value;
          } else {
            txtAword = frm.elements['aword[]'].value;
          }

          if ( txtAword == ''){
            alert("권장 표현을 입력하세요");
            return;
          }
      }
      var reasonEle = document.querySelector("#reason");
      if(isFormVal) {
        if(reasonEle.value !== "") {
          // 유효성체크 통과,개선사유 선택 후 데이터 딤기
          submitForm(wdNo);
        }
        else { // 개선이유가 빈값일때
          alert('개선 이유를 선택해주세요.');
          reasonEle.focus();
        }
      }
    }

    // from 값담기
    function submitForm(wdNo) {
      // Form 객체 가져오기
      var  form = document.getElementById('frm');
      // Form 데이터를 저장할 객체 생성
      var formData = {};
      // Form 내의 모든 입력 필드를 반복하여 값 저장 (가이드 제외)
      for (var i = 0; i < form.elements.length; i++) {
        var element = form.elements[i];
        // 입력 필드의 이름과 값을 객체에 저장
        if(element.name !== "") {
          if(element.name.indexOf('isad')>-1) {
            formData['isad'] = element.checked ? "Y" : "N";
          } else if(element.name.indexOf('[]')>-1) {
            var  newName = element.name.replace(/\[|\]/g, '');
            // console.log(newName);
            if (!formData[newName]) {
              formData[newName] = [];
            }
            formData[newName].push(element.value);
          } else {
            formData[element.name] = element.value;
          }
        }
      }

      // 가이드참고 추가
      var arrGaide = [];
      var  arrGaideList = document.querySelectorAll(".gaideLineItem");

      for(var i=0;i<arrGaideList.length;i++){
         if (arrGaideList[i].querySelector(".oneDepth").value !== "" ) { // 1depth 선택했을때
          if (arrGaideList[i].querySelector(".threeDepth").value !== "") { // 3depth값이 빈값이 아니면
            arrGaide.push(arrGaideList[i].querySelector(".threeDepth").value); // 3depth값 넣기
          } else {
            arrGaide.push(arrGaideList[i].querySelector(".twoDepth").value);// 2depth값 넣기
          }
        }
        // console.log(arrGaide);
        formData.guide = arrGaide;
      }

      // 수정페이지일때 wdNo값추가
      if (wdNo && wdNo){
        formData.no = wdNo;
      }
      // 저장된 데이터 출력
      //console.log(formData);
      //alert('등록이 완료되었습니다.');

      clsTmsClass.setDataInformation('/mda/api/db/rw', "POST" ,formData, function(data){
        var fetchData = JSON.parse(data);
        if(fetchData.code == 100 && fetchData.msg === "SUCCESS") {
          alert('등록이 완료되었습니다.');
          location.href="lt"; // 목록으로 이동
        } else {
          alert("등록 중 오류가 발생 했습니다. 잠시후 이용하세요");
          document.location.reload();
        }
      });
    }

    window.onload=function(){
      setInitData();
    }
  </script>
</div>
@endsection