<template>
  <div>
  <notifications group="foo" />
    <!-- Navbar start -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container">
        <a class="navbar-brand" href="#">
          <img :src="`/images/logo.png`" width="40">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" 
          data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>  

        <div class="collapse navbar-collapse" id="navbarSupportedContent">  
          <ul class="navbar-nav mr-auto ml-4">
            <li class="nav-item">
              <a class="nav-link" href="#">Dashboard</a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="profile">Profile</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Assignments</a>
            </li>      
            <li class="nav-item">
              <a class="nav-link" href="#">Contracts</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Help</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="chat">Chat</a>
            </li>
          </ul>
          <div class="my-2 my-lg-0 userinfo">
            <div class="user-area dropdown">
              <a href="" class="mr-4 notify">  <i class="fa fa-bell"/> </a>
              <a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" 
                aria-haspopup="true" aria-expanded="false">
                <img :src="`/avatar/${user.avatar}`" width="30" height="30"  class="rounded mr-2">
                    {{ user.name }}
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Profile</a>
                <a class="dropdown-item" href="#">Setting</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#" @click.prevent="$auth.logout()">Logout</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>
    <!-- Navbar End -->
    <div class="profile">
      <div class="wrapper">
          <div class="banner">
              <h1>HiChat :)</h1>
              <span id="status"></span>
          </div>
          <div id="historyMsg">
          </div>
          <div class="controls" >
              <div class="items">
                  <input id="colorStyle" type="color" placeHolder='#000' title="font color" />
                  <input id="emoji" type="button" value="emoji" title="emoji" />
                  <label for="sendImage" class="imageLable">
                      <input type="button" value="image"  />
                      <input id="sendImage" type="file" value="image"/>
                  </label>
                  <input id="clearBtn" type="button" value="clear" title="clear screen" />
              </div>
              <textarea id="messageInput" placeHolder="enter to send"></textarea>
              <input id="sendBtn" type="button" value="SEND">
              <div id="emojiWrapper">
              </div>
          </div>
      </div>
      <div id="loginWrapper">
          <p id="info">connecting to server...</p>
          <div id="nickWrapper">
              <input type="text" placeHolder="nickname" id="nicknameInput" />
              <input type="button" value="OK" id="loginBtn" />
          </div>
      </div>
    </div>
    <!-- Footer start -->
    <footer class="footer">
      <div class="container">
        <div class="row">
          <div class="col-md-3">
            <img :src="`/images/logo.png`" width="80">
          </div>
          <div class="col-md-3">
            <ul>
              <li><a href="">ArabEasy Journey</a></li>
              <li><a href="">Investors</a></li>
              <li><a href="">Contact Us</a></li>
            </ul>
          </div>
          <div class="col-md-3">
            <ul>
              <li><a href="">EZ Life</a></li>
              <li><a href="">Team ArabEasy</a></li>          
            </ul>
          </div>
          <div class="col-md-3">
            <ul>
              <li><a href="">Privacy Policy</a></li>
              <li><a href="">Information Security</a></li>          
            </ul>
          </div>
        </div>
        <div class="row mt-4">
          <div class="col-md-12 text-center">
            <ul class="social">
              <li><a href=""><i class="fa fa-facebook"></i></a></li>
              <li><a href=""><i class="fa fa-twitter"></i></a></li>
              <li><a href=""><i class="fa fa-instagram"></i></a></li>
              <li><a href=""><i class="fa fa-linkedin"></i></a></li>
            </ul>
          </div>
          <div class="col-md-12 text-center">
            <p class="copyright">©2020–2021 All Rights Reserved. ArabEasy®</p>
          </div>
        </div>
      </div>
    </footer>
    <!-- Footer end -->
  </div>
</template> 

<script>
  export default {
    data() {
      return {
        email: null,
        password: null,
        has_error: false,
         user: null,
      }
    },

    mounted() {
      this.getUser()
    },

    methods: {
      getUser() {
        this.$http({
          url: `api/users/12`,
          method: 'GET'
        })
          .then((res) => {
            this.user = res.data.user
            
          }, 
          () => {

            this.has_error = true
          })
      },
      login() {
        // get the redirect object
        var redirect = this.$auth.redirect()
        var app = this
        this.$auth.login({
          params: {
            email: app.email,
            password: app.password
          },
          success: function() {
            // handle redirection
            const redirectTo = redirect ? redirect.from.name : this.$auth.user().role === 1 ? 'admin.dashboard' : 'profile'

            this.$router.push({name: redirectTo})
          },
          error: function() {
            app.has_error = true
          },
          rememberMe: true,
          fetchUser: true
        })
      }
    }
  }
</script>