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

    function clearLogin(){
      document.querySelector("#mail").value = ""
      document.querySelector("#password").value = ""
    }

    function clearError(){
      let errorMessages = document.querySelectorAll(".text-danger")
          errorMessages.forEach(function(element){
          element.textContent = ""
      })
      modalDOM = document.getElementById("tos_modal")
      modalDOM.style.display='none'
    }

    function tosButtonClicked(){
      event.preventDefault()
      document.getElementById("loginForm").submit();
    }

    function loginButtonClicked(){
      event.preventDefault()
      axios.post("/api/loginAPI", {
          'mail'     : document.querySelector('#mail').value,
          'password' : document.querySelector('#password').value,
          'rememberId' : document.querySelector('#rememberId').value,
      })
      .then(function(response){
          console.log("Success")
          console.log(response)
          clearError()

          document.getElementById("loginForm").submit();
          // location.reload();
          // modal = document.getElementById('admin_modal')
          // modal.style.display = "none";
      })
      .catch(function(error){
          console.log("An error occured")

          const errors = error.response.data.errors

          clearError()

          if (error.response.status == 422){

              Object.keys(errors).forEach(function(errorElement){
                  errorItem    = errorElement
                  errorItemDOM = document.getElementById(errorItem)
                  errorItemErr = document.getElementById(errorItem + '_err')
                  errorItemErrMsg = errors[errorItem][0]
                  errorItemErr.innerHTML = errorItemErrMsg
                  errorItemDOM.classList.add("border-danger")
                  // console.log(errorItem)
                  // console.log(errorItemErrMsg)
              })
          }
          else if(error.response.status == 991){
              errorItemDOM = document.getElementById("mail_err")
              errorItemDOM.innerHTML = "入力されたメールアドレスのユーザーが存在しません"
              errorItemDOM.classList.add("border-danger")
          }
          else if(error.response.status == 992){
              errorItemDOM = document.getElementById("password_err")
              errorItemDOM.innerHTML = "入力されたパスワードが間違っています"
              errorItemDOM.classList.add("border-danger")
          }
          else if(error.response.status == 993){
              modalDOM = document.getElementById("tos_modal")
              modalDOM.style.display='block'
          }
      });
    }

    // (function(){

    //   document.querySelector("#tos_modal_form").addEventListener("submit", function(e2){
    //       e2.preventDefault()
    //       axios.post("/login", {
    //           'mail'       : document.querySelector('#mail').value,
    //           'password'   : document.querySelector('#password').value,
    //           'rememberId' : document.querySelector('#rememberId').value,
    //       })
    //       .then(function(response){
    //           console.log("Success")
    //           console.log(response)
    //       })
    //       .catch(function(error){
    //           console.log("An error occured")

    //           const errors = error.response.data.errors

    //           clearError()

    //       });
    //   });
    // })();

  </script>
</html>