@extends('seller.layout.master')
@section('content')

  <!-- end .uou-block-2b -->
  {{-- {{dd(Auth::user()->skills)}} --}}
  <div class="compny-profile"> 
    <!-- SUB Banner -->
    <div class="profile-bnr user-profile-bnr">
      <div class="container">
        <div class="pull-left">
          <h2>{{$seller_info->username}}</h2>
          <h5>Freelancer</h5>
        </div>
        
        <!-- Top Riht Button -->
        {{-- <div class="right-top-bnr">
          <div class="connect"> <a href="#." data-toggle="modal" data-target="#myModal"><i class="fa fa-user-plus"></i> Connect</a> <a href="#."><i class="fa fa-share-alt"></i> Share</a>
            <div class="bt-ns"> <a href="#."><i class="fa fa-bookmark-o"></i> </a> <a href="#."><i class="fa fa-envelope-o"></i> </a> <a href="#."><i class="fa fa-exclamation"></i> </a> </div>
          </div>
        </div> --}}
      </div>
      
      <!-- Modal POPUP -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="container">
              {{-- <h6><a class="close" href="#." data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></a> Send Message</h6> --}}
              
              <!-- Forms -->
              <form action="#">
                <ul class="row">
                  <li class="col-xs-6">
                    <input type="text" placeholder="First Name ">
                  </li>
                  <li class="col-xs-6">
                    <input type="text" placeholder="Last Name">
                  </li>
                  <li class="col-xs-6">
                    <input type="text" placeholder="Country">
                  </li>
                  <li class="col-xs-6">
                    <input type="text" placeholder="Email">
                  </li>
                  <li class="col-xs-12">
                    <textarea placeholder="Your Message"></textarea>
                  </li>
                  <li class="col-xs-12">
                    <button class="btn btn-primary">Send message</button>
                  </li>
                </ul>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Profile Company Content -->
    <div class="profile-company-content user-profile main-user" data-bg-color="f5f5f5">
      <div class="container">
        <div class="row"> 
          
          <!-- Tab Content -->
          <div class="col-md-12">
            <div class="tab-content"> 
              
              <!-- PROFILE -->
              <div id="profile" class="tab-pane fade in active">
                <div class="row"> 
                  
                  <!-- Col -->
                  <div class="col-md-4"> 
                    
                    <!-- Professional Details -->
                     <div class="sidebar">
                      <h5 class="main-title">Profile Image</h5>
                      <div class="sidebar-information">
                           @if(!empty($seller_info->freelancer) && !empty($seller_info->freelancer->profile_picture))
                              <img style="height:120px;width:100%" src="{{ secure_asset('storage/profile/'.$seller_info->freelancer->profile_picture) }}" id="preview">  
                           @endif
                      </div>
                      <div class="sidebar-information">
                           <a id="submit_uou_tigerp_payment" class="btn-new btn-custom ctrl-btn" href="{{URL::to('/message/'.$seller_info->id)}}">chat</a>
                      </div>
                     </div>
                    <div class="sidebar">
                      <h5 class="main-title">Professional Details</h5>
                      <!--<div class="img-profile"> <img class="media-object" src="images/avatar-1.jpg" alt=""> </div>-->
                      <div class="sidebar-information">
                        <ul class="single-category">
                         <li class="row">
                            <h6 class="title col-xs-6">Freelancer Name</h6>
                            <span class="subtitle col-xs-6">@if(!empty($seller_info->freelancer)){{$seller_info->freelancer->freelancer_name}}@endif</span></li> 
                          <li class="row">
                            <h6 class="title col-xs-6">Username</h6>
                            <span class="subtitle col-xs-6">{{$seller_info->username}}</span></li>
                          <li class="row">
                            <h6 class="title col-xs-6">Address</h6>
                            <span class="subtitle col-xs-6">@if(!empty($seller_info->freelancer)){{$seller_info->freelancer->address}}@endif</span></li>  
                          <li class="row">
                            <h6 class="title col-xs-6">Phone</h6>
                            <span class="subtitle col-xs-6">@if(!empty($seller_info->freelancer)){{$seller_info->freelancer->phone}}@endif</span></li>
                          <li class="row">
                            <h6 class="title col-xs-6">E-mail</h6>
                            <span class="subtitle col-xs-6"><a href="#.">{{$seller_info->email}}</a></span></li>
                        </ul>
                      </div>
                    </div>
                    
                    <!-- Rating -->
                    
                    {{-- <div class="sidebar">
                      <h5 class="main-title">Rating</h5>
                      <div class="sidebar-information">
                        <ul class="single-category com-rate">
                          <li class="row">
                            <h6 class="title col-xs-6">Expertise:</h6>
                            <span class="col-xs-6"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i></span> </li>
                          <li class="row">
                            <h6 class="title col-xs-6">Knowledge:</h6>
                            <span class="col-xs-6"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-half-o"></i> <i class="fa fa-star-o"></i></span> </li>
                          <li class="row">
                            <h6 class="title col-xs-6">Quality::</h6>
                            <span class="col-xs-6"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-o"></i></span> </li>
                          <li class="row">
                            <h6 class="title col-xs-6">Price:</h6>
                            <span class="col-xs-6"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i></span> </li>
                          <li class="row">
                            <h6 class="title col-xs-6">Services:</h6>
                            <span class="col-xs-6"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-o"></i></span> </li>
                        </ul>
                      </div>
                     </div>
                    <!-- Social Profiles -->
                    <div class="sidebar">
                      <h5 class="main-title">Social Profiles</h5>
                      <ul class="socil">
                        <li><a href="#."><i class="fa fa-facebook"></i></a></li>
                        <li><a href="#."><i class="fa fa-google-plus"></i></a></li>
                        <li><a href="#."><i class="fa fa-linkedin"></i></a></li>
                        <li><a href="#."><i class="fa fa-twitter"></i></a></li>
                      </ul>
                    </div>  --}}
                  </div>
                  <div class="col-md-8"> 
                    <!-- Skills -->
                    {{-- <div class="sidebar">
                      <h5 class="main-title">About</h5>
                      <p>{{$seller_info->description}}</p>
                      <h5 class="main-title">Skills</h5>
                      <div class="job-skills"> 
                        
                        <!-- Logo Design -->
                         <ul class="row">
                              <li class="col-sm-3">
                                <h6>Name</h6>
                              </li>
                               <li class="col-sm-3">
                                <h6>Level</h6>
                               </li>
                              <li class="col-sm-9">
                              
                        </ul>
                       @if(!empty($seller_info->skills) && count($seller_info->skills)>0) 
                          @foreach($seller_info->skills as $key => $value)
                            <ul class="row">
                              <li class="col-sm-3">
                                <h6><i class="fa fa-plus"></i> {{$value->name}}</h6>
                              </li>
                               <li class="col-sm-3">
                                <h6><i class="fa fa-plus"></i> {{$value->Level}}</h6>
                               </li>
                              <li class="col-sm-9">
                               
                            </ul>
                           @endforeach
                       @endif 
                      </div>
                    </div> --}}
                    {{-- {{dd($seller_info->services)}} --}}
                    <!-- Professional Details -->
                    <div class="sidebar">
                      <h5 class="main-title">Services</h5>
                      
                      <!-- Similar -->
                      <div class="similar">
                        @if(!empty($seller_info->services) && count($seller_info->services))
                          @foreach($seller_info->services as $key => $value)
                            <div class="media">
                              <div class="media-left">
                                <div class="inn-simi"> <img class="media-object" src="{{secure_asset('storage/service_image/'.$value->cover_image)}}" alt="">
                                {{-- <a href="javascript:void(0)" class="status" data-service_id="{{ $value->id }}"
                                  data-seller_id="{{ $seller_info->id }}"
                                  data-buyer_id="{{Auth::user()->id}}"
                                >Order</a>  --}}
                                </div>
                              </div>
                              <div class="media-body">
                                <h5>{{$value->title}}</h5>
                                {{-- <p>Duration: {{$value->duration}}</p> --}}
                                <p>Price: ${{$value->price}}</p>
                                
                                <p>{{$value->description}}</p>
                                
                                <!-- Share -->
                                {{-- <div class="share-w"><a href="#."><i class="fa fa-bookmark-o"></i></a> <a href="#."><i class="fa fa-envelope-o"></i></a> <a href="#."><i class="fa fa-eye"></i></a></div> --}}
                              </div>
                            </div>
                           @endforeach
                        @endif
                        
                        <!-- Similar -->
                        {{-- <div class="media">
                          <div class="media-left">
                            <div class="inn-simi"> <img class="media-object" src="images/med-avatar.jpg" alt=""> <a href="#">Profile </a> </div>
                          </div>
                          <div class="media-body">
                            <h5>Denise Walsh</h5>
                            <p>SEO Specialist - New York, USA</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, maxime, excepturi, mollitia, 
                              voluptatibus similique aliquid a dolores autem laudantium sapiente ad enim ipsa modi laborum 
                              accusantium deleniti neque architecto vitae.</p>
                            
                            <!-- Share -->
                            <div class="share-w"><a href="#."><i class="fa fa-bookmark-o"></i></a> <a href="#."><i class="fa fa-envelope-o"></i></a> <a href="#."><i class="fa fa-eye"></i></a></div>
                          </div>
                        </div>
                        
                        <!-- Similar -->
                        <div class="media">
                          <div class="media-left">
                            <div class="inn-simi"> <img class="media-object" src="images/med-avatar.jpg" alt=""> <a href="#">Profile </a> </div>
                          </div>
                          <div class="media-body">
                            <h5>Denise Walsh</h5>
                            <p>SEO Specialist - New York, USA</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, maxime, excepturi, mollitia, 
                              voluptatibus similique aliquid a dolores autem laudantium sapiente ad enim ipsa modi laborum 
                              accusantium deleniti neque architecto vitae.</p>
                            
                            <!-- Share -->
                            <div class="share-w"><a href="#."><i class="fa fa-bookmark-o"></i></a> <a href="#."><i class="fa fa-envelope-o"></i></a> <a href="#."><i class="fa fa-eye"></i></a></div>
                          </div>
                        </div> --}}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Order</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form method="post" action="{{route('buyer-order-request')}}">
          @if (Session::has('message'))
              <div class="alert alert-{{Session::get('messageType')}} alert-block">
                  <button type="button" class="close" data-dismiss="alert">×</button>	
                  <strong>{{Session::get('message')}} </strong>
              </div>
          @endif
        <div class="modal-body">
            @csrf
            <input type="hidden" name="service_id" value="@if(!empty(Request::old('service_id'))){{Request::old('service_id')}}@endif">
            {{-- <input type="text" name="user_id" value="{{Auth::user()->id}}"> --}}
            <div class="form-group">
              <label for="recipient-name" class="col-form-label">Order name:</label>
              <input type="text" class="form-control" id="order_name" name="order_name" value="@if(!empty(Request::old('order_name'))){{Request::old('order_name')}}@endif" required>
                @if($errors->has('order_name'))
                  <div style='color: red'>{{$errors->first('order_name')}}</div>
                @endif
            </div>
            <div class="form-group">
              <label for="recipient-name" class="col-form-label">Order Price</label>
              <input type="number" class="form-control" id="order_price" name="order_price" value="@if(!empty(Request::old('order_price'))){{Request::old('order_price')}}@endif" required>
                @if($errors->has('order_price'))
                  <div style='color: red'>{{$errors->first('order_price')}}</div>
                @endif
            </div>
            <div class="form-group">
              <label for="recipient-name" class="col-form-label">Order date</label>
              <input type="date" class="form-control" id="order_date" name="order_date" value="@if(!empty(Request::old('order_date'))){{Request::old('order_date')}}@endif" required>
               @if($errors->has('order_date'))
                  <div style='color: red'>{{$errors->first('order_date')}}</div>
               @endif
            </div>
            <div class="form-group">
              <label for="message-text" class="col-form-label">Order Description:</label>
              <textarea class="form-control" id="message-text" name="description" required>@if(!empty(Request::old('description'))){{Request::old('description')}}@endif</textarea>
               @if($errors->has('description'))
                  <div style='color: red'>{{$errors->first('description')}}</div>
               @endif
            </div>

            <div class="form-group">
                <label for="message-text" class="col-form-label">Order Status:</label>
                  <select class="form-select status"  aria-label="Default select example" name="status" required>
                      {{-- <option value="">Order Request</option> --}}
                      <option value="Pending">pending</option>
                      {{-- <option value="1">Approved</option>
                      <option value="2">Decline</option> --}}
                      <option value="Complete">Complete</option>
                  </select>
                   @if($errors->has('status'))
                      <div style='color: red'>{{$errors->first('status')}}</div>
                   @endif
            </div>
            
          
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection
@section('scripts')
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <script>
      $(document).ready(function() {
        
          $(document).on('click','.status',function() {
              //alert($(this).val());
              var service_id = $(this).attr('data-service_id')
              var seller_id = $(this).attr('data-seller_id')
              $('input[name="service_id"]').val(service_id);
    
              $("#exampleModal").modal('show');
              //window.$('#exampleModal').modal()

              //var buyer_id = $(this).attr('data-buyer_id')
                  //alert(service_id);
              //alert(status);
          });
           @if(Session::has('message'))
              $("#exampleModal").modal('show');
           @endif
           @if(Session::get('errors'))
                $("#exampleModal").modal('show');
           @endif
        
      });
  </script>
 @endsection