<div class="p-modal user" id="user_modal">
  <div class="p-modal__bg"></div>

  <form action="/api/upsertUser" method="POST" id="insertUserForm" class="p-modal__wrap common u-of--hdn">

    <div class="p-modal__header">
      <h2 class="p-modal__header__title">ユーザー管理 <span class="u-txt--8">- 登録（企業ユーザー）</span></h2>
      <div class="p-modal__close btn">
        <span></span>
        <span></span>
      </div>
    </div>

    <div class="p-modal__body mbody">
      <div class="mbody__items">
        <div class="mbody__items__inner">

          <dl class="extend">
            <dt class="mbody__item__title">企業名</dt>
            @if($isSystemAdmin)
            {{-- <dd>{{$userCompany}}</dd> --}}
            <input class="c-search" type="search" name="companySearch" id="companySearch">
            <input type="hidden" class="form-control" name="companyId" id="user_companyId" value = "{{$companyId}}">
              {{-- <dd><input class="c-txtbox" type="text" name="companyId" id="user_companyId" placeholder="企業ID"></dd> --}}
            @else
              <dd>{{$userCompany}}</dd>
              <input type="hidden" class="form-control" name="companyId" id="user_companyId" value = "{{$companyId}}">
            @endif
          </dl>

          <dl>
            <dt class="mbody__item__title">氏名</dt>
            <dd><input class="c-txtbox" type="text" name="name" id="user_name" placeholder="氏名"></dd>
            <dd id="user_name_err" name="name_err" class="text-danger"></dd>
          </dl>

          <dl>
            <dt class="mbody__item__title">部署</dt>
            <dd class="u-flex__btw variable nowrap">
              <input type="text" class="c-txtbox" name="department" id="user_department" placeholder="部署名" value="">
              <a href="#" class="c-btn--rev edit u-flex__sh0 fixed"><span class="u-only__pc">修正する</span></a>
            </dd>
            <dd id="user_department_err" name="department_err" class="text-danger"></dd>
          </dl>

          <dl>
            <dt class="mbody__item__title">E-mail</dt>
            <dd>
              <input type="text" name="mail" id="user_mail" class="c-txtbox fb55 sp-fb100" placeholder="メールアドレスを入力">
            </dd>
            <dd id="user_mail_err" name="mail_err" class="text-danger"></dd>
          </dl>

          <dl>
            <dt class="mbody__item__title">パスワード</dt>
            <dd class="u-flex__btw variable nowrap">
              <input type="password" class="c-txtbox" id="user_password" name="password" placeholder="パスワードを入力">
              <input type="checkbox" name="password01" id="user_password01" data-btn="pass">
              <label for="password01" class="c-btn--rev u-flex__sh0 fixed eye"><span class="u-only__pc">表示する</span></label>
            </dd>
            <dd id="user_password_err" name="password_err" class="text-danger"></dd>
          </dl>

          <dl>
            <dt class="mbody__item__title">電話番号</dt>
            <dd>
              <input type="text" class="c-txtbox" name="tel" id="user_tel" value="00-0000-0000">
            </dd>
            <dd id="user_tel_err" name="tel_err" class="text-danger"></dd>
          </dl>

          <dl class="extend">
            <dt class="mbody__item__title">権限</dt>
            <dd>
              <ul class="p-options__list">
                <li>
                  <input type="checkbox" name="managerType" id="user_managerType"/>
                  {{-- <input type="checkbox" name="managerType" id="user_managerType"> --}}
                  <label for="user_managerType" class="c-checkbox">企業責任者</label>
                </li>
              </ul>
            </dd>
          </dl>

          {{-- <dl class="extend">
            <dt class="mbody__item__title">最終ログイン</dt>
            <dd>2019/07/01 23:59:59</dd>
          </dl>

          <dl class="extend">
            <dt class="mbody__item__title">案件登録数</dt>
            <dd>0</dd>
          </dl>

          <dl class="extend">
            <dt class="mbody__item__title">リソース登録数</dt>
            <dd>0</dd>
          </dl> --}}

        </div>
      </div>
    </div>

    <div class="mbody__btm">
      <ul class="mbody__btm__menu menu--btm prompt">
        <li class="menu--btm__item border">
          <button class="p-modal__close c-btn c-btn--cancel">キャンセル</button>
        </li>
        <li class="menu--btm__item border">
          <input type="submit" class="c-btn" value="登録">
        </li>
      </ul>
    </div>
  </form>

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>

    function clearUser(){
        document.querySelector("#user_name").value = ""
        document.querySelector("#user_department").value = ""
        document.querySelector("#user_mail").value = ""
        document.querySelector("#user_password").value = ""
        document.querySelector("#user_tel").value = ""
        document.querySelector("#user_managerType").value = ""

        document.querySelector("#user_name_err").innerHTML = ""
        document.querySelector("#user_department_err").innerHTML = ""
        document.querySelector("#user_mail_err").innerHTML = ""
        document.querySelector("#user_password_err").innerHTML = ""
        document.querySelector("#user_tel_err").innerHTML = ""
    }

    (function(){

      document.querySelector("#insertUserForm").addEventListener("submit", function(e){
          e.preventDefault()

          axios.post(this.action, {
              'userId'      : "",
              'name'        : document.querySelector('#user_name').value,
              'companyId'   : document.querySelector("#user_companyId").value,
              'department'  : document.querySelector('#user_department').value,
              'mail'        : document.querySelector('#user_mail').value,
              'password'    : document.querySelector('#user_password').value,
              'tel'         : document.querySelector('#user_tel').value,
              'managerType' : (document.querySelector("#user_managerType").checked) ? document.querySelector('#checkTrue').value : document.querySelector('#checkFalse').value,
              'isDelete'    : false,
          })
          .then(function(response){
              console.log("Insert Success")
              console.log(response)
              console.log("NOTE: REMEMBER TO EDIT COMPANYID")

              rowHtml = getRowHtml(response.data.displayInfo)
              document.getElementById("tableBody").innerHTML = rowHtml + document.getElementById("tableBody").innerHTML;

              modal = document.getElementById('user_modal')
              modal.style.display = "none";

          })
          .catch(function(error){
              console.log(error)
              const errors = error.response.data.errors

              let errorMessages = document.querySelectorAll(".text-danger")
              errorMessages.forEach(function(element){
                  element.textContent = ""
              })

              // let first = true

              Object.keys(errors).forEach(function(errorElement){

                  errorItem    = errorElement
                  errorItemDOM = document.getElementById("user_" + errorItem)
                  errorItemErr = document.getElementById("user_" + errorItem + '_err')
                  errorItemErrMsg = errors[errorItem][0]

                  errorItemErr.innerHTML = errorItemErrMsg
                  // errorItemDOM.classList.add("border-danger")

                  console.log(errorItem)
                  console.log(errorItemErrMsg)

                  // if(first)
                  //     firstItemDOM = errorItemDOM

                  // first = false
              })

              // firstItemDOM.scrollIntoView({behavior: "smooth"})
          });
      });

    })();
  </script>

</div>