@extends('buyers_sellers.layout2.master')
@section('title', 'Home')
@section('content')
<style>
.img_fill{
   height: 150px;
    width: 150px;
    object-fit: fill;
    
} 
</style>
<div class="w-100 bg-white">
   <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
         <li class="breadcrumb-item"><a href="{{ route('buyer.dashboard') }}"><i class="feather-home"></i></a></li>
         <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
      </ol>
   </nav>
</div>
<div class="py-4">
   <div class="container">
      <div class="row">
         <!-- Main Content -->
         <main class="col col-xl-6 order-xl-2 col-lg-12 order-lg-1 col-md-12 col-sm-12 col-12">
            <div class="box shadow-sm border bg-white mb-3 osahan-share-post">
               <ul class="nav nav-justified border-bottom osahan-line-tab" 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"><i class="feather-edit"></i> Share an update</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"><i class="feather-image"></i> Upload a photo</a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false"><i class="feather-clipboard"></i> Write an article</a>
                  </li>
               </ul>
               <div class="tab-content" id="myTabContent">
                  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                     <div class="p-3 d-flex align-items-center w-100" href="#">
                        <div class="dropdown-list-image mr-3">
            
                         @if(!empty(Auth::user()->profile_image)) 
                         <img class=-circle" src="{{asset(Auth::user()->profile_image)}}" alt="">
                         @else
                         <img class=-circle" src="{{asset('assets/web/user/img/user.png')}}" alt="">
                        @endif
                           <div class="status-indicator bg-success"></div>
                        </div>
                        <div class="w-100">
                           <textarea placeholder="Write your thoughts..." class="form-control border-0 p-0 shadow-none thought shareupdate" rows="1"></textarea>
                        </div>
                     </div>
                  </div>
                  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                     <div class="p-3 w-100">
                        <input type="file" class="form-control file" multiple id="files">
                     </div>
                  </div>
                  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                     <div class="p-3 w-100">
                        <textarea placeholder="Write an article..." class="form-control border-0 p-0 shadow-none article shareupdate" rows="3"></textarea>
                     </div>
                  </div>
               </div>
               <div class="border-top p-3 d-flex align-items-center">
                  <div class="mr-auto"><a href="#" class="text-link small"><i class="feather-map-pin"></i> Add Location</a></div>
                  <div class="flex-shrink-1">
                     <button type="button"  class="btn btn-light btn-sm showpreview" >Preview</button>
                     <button type="button" class="btn btn-theme btn-sm post">Post Status</button>
                  </div>
               </div>
            </div>
            <!-- <div class="box shadow-sm border bg-white mb-3 osahan-post">
               <div class="p-3 d-flex align-items-center border-bottom osahan-post-header">
                  <div class="dropdown-list-image mr-3">
                     <img class=-circle" src="{{asset('assets/web/user/img/p5.png')}}" alt="">
                     <div class="status-indicator bg-success"></div>
                  </div>
                  <div class="font-weight-bold">
                     <div class="text-truncate">Tobia Crivellari</div>
                     <div class="small text-gray-500">Product Designer at askbootstrap</div>
                  </div>
                  <span class="ml-auto small">3 hours</span>
               </div>
               <div class="p-3 border-bottom osahan-post-body">
                  <p class="mb-0">Tmpo incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco <a href="#">laboris consequat.</a></p>
               </div>
               <div class="p-3 border-bottom osahan-post-footer">
                  <a href="#" class="mr-3 text-secondary"><i class="feather-heart text-danger"></i> 16</a>
                  <a href="#" class="mr-3 text-secondary"><i class="feather-message-square"></i> 8</a>
                  <a href="#" class="mr-3 text-secondary"><i class="feather-share-2"></i> 2</a>
               </div>
               <div class="p-3">
                  <button type="button" class="btn btn-outline-primary btn-sm mr-1">Awesome!!</button>
                  <button type="button" class="btn btn-light btn-sm mr-1">😍</button>
                  <button type="button" class="btn btn-outline-secondary btn-sm mr-1">Whats it about?</button>
                  <button type="button" class="btn btn-outline-secondary btn-sm mr-1">Oooo Great Wow</button>
               </div>
            </div>
            <div class="mb-3 shadow-sm box bg-white osahan-slider-main">
               <div class="osahan-slider">
                  <div class="osahan-slider-item">
                     <a href="job-profile.html">
                        <div class="shadow-sm border bg-white job-item job-item mr-2 mt-3 mb-3">
                           <div class="d-flex align-items-center p-3 job-item-header">
                              <div class="overflow-hidden mr-2">
                                 <h6 class="font-weight-bold text-dark mb-0 text-truncate">UI/UX designer</h6>
                                 <div class="text-truncate text-primary">Envato</div>
                                 <div class="small text-gray-500"><i class="feather-map-pin"></i> India, Punjab</div>
                              </div>
                              <img class="img-fluid ml-auto " src="{{asset('assets/web/user/img/l1.png')}}" alt="">
                           </div>
                           <div class="d-flex align-items-center p-3 border-top border-bottom job-item-body">
                              <div class="overlap-circle d-flex">
                                 <img class=-circle shadow-sm" data-toggle="tooltip" data-placement="top" title="" src="{{asset('assets/web/user/img/p1.png')}}" alt="" data-original-title="Sophia Lee">
                                 <img class=-circle shadow-sm" data-toggle="tooltip" data-placement="top" title="" src="{{asset('assets/web/user/img/p2.png')}}" alt="" data-original-title="John Doe">
                                 <img class=-circle shadow-sm" data-toggle="tooltip" data-placement="top" title="" src="{{asset('assets/web/user/img/p3.png')}}" alt="" data-original-title="Julia Cox">
                                 <img class=-circle shadow-sm" data-toggle="tooltip" data-placement="top" title="" src="{{asset('assets/web/user/img/p4.png')}}" alt="" data-original-title="Robert Cook">
                                 <img class=-circle shadow-sm" data-toggle="tooltip" data-placement="top" title="" src="{{asset('assets/web/user/img/p5.png')}}" alt="" data-original-title="Sophia Lee">
                              </div>
                              <span class="font-weight-bold text-primary">18 connections</span>
                           </div>
                           <div class="p-3 job-item-footer">
                              <small class="text-gray-500"><i class="feather-clock"></i> Posted 3 Days ago</small>
                           </div>
                        </div>
                     </a>
                  </div>
                  <div class="osahan-slider-item">
                     <a href="job-profile.html">
                        <div class="shadow-sm border bg-white job-item job-item mr-2 mt-3 mb-3">
                           <div class="d-flex align-items-center p-3 job-item-header">
                              <div class="overflow-hidden mr-2">
                                 <h6 class="font-weight-bold text-dark mb-0 text-truncate">.NET Developer</h6>
                                 <div class="text-truncate text-primary">Invision</div>
                                 <div class="small text-gray-500"><i class="feather-map-pin"></i> London, UK
                                 </div>
                              </div>
                              <img class="img-fluid ml-auto" src="{{asset('assets/web/user/img/l4.png')}}" alt="">
                           </div>
                           <div class="d-flex align-items-center p-3 border-top border-bottom job-item-body">
                              <div class="overlap-circle d-flex">
                                 <img class=-circle shadow-sm" data-toggle="tooltip" data-placement="top" title="" src="{{asset('assets/web/user/img/p13.png')}}" alt="" data-original-title="Sophia Lee">
                                 <img class=-circle shadow-sm" data-toggle="tooltip" data-placement="top" title="" src="{{asset('assets/web/user/img/p1.png')}}" alt="" data-original-title="John Doe">
                                 <img class=-circle shadow-sm" data-toggle="tooltip" data-placement="top" title="" src="{{asset('assets/web/user/img/p2.png')}}" alt="" data-original-title="Julia Cox">
                                 <img class=-circle shadow-sm" data-toggle="tooltip" data-placement="top" title="" src="{{asset('assets/web/user/img/p3.png')}}" alt="" data-original-title="Robert Cook">
                              </div>
                              <span class="font-weight-bold text-primary">18 connections</span>
                           </div>
                           <div class="p-3 job-item-footer">
                              <small class="text-gray-500"><i class="feather-clock"></i> Posted 3 Days ago</small>
                           </div>
                        </div>
                     </a>
                  </div>
                  <div class="osahan-slider-item">
                     <a href="job-profile.html">
                        <div class="shadow-sm border bg-white job-item job-item mr-2 mt-3 mb-3">
                           <div class="d-flex align-items-center p-3 job-item-header">
                              <div class="overflow-hidden mr-2">
                                 <h6 class="font-weight-bold text-dark mb-0 text-truncate">Channel Sales Director</h6>
                                 <div class="text-truncate text-primary">Slack Inc.</div>
                                 <div class="small text-gray-500"><i class="feather-map-pin"></i> London, UK
                                 </div>
                              </div>
                              <img class="img-fluid ml-auto" src="{{asset('assets/web/user/img/l7.png')}}" alt="">
                           </div>
                           <div class="d-flex align-items-center p-3 border-top border-bottom job-item-body">
                              <div class="overlap-circle d-flex">
                                 <img class=-circle shadow-sm" data-toggle="tooltip" data-placement="top" title="" src="{{asset('assets/web/user/img/p12.png')}}" alt="" data-original-title="Sophia Lee">
                                 <img class=-circle shadow-sm" data-toggle="tooltip" data-placement="top" title="" src="{{asset('assets/web/user/img/p13.png')}}" alt="" data-original-title="John Doe">
                                 <img class=-circle shadow-sm" data-toggle="tooltip" data-placement="top" title="" src="{{asset('assets/web/user/img/p2.png')}}" alt="" data-original-title="Julia Cox">
                              </div>
                              <span class="font-weight-bold text-primary">18 connections</span>
                           </div>
                           <div class="p-3 job-item-footer">
                              <small class="text-gray-500"><i class="feather-clock"></i> Posted 3 Days ago</small>
                           </div>
                        </div>
                     </a>
                  </div>
               </div>
            </div> -->
            <div class="show-posts">
          
               <div class="box mb-3 shadow-sm border bg-white osahan-post">
               <div class="p-3 d-flex align-items-center border-bottom osahan-post-header">
                  <div class="dropdown-list-image mr-3">
                     <img class="circle" src="" alt="">
                     <div class="status-indicator bg-success"></div>
                  </div>
                  <div class="font-weight-bold">
                     <div class="text-truncate"></div>
                     <div class="small text-gray-500"></div>
                  </div>
                  <span class="ml-auto small"> &nbsp; 

                     </span>
               </div>
               <div class="p-3 border-bottom osahan-post-body">
                  <p><a href="#"></a></p>
                  
                  <img src="" class="img-fluid" alt="Responsive image">
                  
               </div>
               <div class="p-3 border-bottom osahan-post-footer">
                  <!-- @if(!empty($post->likes))
                  @php $check_like=array(); @endphp
                  @foreach($post->likes as $like)
                  @php $check_like[]=$like->user_id;  @endphp
                  @endforeach
                  @endif -->

           
               </div>
               <!-- @if(!empty($post->comments)) -->
            <div class="show-post-comments" data-id="">
            <!-- @php $comment_count=0; @endphp
                  @foreach($post->comments as $comment)
                  @php
                  $comment_count++;
              @endphp -->
            <div class="p-3 d-flex align-items-top border-bottom osahan-post-comment comments" data-id="" >
                        <div class="dropdown-list-image mr-3">
                           <img class=-circle" src="" alt="">
                           <div class="status-indicator bg-success"></div>
                        </div>
                     
                        <div class="font-weight-bold">
                           <div class="text-truncate">  <span class="float-right small"> &nbsp; </span></div>
                           <div class="small text-gray-500"></div>
                        </div>
                     </div>
                     
                     <button type="button" class="btn btn-sm bg-theme comments-read float-right" data-id= >Readmore </button>
                  
               </div>
               <div class="p-3">
                  <textarea placeholder="Add Comment..." class="form-control border-0 p-0 shadow-none add-comment" rows="1" data-id="{{$post->id}}"></textarea>
               </div>
            </div>
            @endforeach
            
            @endif
         </div>
            <div class="modal fade" id="myModal" role="dialog">
               <div class="modal-dialog">
                 <!-- Modal content-->
                 <div class="modal-content">
                   {{-- <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal">&times;</button>
                     <h4 class="modal-title">Modal Header</h4>
                   </div> --}}
                   <div class="modal-body">
                     <div class="box mb-3 shadow-sm border bg-white osahan-post">
                        <div class="p-3 d-flex align-items-center border-bottom osahan-post-header">
                           <div class="dropdown-list-image mr-3">
                              <img class=-circle" src="{{asset(Auth::user()->profile_image)}}" alt="">
                              <div class="status-indicator bg-success"></div>
                           </div>
                           <div class="font-weight-bold">
                              <div class="text-truncate">{{Auth::user()->full_name}}</div>
                              {{-- <div class="small text-gray-500">Web Developer @Google</div> --}}
                           </div>
                           {{-- <span class="ml-auto small">3 hours</span> --}}
                        </div>
                        <div class="p-3 border-bottom osahan-post-body">
                           <p id='showtext'>  <a href="#">laboris consequat.</a></p>
                           
                           <img src="" id="model_image" class="img-fluid" alt="Responsive image">
                        </div>
                     </div>
                   </div>
                   <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                   </div>
                 </div>
                 
               </div>
             </div>
         </main>
         <aside class="col col-xl-3 order-xl-1 col-lg-6 order-lg-2 col-md-6 col-sm-6 col-12">
            <div class="box mb-3 shadow-sm border bg-white profile-box text-center">
                {{-- <div class="py-4 px-3 border-bottom">
                    <!-- @if(isset(Session::get('user')->profile_image)) -->
                   
                    <img class="img-fluid mt-2-circle img_fill" src="{{asset('assets/web/user/img/p13.png')}}">
                    <!-- @endif -->
                    <!--<img src="{{asset('assets/web/user/img/p13.png')}}" class="img-fluid mt-2-circle" alt="Responsive image">-->
                    <h5 class="font-weight-bold text-dark mb-1 mt-4"> 
                 
                 </h5>
                </div> --}}

                <div class="overflow-hidden border-top">
                    <a class="font-weight-bold p-3 d-block" href="{{ route("buyer.profile") }}"> View my profile </a>
                </div>
                <div class="overflow-hidden border-top">
                  {{-- <a class="font-weight-bold p-3 d-block" href="{{ route('buyer.job.view') }}"> View Job </a> --}}
              </div>

               <div class="overflow-hidden border-top">
                  <a class="font-weight-bold p-3 d-block" href="{{ route('buyer.service') }}"> View service </a>
              </div>
                <input type="hidden" class="bodyheight" value="">
            </div>
            {{-- <div class="box mb-3 shadow-sm bg-white view-box overflow-hidden">
                <div class="box-title border-bottom p-3">
                    <h6 class="m-0">Profile Views</h6>
                </div>
                <div class="d-flex text-center">
                    <div class="col-6 border-right py-4 px-2">
                        <h5 class="font-weight-bold text-warning mb-1">08 <i class="feather-bar-chart-2"></i></h5>
                        <p class="mb-0 text-black-50 small">last 5 days</p>
                    </div>
                    <div class="col-6 py-4 px-2">
                        <h5 class="font-weight-bold text-success mb-1">+ 43% <i class="feather-bar-chart"></i></h5>
                        <p class="mb-0 text-black-50 small">Since last week</p>
                    </div>
                </div>
                <div class="overflow-hidden border-top text-center">
                    <img src="{{asset('assets/web/user/img/chart demo.PNG')}}" class="img-fluid" alt="Responsive image" style="width: 100%;height:auto;">
                </div>
            </div>
            <div class="box shadow-sm mb-3 bg-white ads-box text-center">
                <img src="{{asset('assets/web/user/img/job1.png')}}" class="img-fluid" alt="Responsive image">
                <div class="p-3 border-bottom">
                    <h6 class="font-weight-bold text-dark">Osahan Solutions</h6>
                    <p class="mb-0 text-muted">Looking for talent?</p>
                </div>
                <div class="p-3">
                    <button type="button" class="btn btn-outline-info pl-4 pr-4"> POST A JOB </button>
                </div>
            </div> --}}
         </aside>
         
      </div>
   </div> 
</div>
@endsection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
      scrollHeight= document.body.scrollHeight, document.documentElement.scrollHeight;
      $(".bodyheight").val(scrollHeight);
       $(".showpreview").click(function(){
            $("#myModal").modal('show');
         var textvalue = $(".tab-content").find('.show').find(".shareupdate").val();
         if(!textvalue){
         var image = $(".tab-content").find('.show').find("#files").get(0).files[0];
         }
         if(textvalue){
            $('#model_image').hide();
            $('#showtext').show();
            $("#showtext").text(textvalue); 
         }else if(image){
            //console.log(image);
            $('#showtext').hide();
            $('#model_image').show();
            //$('#model_image').attr('src',image);
            var reader = new FileReader();
            reader.onload = function(){
                $("#model_image").attr("src", reader.result);
            }
            reader.readAsDataURL(image);
         }  
       });

       $(function(){
        per_page=2;
	 var lastScrollTop = 0, delta = 5;
	 $(window).scroll(function(){
       client_height=document.body.clientHeight, document.documentElement.clientHeight;
       var nowScrollTop = $(this).scrollTop() + + client_height;
       scrollHeight= document.body.scrollHeight, document.documentElement.scrollHeight;
     
       var bottom = $(document).height() - $(window).height();
// alert(bottom);

      if(nowScrollTop==scrollHeight){
      per_page=per_page + + 3;
      $.ajax({
         url:"",
         type:"post",
         data:{limit:per_page,"_token":"{{csrf_token()}}"},
         success:function(res){
            $(".show-posts").append(res);
         }
      })
        
      }
      
	 });
 });
      //  body=$("body").attr({ scrollTop: $("body").attr("scrollHeight") });
      //  console.log(body);
       


   });

</script>