@extends('layouts.master')
 @section('page_title')
      @if(isset($page_title))
          {{ $page_title }}
      @endif
  @endsection
@section('css')
@endsection
@section('content')
<div class="">
  <div class="page-title">
    <!-- <div class="title_left"> -->
      <div class="title_left">
            <ol class="breadcrumb">
              <li><a href="{!! url('dashboard') !!}">Dashboard</a></li>
              <li><a href="{!! url('staffmembers') !!}">Staff Members</a></li>
              <li class="active">{{ $staff_member->name }}</li>
            </ol>
          </div>
    <!-- </div> -->

   
  </div>
  
  <div class="clearfix"></div>

  <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
      <div class="x_panel">
        <div class="x_title">
          <h2>Staff Profile </h2>
          <div class="title_left">
        </div>
          
          <div class="clearfix"></div>
        </div>
        <div class="x_content">
          <div class="col-md-3 col-sm-3 col-xs-12 profile_left">
            <div class="profile_img">
              <div id="crop-avatar">
                <!-- Current avatar -->
                <img class="img-responsive avatar-view" src="images/picture.jpg" alt="{{ $staff_member->name }} profile picture" title="{{ $staff_member->name }} profile picture">
              </div>
            </div>
            <h3>{{ $staff_member->name }}</h3>
  
            <ul class="list-unstyled user_data">
              <li><i class="fa fa-map-marker user-profile-icon"></i> {{ $staff_member->location_country }}
              </li>

              <li>
                <i class="fa fa-briefcase user-profile-icon"></i> {{ $staff_member->designation }}
              </li>

              <li class="m-top-xs">
                <i class="fa fa-envelope user-profile-icon"></i>
                <a href="#">{{ $staff_member->email }}</a>
              </li>
            </ul>

            <a class="btn btn-success"><i class="fa fa-edit m-right-xs"></i>Edit Profile</a>
            <br />

            <!-- start skills -->
            <!-- <h4>Skills</h4> -->
            <!-- <ul class="list-unstyled user_data">
              <li>
                <p>Web Applications</p>
                <div class="progress progress_sm">
                  <div class="progress-bar bg-green" role="progressbar" data-transitiongoal="50"></div>
                </div>
              </li>
              <li>
                <p>Website Design</p>
                <div class="progress progress_sm">
                  <div class="progress-bar bg-green" role="progressbar" data-transitiongoal="70"></div>
                </div>
              </li>
              <li>
                <p>Automation & Testing</p>
                <div class="progress progress_sm">
                  <div class="progress-bar bg-green" role="progressbar" data-transitiongoal="30"></div>
                </div>
              </li>
              <li>
                <p>UI / UX</p>
                <div class="progress progress_sm">
                  <div class="progress-bar bg-green" role="progressbar" data-transitiongoal="50"></div>
                </div>
              </li>
            </ul> -->
            <!-- end of skills -->

          </div>
          <div class="col-md-9 col-sm-9 col-xs-12">

            <div class="" role="tabpanel" data-example-id="togglable-tabs">
              <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
                <li role="presentation" class="active"><a href="#tab_content1" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false">Personal Details</a></li>
                <li role="presentation" class=""><a href="#tab_content2" id="home-tab" role="tab" data-toggle="tab" aria-expanded="true">Recent Activity</a></li>       
                <li role="presentation" class=""><a href="#tab_content3" role="tab" id="profile-tab2" data-toggle="tab" aria-expanded="false">Leave Profile</a></li>
              </ul>
              <div id="myTabContent" class="tab-content">
                <div role="tabpanel" class="tab-pane fade active in" id="tab_content1" aria-labelledby="profile-tab">
                  <div>
                    Name : <br> 
                    Designation : <br>
                    Country : <br>
                    DOB : <br>
                  </div>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="tab_content2" aria-labelledby="home-tab">

                  <!-- start recent activity -->
                  <ul class="messages">
                    <li>
                      <img src="images/img.jpg" class="avatar" alt="Avatar">
                      <div class="message_date">
                        <h3 class="date text-info">24</h3>
                        <p class="month">May</p>
                      </div>
                      <div class="message_wrapper">
                        <h4 class="heading">Desmond Davison</h4>
                        <blockquote class="message">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua butcher retro keffiyeh dreamcatcher synth.</blockquote>
                        <br />
                        <p class="url">
                          <span class="fs1 text-info" aria-hidden="true" data-icon=""></span>
                          <a href="#"><i class="fa fa-paperclip"></i> User Acceptance Test.doc </a>
                        </p>
                      </div>
                    </li>
                    
                    
                    <li>
                      <img src="images/img.jpg" class="avatar" alt="Avatar">
                      <div class="message_date">
                        <h3 class="date text-error">21</h3>
                        <p class="month">May</p>
                      </div>
                      <div class="message_wrapper">
                        <h4 class="heading">Brian Michaels</h4>
                        <blockquote class="message">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua butcher retro keffiyeh dreamcatcher synth.</blockquote>
                        <br />
                        <p class="url">
                          <span class="fs1" aria-hidden="true" data-icon=""></span>
                          <a href="#" data-original-title="">Download</a>
                        </p>
                      </div>
                    </li>

                  </ul>
                  <!-- end recent activity -->
                </div>
                <div role="tabpanel" class="tab-pane fade" id="tab_content3" aria-labelledby="profile-tab">
                  <p>xxFood truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui
                    photo booth letterpress, commodo enim craft beer mlkshk </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection