@extends('front.template.master') 
@section('title', $title)
@section('content')

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
      $('[data-toggle="popover"]').popover({
          placement : 'left',
          trigger: 'hover'
      });
  });
</script>

<style type="text/css">
  .popover {
    background: #3a7ad2;
  }
</style>

@php

$username = '';
$userlocation = '';
$userexpyear = '';
$useremail = '';
$usercitizen = '';
$useravail = '';
$userlanguage = '';
$userexpertise = '';
$userskills = '';
$usercontact = '';
$userlandline = '';
$useruser_image = '';
$google_id = '';
$facebook_id = '';
$linkedin_id = '';
if(isset($userdetailData))
{ 
  $username = $userdetailData->name; 
  $useremail = $userdetailData->email; 
  $userexpyear = $userdetailData->expyear;  
  $userlocation = $userdetailData->location;   
  $usercitizen = $userdetailData->citizen;  
  $useravail = $userdetailData->avail;  
  $userlanguage = $userdetailData->language;  
  $userexpertise = $userdetailData->expertise;  
  $userskills = $userdetailData->skills;  
  $usercontact = $userdetailData->contact;
  $userlandline = $userdetailData->landline;
  $useruser_image = $userdetailData->user_image;
  $google_id = $userdetailData->google_id;
  $facebook_id = $userdetailData->facebook_id;
  $linkedin_id = $userdetailData->linkedin_id;
}

@endphp

<!-- Content Area Starts Here -->

    <main id="content">
        <div class="container my-5">
          <div class="row">
            <div class="col-md-8 px-5">

              <div class="row personal-section mt-0">
                <div class="col-md-8 text-left">
                  <h5> Personal Information </h5>
                </div>
                <div class="col-md-12">
                  <div class="row">
                    <div class="col-md-2">
                        <div class="col-sm-3 pr-0 pl-2">
                          @if($useruser_image !='')            
                            @if($google_id !='' || $facebook_id !='' || $linkedin_id !='') 
                              @if(File::exists(public_path('uploads/'.$useruser_image)))
                                <img src="{{ asset('public/uploads/'.$useruser_image) }}" style="width: 100px;">
                              @else
                                <img src="{{ $useruser_image }}" style="width: 100px;">
                              @endif
                            @else
                              <img src="{{ asset('public/uploads/'.$useruser_image)}}" style="width: 100px;">
                            @endif
                          @else 
                            <img src="{{ asset('public/assets/img/nophoto.jpeg')}}" style="width: 100px;">
                          @endif
                        </div>
                    </div>
                    <div class="col-md-10">
                      <h2>{{ trim($username) }}</h2>
                      <p class="my-4">{{ trim($userlocation) }}</p>
                    </div>
                  </div>
                </div>
              </div>

              {{-- <div class="row personal-section">
                <div class="col-md-8 text-left">
                  <h5> Contact </h5>
                </div>
                <div class="col-md-12">
                  <p>Email : {{ trim($useremail) }}</p>
                  <p>Contact No. : {{ trim($usercontact) }}</p>
                  <p>Landline No. : {{ trim($userlandline) }}</p>
                </div>
              </div> --}}

              <div class="row personal-section">
                <div class="col-md-8 text-left">
                  <h5> Professional Summary </h5>
                </div>
                <div class="col-md-12">
                  <div class="row">
                    <div class="col-md-5">
                      <p>Years of Exp. : {{ trim($userexpyear) }}</p>
                      <p>Availability : {{ trim($useravail) }}</p>
                    </div>
                    <div class="col-md-6">
                      <p>Citizenships : {{ trim($usercitizen) }}</p>
                      <p>Languages : {{ trim($userlanguage) }}</p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="row personal-section">
                <div class="col-md-8 text-left">
                  <h5> Skills & Expertise </h5>
                </div>
                <div class="col-md-12">
                  <p>Skills : {{ trim($userskills) }}</p>
                  <p>Area of Expertise : {{ trim($userexpertise) }}</p>
                </div>
              </div>

              <div class="row personal-section" style="background-color: #3a7ad2">
                <div class="col-md-12 text-center text-white">
                  <h5> Reach out to </h5>

                    @if (Auth::check())
                      <p><a data-toggle="modal" data-target="#jobSeeker" class="text-white" style="cursor: pointer;"> {{ trim($username) }} </a></p>
                    @else
                      <p><a href="{{ route('user.login') }}" class="text-white" style="cursor: pointer;"> {{ trim($username) }} </a></p>
                    @endif
                    
                  
                </div>
              </div>

              <div class="modal" id="jobSeeker">
                <div class="modal-dialog">
                    <div class="modal-content">
                  
                      <div class="modal-header">
                          <h4 class="modal-title">Reach out to us</h4>
                          <button type="button" class="close" data-dismiss="modal">&times;</button>
                      </div>
                      
                      <div class="contact-enquiry">
                          <div class="contact-image">
                              <img src="https://csrability.com/public/assets/img/logo-big.png" style="width: 101px; height: 73px;border-radius: 0;margin-top: -6%;transform: inherit;background-color: #fff;" alt="" class="img-fluid">
                          </div>
                          <form action="{{ route('profileseeker') }}" method="post" enctype="multipart/form-data">
                          @csrf()
                              <h3>For Profile of {{ trim($username) }}</h3>
                              <div class="row">
                                  <div class="col-md-12">
                                      <div class="form-group">
                                          <input type="text" name="name" class="form-control" placeholder="Your Name" value="" />
                                      </div>
                                      <div class="form-group">
                                          <input type="hidden" name="profile_name" class="form-control" placeholder="Your Name" value="{{ trim($username) }}" />
                                      </div>
                                      <div class="form-group">
                                          <input type="email" name="email" class="form-control" placeholder="Your Email *" value="" required="" />
                                      </div>
                                      <div class="form-group">
                                          <select name="organisation" class="form-control" id="getFname" onchange="seekSelectCheck(this);">
                                            <option>--Select Organisation--</option>
                                            <option id="seekOption" value="0">Others</option>
                                            @foreach($organisations as $j)
                                              <option value="{{ $j }}">{{ $j }}</option>
                                            @endforeach
                                          </select>
                                      </div>
                                      <div class="form-group" id="seekDivCheck"></div>
                                      <div class="form-group">
                                          <input type="text" name="subject" class="form-control" placeholder="Your Subject *" value="Featured job profile of {{ trim($username) }} requried" required="" />
                                      </div>
                                      <div class="form-group">
                                          <textarea name="textarea" class="form-control" placeholder="Your Message" style="width: 100%; height: 150px;"></textarea>
                                      </div>
                                      <div class="form-group" style="margin-top: 15px;">
                                            <div class="g-recaptcha" data-sitekey="{{env('CAPTCHA_KEY')}}"></div>
                                            @if($errors->has('g-recaptcha-response'))
                                            <span class="invalid-feedback" style="display: block;">
                                            	<strong>{{ $errors->first('g-recaptcha-response') }}</strong>
                                            </span>
                                            @endif
                                        </div>
                                      <div class="form-group text-center">
                                          <input type="submit" name="btnSubmit" class="btnContact" value="Send Message" />
                                      </div>
                                  </div>
                              </div>
                          </form>
                        </div>
                    
                    </div>
                </div>
            </div>

            </div>

            <div class="col-md-4">
                <div class="featured-jobseekers mb-5">
                    <h4 class="text-dark font-weight-bold mb-3" href="#" role="button" data-toggle="popover" title="Please write to us for placing your profile here" style="cursor: pointer;"><span data-toggle="modal" data-target="#job-seeker"><strong> Job Seekers </strong></span></h4>
                    <ul class="list-unstyled news text-left">
                        @foreach($userdetaillist as $j)
                        <div class="jobseekers mb-3 py-3 ">
                          <div class="row">
                            <div class="col-sm-3 pr-0 pl-2">
                              @if($j->user_image !='')            
                                @if($j->google_id !='' || $j->facebook_id !='' || $j->linkedin_id !='') 
                                  @if(File::exists(public_path('uploads/'.$j->user_image)))
                                    <img src="{{ asset('public/uploads/'.$j->user_image) }}" style="width: 81px;">
                                  @else
                                    <img src="{{ $j->user_image }}" style="width: 81px;">
                                  @endif
                                @else
                                  <img src="{{ asset('public/uploads/'.$j->user_image)}}" style="width: 81px;">
                                @endif
                              @else 
                                <img src="{{ asset('public/assets/img/nophoto.jpeg')}}" style="width: 81px;">
                              @endif
                            </div>
                            <div class="col-sm-9 text-left">
                              <h5 class="mb-3"><a href="{{url('/userdetails/'.$j->id)}}">{{ $j->name }}</a></h5>
                              <p>{{ $j->skills }} </p> 
                            </div>
                          </div>
                        </div>

                        @endforeach
                      {{ $userdetaillist->links() }}                    
                </div> 
            </div>
          </div>
        </div>
    </main>

    <div class="modal" id="job-seeker">
      <div class="modal-dialog">
          <div class="modal-content">
        
            <div class="modal-header">
                <h4 class="modal-title">Reach out to us</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            
            <div class="contact-enquiry">
                <div class="contact-image">
                    <img src="https://csrability.com/public/assets/img/logo-big.png" style="width: 101px; height: 73px;border-radius: 0;margin-top: -6%;transform: inherit;background-color: #fff;" alt="" class="img-fluid">
                </div>
                <form action="{{ route('contactseeker') }}" method="post" enctype="multipart/form-data">
                @csrf()
                    <h3>For Placing Your Profile</h3>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <input type="text" name="name" class="form-control" placeholder="Your Name" value="" />
                            </div>
                            <div class="form-group">
                                <input type="email" name="email" class="form-control" placeholder="Your Email *" value="" required="" />
                            </div>
                            <div class="form-group">
                              <select name="organisation" class="form-control" id="getFname" onchange="feaSelectCheck(this);">
                                <option>--Select Organisation--</option>
                                <option id="feaOption" value="0">Others</option>
                                @foreach($organisations as $j)
                                  <option value="{{ $j }}">{{ $j }}</option>
                                @endforeach
                              </select>
                            </div>
                            <div class="form-group" id="feaDivCheck"></div>
                            <div class="form-group">
                                <input type="text" name="subject" class="form-control" placeholder="Your Subject *" value="" required="" />
                            </div>
                            <input type="hidden" name="mail_for" class="form-control" value="3"/>
                            <div class="form-group">
                                <textarea name="message" class="form-control" placeholder="Your Message" style="width: 100%; height: 150px;"></textarea>
                            </div>
                            <div class="form-group" style="margin-top: 15px;">
                                <div class="g-recaptcha" data-sitekey="{{env('CAPTCHA_KEY')}}"></div>
                                @if($errors->has('g-recaptcha-response'))
                                <span class="invalid-feedback" style="display: block;">
                                	<strong>{{ $errors->first('g-recaptcha-response') }}</strong>
                                </span>
                                @endif
                            </div>
                            <div class="form-group text-center">
                                <input type="submit" name="btnSubmit" class="btnContact" value="Send Message" />
                            </div>
                        </div>
                    </div>
                </form>
              </div>
          
          </div>
      </div>
  </div>

<!-- Content Area Ends Here -->

<script src="{{asset('public/assets/js/jQuery.3.3.1.min.js')}}"></script>

<script>
    function feaSelectCheck(featureSelect)
    {
        if(featureSelect){
            feaOptionValue = document.getElementById("feaOption").value;
            if(featureSelect.value == feaOptionValue){
                document.getElementById("feaDivCheck").textContent= "";
                document.getElementById("feaDivCheck").insertAdjacentHTML("afterbegin","<input type='text' name='organisation' class='form-control' placeholder='Organisation Name' />")
            }
            else{
                document.getElementById("feaDivCheck").textContent= "";
            }
        }
        else{
            document.getElementById("feaDivCheck").textContent= "";
        }
    }
</script>

<script>
    function seekSelectCheck(seekerSelect)
    {
        if(seekerSelect){
            seekOptionValue = document.getElementById("seekOption").value;
            if(seekerSelect.value == seekOptionValue){
                document.getElementById("seekDivCheck").textContent= "";
                document.getElementById("seekDivCheck").insertAdjacentHTML("afterbegin","<input type='text' name='organisation' class='form-control' placeholder='Organisation Name' />")
            }
            else{
                document.getElementById("seekDivCheck").textContent= "";
            }
        }
        else{
            document.getElementById("seekDivCheck").textContent= "";
        }
    }
</script>

@endsection