@include('includes.header')

<div class="container-fluid mt-3">
    <div class="row">
      <div class="col-md-8 col-sm-6 col-xs-12">
          <ul class="pull-right d-inline-flex" style="list-style: none;">
            <li class="btn-sm">
                <a href="{{route('all-account')}}" class="btn btn-primary rounded-pill" style="width: 110px; text-align: center;"> All Account</a>
            </li>
            <li class="btn-sm">
                <a href="{{route('pending')}}" class="btn btn-warning rounded-pill" style="width: 110px; text-align: center; color: white;"> Pending</a>
            </li>
            <li class="btn-sm">
                <a href="{{route('all-history')}}" class="btn btn-success rounded-pill" style="width: 110px; text-align: center;"> All History</a>
            </li>
          </ul><br>
          <b style="color: #009688;">Google Authenticator</b>
      </div>
  </div>
  <hr/>
  <!-- Request Statistic Starts -->
   <div class="container-fluid">
    <form>
        <div class="row">
              <div class="col-lg-2 col-md-2 col-sm-6">
                <div class="form-group">
                  <input type="text" id="username" class="form-control" placeholder="Verify Code" style="height: 33px; border-radius: 25px;" required>
              </div>
              <button type="submit" class="btn-sm btn btn-success rounded-pill"
                      style="width: 120px; text-align: center; color: white; padding: 7px;">
                Submit
              </button>
              </div>

              <div class="col-lg-2 col-md-2 col-sm-6">
                <img src="{{url('assets/icon/qr.png')}}" style="width: 200px; height: 200px; margin-top: -22px;">
              </div>
              <div class="col-lg-4 col-md-4 col-sm-6">
                  <div class="google-auth-txt">
                       <p>Install the varification application for android OR iPhone</p>
                      <p>
                          1. on your phone,go to Google Play Store or app Store.<br>
                          2. Search for Google Authenticator.<br>
                          3. download and install the application.
                      </p>
                      <span class="ml-2" style=" color:#fac31f;font-weight:500;">Enable/Disable Google Authenticator</span>
                      <p class="ml-1 mt-2">Your Secret CODE:<span style="color: red;">2B7667345T455</span></p>
                  </div>
              </div>
              <div class="col-lg-2 col-md-2 col-sm-6">
                <img src="{{url('assets/icon/slack.png')}}" style="width: 200px; height: 200px; margin-top: -22px;">
              </div>
        </div>
      </form>
  </div>
  <div id="sidebar" class="users p-chat-user showChat" style="display: none">
    <div class="had-container">
      <div class="p-fixed users-main">
        <div class="user-box">
          <div class="chat-search-box">
            <a class="back_friendlist">
              <i class="feather icon-x"></i>
            </a>
            <div class="right-icon-control">
              <div class="input-group input-group-button">
                <input type="text" id="search-friends" name="footer-email" class="form-control"
                  placeholder="Search Friend">
                <div class="input-group-append">
                  <button class="btn btn-primary waves-effect waves-light" type="button"><i
                      class="feather fa fa-search"></i></button>
                </div>
              </div>
            </div>
          </div>
          <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 561px;">
            <div class="main-friend-list" style="overflow: hidden; width: auto; height: 561px;">
              <div class="media userlist-box waves-effect waves-light" data-id="1" data-status="online"
                data-username="Josephin Doe">
                <a class="media-left" href="#!">
                  <img class="media-object img-radius img-radius" src="{{url('assets/image/66caa59ab09b21717478001.jpg')}}"
                    alt="Generic placeholder image ">
                  <div class="live-status bg-success"></div>
                </a>
                <div class="media-body">
                  <div class="chat-header chatboxuser">Josephin Doe</div>
                </div>
              </div>
              <div class="media userlist-box waves-effect waves-light" data-id="2" data-status="online"
                data-username="Lary Doe">
                <a class="media-left" href="#!">
                  <img class="media-object img-radius" src="{{url('assets/image/66cab5457cc25Muhammad Nasarullah.jpeg')}}"
                    alt="Generic placeholder image">
                  <div class="live-status bg-success"></div>
                </a>
                <div class="media-body">
                  <div class="f-13 chat-header">Lary Doe</div>
                </div>
              </div>
              <div class="media userlist-box waves-effect waves-light" data-id="3" data-status="online"
                data-username="Alice">
                <a class="media-left" href="#!">
                  <img class="media-object img-radius" src="{{url('assets/image/66cabd10e43aacustomer5.jpg')}}"
                    alt="Generic placeholder image">
                  <div class="live-status bg-success"></div>
                </a>
                <div class="media-body">
                  <div class="f-13 chat-header">Alice</div>
                </div>
              </div>
              <div class="media userlist-box waves-effect waves-light" data-id="4" data-status="offline"
                data-username="Alia">
                <a class="media-left" href="#!">
                  <img class="media-object img-radius" src="{{url('assets/image/66cabd4c5f08dcustomer7.jpg')}}"
                    alt="Generic placeholder image">
                  <div class="live-status bg-default"></div>
                </a>
                <div class="media-body">
                  <div class="f-13 chat-header">Alia<small class="d-block text-muted">10 min ago</small></div>
                </div>
              </div>
              <div class="media userlist-box waves-effect waves-light" data-id="5" data-status="offline"
                data-username="Suzen">
                <a class="media-left" href="#!">
                  <img class="media-object img-radius" src="{{url('asssets/image/team-1-4.jpg')}}"
                    alt="Generic placeholder image">
                  <div class="live-status bg-default"></div>
                </a>
                <div class="media-body">
                  <div class="f-13 chat-header">Suzen<small class="d-block text-muted">15 min ago</small></div>
                </div>
              </div>
            </div>
            <div class="slimScrollBar"
              style="background: rgb(0, 0, 0); width: 7px; position: absolute; top: 0px; opacity: 0.4; display: block; border-radius: 7px; z-index: 99; right: 1px;">
            </div>
            <div class="slimScrollRail"
              style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
    <div class="showChat_inner " style="display:none">
      <div class="media chat-inner-header" style="position: relative;">
        <a class="back_chatBox">
            Josephin Doe
        </a>
        <button type="button" class="close close-chat" aria-label="Close" style="position: absolute; top: 1; right: 2;">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
      <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 486px;"><div class="main-friend-chat" style="overflow: hidden; width: auto; height: 486px;">
      <div class="media chat-messages">

      <a class="media-left photo-table" href="#!">
      <img class="media-object img-radius img-radius m-t-5" src="{{url('assets/image/66caa59ab09b21717478001.jpg')}}" alt="Generic placeholder image">
      </a>
      <div class="media-body chat-menu-content">
      <div class="">
      <p class="chat-cont">I'm just looking around. Will you tell me something about yourself?</p>
      </div>
      <p class="chat-time">8:20 a.m.</p>
      </div>
      </div>
      <div class="media chat-messages">
      <div class="media-body chat-menu-reply">
      <div class="">
      <p class="chat-cont">Ohh! very nice</p>
      </div>
      <p class="chat-time">8:22 a.m.</p>
      </div>
      </div>
      <div class="media chat-messages">
      <a class="media-left photo-table" href="#!">
      <img class="media-object img-radius img-radius m-t-5" src="{{url('assets/image/66caa59ab09b21717478001.jpg')}}" alt="Generic placeholder image">
      </a>
      <div class="media-body chat-menu-content">
      <div class="">
      <p class="chat-cont">can you come with me?</p>
      </div>
      <p class="chat-time">8:20 a.m.</p>
      </div>
      </div>
      </div>
      <div class="slimScrollBar" style="background: rgb(0, 0, 0); width: 7px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 486px;"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div></div>
      <div class="chat-reply-box py-3">
      <div class="right-icon-control">
      <div class="input-group input-group-button">
      <input type="text" class="form-control" placeholder="Write hear . . " style="border-top: 0; border-right: 0; border-left: 0;">
      <i class="fa fa-paper-plane mt-1 fa-2x" aria-hidden="true"></i>
      </div>
      </div>
      </div>
    </div>
  <br/>
  <br/>

  <script>
    function showDialog() {
        document.getElementById('serviceCard').style.display = 'block';
    }

    function closeDialog() {
        document.getElementById('serviceCard').style.display = 'none';
    }

    </script>


@include('includes.footer')