@extends('layouts.master')

@section('content')
<input type="hidden" id="prousername" value="{{$username}}">
<input type="hidden" id="auth" value="{{auth::user()}}">
<div class="container emp-profile">
   <div class="row">
      <div class="col-md-4">
         <div class="profile-img">

         </div>
      </div>
      <div class="col-md-6">
         <div class="profile-head">
            <h3 class="profile-name">

            </h3>
            <h4 class="profile-profession">

            </h4>
            <p class="proile-rating"></p>
            <ul class="nav nav-tabs" id="myTab" role="tablist">
               <li class="nav-item">
                  <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab"
                     aria-controls="home" aria-selected="true">About Professional</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
                     aria-controls="profile" aria-selected="false">Gallery</a>
               </li>
            </ul>
         </div>
      </div>
      <div class="col-md-2">

      </div>
   </div>
   <div class="row">
      <div class="col-md-4">
         <div class="profile-work">

         </div>
      </div>
      <div class="col-md-8">
         <div class="tab-content profile-tab" id="myTabContent">
            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
               <div class="row">
                  <div class="col-md-6">
                     <label>Name</label>
                  </div>
                  <div class="col-md-6">
                     <p class="profile-name"></p>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-6">
                     <label>Email</label>
                  </div>
                  <div class="col-md-6">
                     <p class="profile-email"></p>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-6">
                     <label>Experience</label>
                  </div>
                  <div class="col-md-6">
                     <p class="profile-experience"></p>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-6">
                     <label>Profession</label>
                  </div>
                  <div class="col-md-6">
                     <p class="profile-profession"></p>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-6">
                     <label class="profile-rate"></label>
                  </div>
                  <div class="col-md-6">
                     <p class="profile-amount"></p>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-6">
                     <label>Availability</label>
                  </div>
                  <div class="col-md-6">
                     <p>Available</p>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-6">
                     <label>Bio</label>
                  </div>
                  <div class="col-md-6">
                     <p class="profile-about"></p>
                  </div>
               </div>
            </div>
            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
               <div class="row">

                  <div class="col-md-6">
                     <div class="image-container">
                        <div class="thumbnail-container" id="imagegallery">

                        </div>
                        <div class="cursor-overlay"></div>
                        <div class="preview"></div>
                     </div>
                  </div>
                  <div class="col-md-6" id="videogallery">

                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <hr>
   <div class="row">
      <div class="col-md-12">
         <div class="riveiw-rating">

         </div>
      </div>

   </div>
</div>
<script src="{{asset('js/professional/viewprofile.js')}}"></script>
<script src="{{asset('js/zoom.js')}}"></script>
@endsection