<style type="text/css">
  .alert-danger{
    font-size: 17px;
    text-align: center;
  }

  .modal.show .modal-dialog{
    max-width: 90%;
  }

    #ck-button {
    background-color:#28a745d6;
    border-radius: 4px;
    overflow: auto;
    width: fit-content;
    position: relative;
    bottom: 78px;
    left: -133px;
  }

  #ck-button:hover {
      background:#28a745;
  }

  #ck-button label {
    padding: 5px 12px;
    color: #fff;
    margin: 0px;
    font-size: 15px;
    font-weight: 100;
  }

  #ck-button label span {
      text-align:center;
      padding:3px 0px;
      display:block;
  }

  #ck-button label input {
      position:absolute;
      top:-20px;
  }

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("#myInterestArea").modal('show');
    });
</script>

@if($interest_count == 0) 
  <div id="myInterestArea" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body text-center">
              <main>
                <div class="container mt-5 custom-profile">
                   <div class="row">
                      <div class="col-md-12 text-center">
                         <h1>Interest Area</h1>
                         <h2>Select the topic you are interested in to help us personalize your CSR ability experience.</h2>
                      </div>
                   </div>
                       
                    <form action="{{ route('updateProfile.update') }}" method="post" enctype="multipart/form-data">
                      @csrf()
                      <div class="row">
                         <div class="col-md-3 text-center">
                            <div style="background-image: url({{asset('public/assets/img/interest/environment.png')}});" class="profile-image text-center"> 
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-1" type="checkbox" value="Environment & Natural Resources">
                               <label for="styled-checkbox-1"></label>
                            </div>
                            <p>Environment & Natural Resources</p>
                         </div>

                         <div class="col-md-3">
                            <div style="background-image: url({{asset('public/assets/img/interest/economic.png')}});" class="profile-image text-center">
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-2" type="checkbox" value="Economic Development">
                               <label for="styled-checkbox-2"></label>
                            </div>
                            <p>Economic Development</p>
                         </div>

                         <div class="col-md-3">
                            <div style="background-image: url({{asset('public/assets/img/interest/funding.png')}});" class="profile-image text-center">
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-3" type="checkbox" value="Funding">
                               <label for="styled-checkbox-3"></label>
                            </div>
                            <p>Funding</p>
                         </div>

                         <div class="col-md-3">
                            <div style="background-image: url({{asset('public/assets/img/interest/careers.png')}});" class="profile-image text-center">
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-4" type="checkbox" value="Careers & Education">
                               <label for="styled-checkbox-4"></label>
                            </div>
                            <p>Careers & Education</p>
                         </div>

                         <div class="col-md-3">
                            <div style="background-image: url({{asset('public/assets/img/interest/agriculture.png')}});" class="profile-image text-center">
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-5" type="checkbox" value="Agriculture & Rural Development">
                               <label for="styled-checkbox-5"></label>
                            </div>
                            <p>Agriculture & Rural Development</p>
                         </div>

                         <div class="col-md-3">
                            <div style="background-image: url({{asset('public/assets/img/interest/banking.png')}});" class="profile-image text-center">
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-6" type="checkbox" value="Banking & Finance">
                               <label for="styled-checkbox-6"></label>
                            </div>
                            <p>Banking & Finance</p>
                         </div>

                         <div class="col-md-3">
                            <div style="background-image: url({{asset('public/assets/img/interest/trade.png')}});" class="profile-image text-center">
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-7" type="checkbox" value="Trade & Policy">
                               <label for="styled-checkbox-7"></label>
                            </div>
                            <p>Trade & Policy</p>
                         </div>

                         <div class="col-md-3">
                            <div style="background-image: url({{asset('public/assets/img/interest/global.png')}});" class="profile-image text-center">
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-8" type="checkbox" value="Global Health">
                               <label for="styled-checkbox-8"></label>
                            </div>
                            <p>Global Health</p>
                         </div>

                         <div class="col-md-3">
                            <div style="background-image: url({{asset('public/assets/img/interest/energy.png')}});" class="profile-image text-center">
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-9" type="checkbox" value="Energy">
                               <label for="styled-checkbox-9"></label>
                            </div>
                            <p>Energy</p>
                         </div>

                         <div class="col-md-3">
                            <div style="background-image: url({{asset('public/assets/img/interest/infrastructure.png')}});" class="profile-image text-center">
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-10" type="checkbox" value="Infrastructure">
                               <label for="styled-checkbox-10"></label>
                            </div>
                            <p>Infrastructure</p>
                         </div>

                         <div class="col-md-3">
                            <div style="background-image: url({{asset('public/assets/img/interest/private.png')}});" class="profile-image text-center">
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-11" type="checkbox" value="Private Sector">
                               <label for="styled-checkbox-11"></label>
                            </div>
                            <p>Private Sector</p>
                         </div>

                         <div class="col-md-3">
                            <div style="background-image: url({{asset('public/assets/img/interest/institutional.png')}});" class="profile-image text-center">
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-12" type="checkbox" value="Institutional Development">
                               <label for="styled-checkbox-12"></label>
                            </div>
                            <p>Institutional Development</p>
                         </div>

                         <div class="col-md-3">
                            <div style="background-image: url({{asset('public/assets/img/interest/water.png')}});" class="profile-image text-center">
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-13" type="checkbox" value="Water & Sanitation">
                               <label for="styled-checkbox-13"></label>
                            </div>
                            <p>Water & Sanitation</p>
                         </div>

                         <div class="col-md-3">
                            <div style="background-image: url({{asset('public/assets/img/interest/project.png')}});" class="profile-image text-center">
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-15" type="checkbox" value="Project Managment">
                               <label for="styled-checkbox-15"></label>
                            </div>
                            <p>Project Managment</p>
                         </div>

                         <div class="col-md-3">
                            <div style="background-image: url({{asset('public/assets/img/interest/media.png')}});" class="profile-image text-center">
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-16" type="checkbox" value="Media & Communication">
                               <label for="styled-checkbox-16"></label>
                            </div>
                            <p>Media & Communication</p>
                         </div>
                      </div>
                      <div style="position: relative; left: 49px;">
                        <input type="submit" class="btn btn-primary mb-5 btn-lg" value="Submit" name="btn_btn_add_product">
                        <input type="button" class="btn btn-danger mb-5 btn-lg" value="Close" data-dismiss="modal">
                        <center>
                          <div id="ck-button">
                            <label>
                              <input type="checkbox" id="checkAll"><span>Check All</span>
                            </label>
                          </div>
                        </center>
                      </div>
                   </form>                 
                </div>
              </main>               
            </div>
        </div>
    </div>
  </div>
@endif

<div id="myInterestArea2" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body text-center">
              <main>
                <div class="container mt-5 custom-profile">
                   <div class="row">
                      <div class="col-md-12 text-center">
                         <h1>Interest Area</h1>
                         <h2>Select the topic you are interested in to help us personalize your CSR ability experience.</h2>
                      </div>
                   </div>
                       
                    <form action="{{ route('updateProfile.update') }}" method="post" enctype="multipart/form-data">
                      @csrf()
                      <div class="row">
                         <div class="col-md-3">
                            <div style="background-image: url({{asset('public/assets/img/interest/environment.png')}});" class="profile-image text-center"> 
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-1" type="checkbox" value="Environment & Natural Resources">
                               <label for="styled-checkbox-1"></label>
                            </div>
                            <p>Environment & Natural Resources</p>
                         </div>

                         <div class="col-md-3">
                            <div style="background-image: url({{asset('public/assets/img/interest/economic.png')}});" class="profile-image text-center">
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-2" type="checkbox" value="Economic Development">
                               <label for="styled-checkbox-2"></label>
                            </div>
                            <p>Economic Development</p>
                         </div>

                         <div class="col-md-3">
                            <div style="background-image: url({{asset('public/assets/img/interest/funding.png')}});" class="profile-image text-center">
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-3" type="checkbox" value="Funding">
                               <label for="styled-checkbox-3"></label>
                            </div>
                            <p>Funding</p>
                         </div>

                         <div class="col-md-3">
                            <div style="background-image: url({{asset('public/assets/img/interest/careers.png')}});" class="profile-image text-center">
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-4" type="checkbox" value="Careers & Education">
                               <label for="styled-checkbox-4"></label>
                            </div>
                            <p>Careers & Education</p>
                         </div>

                         <div class="col-md-3">
                            <div style="background-image: url({{asset('public/assets/img/interest/agriculture.png')}});" class="profile-image text-center">
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-5" type="checkbox" value="Agriculture & Rural Development">
                               <label for="styled-checkbox-5"></label>
                            </div>
                            <p>Agriculture & Rural Development</p>
                         </div>

                         <div class="col-md-3">
                            <div style="background-image: url({{asset('public/assets/img/interest/banking.png')}});" class="profile-image text-center">
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-6" type="checkbox" value="Banking & Finance">
                               <label for="styled-checkbox-6"></label>
                            </div>
                            <p>Banking & Finance</p>
                         </div>

                         <div class="col-md-3">
                            <div style="background-image: url({{asset('public/assets/img/interest/trade.png')}});" class="profile-image text-center">
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-7" type="checkbox" value="Trade & Policy">
                               <label for="styled-checkbox-7"></label>
                            </div>
                            <p>Trade & Policy</p>
                         </div>

                         <div class="col-md-3">
                            <div style="background-image: url({{asset('public/assets/img/interest/global.png')}});" class="profile-image text-center">
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-8" type="checkbox" value="Global Health">
                               <label for="styled-checkbox-8"></label>
                            </div>
                            <p>Global Health</p>
                         </div>

                         <div class="col-md-3">
                            <div style="background-image: url({{asset('public/assets/img/interest/energy.png')}});" class="profile-image text-center">
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-9" type="checkbox" value="Energy">
                               <label for="styled-checkbox-9"></label>
                            </div>
                            <p>Energy</p>
                         </div>

                         <div class="col-md-3">
                            <div style="background-image: url({{asset('public/assets/img/interest/infrastructure.png')}});" class="profile-image text-center">
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-10" type="checkbox" value="Infrastructure">
                               <label for="styled-checkbox-10"></label>
                            </div>
                            <p>Infrastructure</p>
                         </div>

                         <div class="col-md-3">
                            <div style="background-image: url({{asset('public/assets/img/interest/private.png')}});" class="profile-image text-center">
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-11" type="checkbox" value="Private Sector">
                               <label for="styled-checkbox-11"></label>
                            </div>
                            <p>Private Sector</p>
                         </div>

                         <div class="col-md-3">
                            <div style="background-image: url({{asset('public/assets/img/interest/infrastructure.png')}});" class="profile-image text-center">
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-12" type="checkbox" value="Institutional Development">
                               <label for="styled-checkbox-12"></label>
                            </div>
                            <p>Institutional Development</p>
                         </div>

                         <div class="col-md-3">
                            <div style="background-image: url({{asset('public/assets/img/interest/water.png')}});" class="profile-image text-center">
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-13" type="checkbox" value="Water & Sanitation">
                               <label for="styled-checkbox-13"></label>
                            </div>
                            <p>Water & Sanitation</p>
                         </div>

                         <div class="col-md-3">
                            <div style="background-image: url({{asset('public/assets/img/interest/project.png')}});" class="profile-image text-center">
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-15" type="checkbox" value="Project Managment">
                               <label for="styled-checkbox-15"></label>
                            </div>
                            <p>Project Managment</p>
                         </div>

                         <div class="col-md-3">
                            <div style="background-image: url({{asset('public/assets/img/interest/media.png')}});" class="profile-image text-center">
                               <input class="styled-checkbox" name="interest_area[]" id="styled-checkbox-16" type="checkbox" value="Media & Communication">
                               <label for="styled-checkbox-16"></label>
                            </div>
                            <p>Media & Communication</p>
                         </div>
                      </div>
                      <div style="position: relative; left: 49px;">
                        <input type="submit" class="btn btn-primary mb-5 btn-lg" value="Submit" name="btn_btn_add_product">
                        <input type="button" class="btn btn-danger mb-5 btn-lg" value="Close" data-dismiss="modal">
                        <center>
                          <div id="ck-button">
                            <label>
                              <input type="checkbox" id="checkAll"><span>Check All</span>
                            </label>
                          </div>
                        </center>
                      </div>
                   </form>                 
                </div>
              </main>               
            </div>
        </div>
    </div>
  </div>

@extends('front.template.master')
@section('content')


  <main id="content">
    <div class="container mt-5">

      <div class="text-center">
          @include('front.partials.flash_message')
      </div>

      <div class="alert alert-danger alert-dismissible pt-4" role="alert" style="height: 65px;">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        Upgrade your <strong>Subscription Plan !</strong> <a href="{{ route('usersubscription') }}"> Click here....</a>
      </div>

      <?php 

        if($userInfo->name != ""){
          $width1 = 10;
        }else{
          $width1 = 0;
        }

        if($userInfo->location != ""){
          $width2 = 10;
        }else{
          $width2 = 0;
        }

        if($userInfo->expyear != ""){
          $width3 = 5;
        }else{
          $width3 = 0;
        }

        if($userInfo->avail != ""){
          $width4 = 5;
        }else{
          $width4 = 0;
        }

        if($userInfo->citizen != ""){
          $width5 = 5;
        }else{
          $width5 = 0;
        }

        if($userInfo->language != ""){
          $width6 = 10;
        }else{
          $width6 = 0;
        }

        if($userInfo->skills != ""){
          $width7 = 10;
        }else{
          $width7 = 0;
        }

        if($userInfo->expertise != ""){
          $width8 = 5;
        }else{
          $width8 = 0;
        }

        if($userInfo->email != ""){
          $width9 = 10;
        }else{
          $width9 = 0;
        }

        if($userInfo->contact != ""){
          $width10 = 10;
        }else{
          $width10 = 0;
        }

        if($userInfo->landline != ""){
          $width11 = 5;
        }else{
          $width11 = 0;
        }

        if($userInfo->referrer != ""){
          $width12 = 5;
        }else{
          $width12 = 0;
        }

        if($interest_count != 0){
          $width13 = 10;
        }else{
          $width13 = 0;
        }        

        $percentage = ($width1+$width2+$width3+$width4+$width5+$width6+$width7+$width8+$width9+$width10+$width11+$width12+$width13);
        // echo "Your percentage of profile completenes is".$percentage."%";

      ?> 

      <div class="row">

        <div class="col-md-8 px-5">

          <div class="row progress-section">

            <div class="col-md-12 progress-area">

              <h5> Profile Completeness </h5>

              <div class="progress">

                <div class="progress-bar" role="progressbar" aria-valuenow="{{ $percentage }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ $percentage }}%">

                  <p style="left: {{ $percentage }}%;"> {{ $percentage }}% </p>

                </div>                    

              </div>

              <p class="complete-progress"> 100% </p>

            </div>



            {{-- <div class="col-md-12">

              <div class="row pt-4">

                <div class="col-md-6">

                  <div class="row">

                    <div class="col-4 text-right">

                      <h2> 13 </h2>

                    </div>

                    <div class="col-8 text-left">

                      <h4> Profile Views </h4>

                      <p> in last 30 days</p>

                    </div>

                  </div>

                </div>

                <div class="col-md-6">

                  <div class="row">

                    <div class="col-4 text-right">

                      <h2> 45 </h2>

                    </div>

                    <div class="col-8 text-left">

                      <h4> Search Appearances </h4>

                      <p> in last 30 days</p>

                    </div>

                  </div>

                </div>

              </div>

            </div> --}}

          </div>

          <div class="row personal-section">
            <div class="col-md-8 text-left">
              <h5> Fetch details from LinkedIn </h5>
            </div>
            <div class="col-md-4 text-right">
              <h5> <button class="btn btn-primary ml-5"> Fetch </button> </h5>
            </div>
          </div>

          <div class="row personal-section">

            <div class="col-md-8 text-left">
              <h5> Personal Information </h5>
            </div>

            <div class="col-md-4 text-right button1">
              <button class="btn-edit btn btn-primary"> Edit </button>
              <button class="btn-save btn btn-success hide"> Save </button>
            </div>

            <div class="col-md-12 edit1">
              <div class="row">
                <div class="col-md-2"> 
                  @if(auth()->user()->user_image !='')            
                    @if($userInfo->google_id !='' || $userInfo->facebook_id !='' || $userInfo->linkedin_id !='') 
                      @if(File::exists(public_path('uploads/'.$userInfo->user_image)))
                        <img src="{{ asset('public/uploads/'.auth()->user()->user_image) }}" id="imagePreview">
                      @else
                        <img src="{{ $userInfo->user_image }}" style="width: 100%;" id="imagePreview">
                      @endif
                    @else
                      <img src="{{ asset('public/uploads/'.auth()->user()->user_image)}}" id="imagePreview">
                    @endif
                  @else 
                    <img src="{{ asset('public/assets/img/nophoto.jpeg')}}" id="imagePreview">
                  @endif
                  <input type="file" name="user-image" id="imageUpload" accept=".png,.jpg,.jpeg" class="hide" required> 
                  <center><label for="imageUpload" class="upload-poster" style="margin-top: 5px; padding: 2px 5px;">Select file</label> Max Size 2 MB</center>
                </div>

                <div class="col-md-10">
                  <div class="form-group">
                    <input type="text" class="user-name" value="{{$userInfo->name}}" readonly="true" style="border: none;" />
                  </div>

                  <div class="form-group">
                    <input type="text" class="user-location" value="{{$userInfo->location}}" readonly="true" style="border: none;" />
                  </div>
               </div>
             </div>
           </div>
          </div>

          <div class="row personal-section" id="personalize-section">
            <div class="col-md-8 text-left">
              <h5> Professional Summary </h5>
            </div>

            <div class="col-md-4 text-right button2">
              <button class="btn-edit1 btn btn-primary"> Edit </button>
              <button class="btn-save1 btn btn-success hide"> Save </button>
            </div>

            <div class="col-md-12 edit2 mt-3">

              <div class="row">
                <div class="col-md-6">
                  <div class="form-group update-profile">
                    <label class="col-md-5"> Years of Exp. : </label>
                    <input type="number" class="exp-years col-md-6" value="{{$userInfo->expyear}}" readonly="true" style="border: none;" />
                  </div>

                  <div class="form-group update-profile">
                    <label class="col-md-5"> Availability : </label>
                    <input type="text" class="avail col-md-6" value="{{$userInfo->avail}}" readonly="true" style="border: none;" />
                  </div>
                </div>

                <div class="col-md-6">

                  <div class="form-group update-profile">
                    <label class="col-md-5"> Citizenships : </label>
                    <input type="text" class="citizen col-md-6" value="{{$userInfo->citizen}}" readonly="true" style="border: none;" />
                  </div>

                  <div class="form-group update-profile">
                    <label class="col-md-5"> Languages : </label>
                    <input type="text" class="language col-md-6" value="{{$userInfo->language}}" readonly="true" style="border: none;" />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row personal-section" id="skills-section">

            <div class="col-md-8 text-left">
              <h5> Skills & Expertise </h5>
            </div>

            <div class="col-md-4 text-right button3">
              <button class="btn-edit2 btn btn-primary"> Edit </button>
              <button class="btn-save2 btn btn-success hide"> Save </button>
            </div>

            <div class="col-md-12 edit3 mt-3">

              <div class="form-group update-profile">
                <label class="col-md-4"> Skills : </label>
                <textarea class="skills col-md-6" row="3" readonly="true" style="border: none; width: 60%;">{{$userInfo->skills}}</textarea>
              </div>

              <div class="form-group update-profile">
                <label class="col-md-4"> Area of Expertise : </label>
                <textarea class="expertise col-md-6" row="3" readonly="true" style="border: none; width: 60%;">{{$userInfo->expertise}}</textarea>
              </div>

            </div>
          </div>


          <div class="row personal-section" id="contact-section">

            <div class="col-md-8 text-left">
              <h5> Contact Details </h5>
            </div>

            <div class="col-md-4 text-right button4">
              <button class="btn-edit3 btn btn-primary"> Edit </button>
              <button class="btn-save3 btn btn-success hide"> Save </button>
           </div>

            <div class="col-md-12 edit4 mt-3">

              <div class="form-group update-profile">
                <label class="col-md-4"> Email Id : </label>
                <input type="email" class="email col-md-6" value="{{$userInfo->email}}" readonly="true" style="border: none; width: 60%;" />
              </div>

              <div class="form-group update-profile">
                <label class="col-md-4"> Mobile No. : </label>
                <input type="number" class="contact col-md-6" value="{{$userInfo->contact}}" readonly="true" style="border: none; width: 60%;" />
              </div>

              <div class="form-group update-profile">
                <label class="col-md-4"> Landline No. : </label>
                <input type="number" class="landline col-md-6" value="{{$userInfo->landline}}" readonly="true" style="border: none; width: 60%;" />
              </div>

            </div>
          </div>

          <div class="row personal-section mb-5" id="reference-section">
            <div class="col-md-8 text-left">
              <h5> Reference </h5>
            </div>

            <div class="col-md-4 text-right button5">
              <button class="btn-edit4 btn btn-primary"> Edit </button>
              <button class="btn-save4 btn btn-success hide"> Save </button>
            </div>

            <div class="col-md-12 edit5 mt-3">
              <div class="form-group update-profile">
                <label class="col-md-4"> Reference : </label>
                <input type="text" class="referrer col-md-6" value="{{$userInfo->referrer}}" readonly="true" style="border: none; width: 60%;" />
              </div>
            </div>
          </div>

          <div class="row personal-section mb-5" id="savedjobs-section">
            <div class="col-md-8 text-left">
              <h5> Saved Jobs </h5>
            </div>

            <div class="col-md-12 edit5">
              <ul style="list-style-type: decimal;">

              @foreach($jobdetails as $c)              
                <li class="mt-3">
                  <a href="{{url('/jobdetails/'.$c->id)}}" target="_blank">{{ $c->job_title }}</a>
                </li>              
              @endforeach

              </ul>
            </div>
          </div>

          <div class="row personal-section mb-5" id="appliedjobs-section">
            <div class="col-md-8 text-left">
              <h5> Applied Jobs </h5>
            </div>

            <div class="col-md-12 edit5">
              <ul style="list-style-type: decimal;">

              @foreach($jobapplieddetails as $c)              
                <li class="mt-3">
                  <a href="{{url('/jobdetails/'.$c->id)}}" target="_blank">{{ $c->job_title }}</a>
                </li>              
              @endforeach

              </ul>
            </div>
          </div>

          <div class="row personal-section mb-5" id="interest-section">
            <div class="col-md-8 text-left">
              <h5> Interest Area </h5>
            </div>

            <div class="col-md-4 text-right">
              <a data-toggle="modal" data-target="#myInterestArea2">
                <button class="btn btn-primary"> Add </button>
              </a>
            </div>

            <div class="col-md-12 edit5">
              <ul style="list-style-type: decimal;">

              @foreach($interest_area as $c)              
                <li class="mt-3">
                  {{ $c->interest_area }} 
                  <a href="{{ route('auth.remove.interest', $c->id) }}" onclick="return confirm('Are you sure to Delete this Interest Area ?');" data-toggle="tooltip" data-placement="top" title="Delete">
                    <i class="fa fa-times text-danger"></i>
                  </a>
                </li>              
              @endforeach

              </ul>
            </div>
          </div>         
        </div>

        <div class="col-md-4">
          <div class="sidebar-area">
            <h5> Contact Details </h5>
            <a href="#personalize-section"> <p> Professional Summary </p> </a>
            <a href="#skills-section"> <p> Skills & Expertise </p> </a>
            <a href="#contact-section"> <p> Contact Details </p> </a>
            <a href="#reference-section"> <p> References </p> </a>
            <a href="#savedjobs-section"> <p> Saved Jobs </p> </a>
            <a href="#appliedjobs-section"> <p> Applied Jobs </p> </a>
            <a href="#interest-section"> <p> Interest Area </p> </a>
          </div>
          
          <div class="sidebar-area">
            <h5> Settings </h5>
            <a href="{{ route('change_passsword') }}"><p> Change Password </p></a>
          </div>
        </div>
      </div>

    </div>
  </main>

    <div class="modal" id="myInterest">
      <div class="modal-dialog">
          <div class="modal-content">
        
            <div class="modal-header">
                <h4 class="modal-title">Feedback</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            
            <div class="contact-enquiry">
                <div class="contact-image">
                    <img src="https://unilinkindia.co.in/csrability.co/public/assets/img/rocket_contact.png" alt="rocket_contact"/>
                </div>
                <form action="{{ route('storefeedback') }}" method="post" enctype="multipart/form-data">
                @csrf()
                    <h3>Drop Us a Message</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">
                                <input type="number" name="contact" class="form-control" placeholder="Your Phone Number *" value="" required="" />
                            </div>
                            <div class="form-group">
                                <input type="text" name="subject" class="form-control" placeholder="Your Subject *" value="" required="" />
                            </div>
                            <div class="form-group">
                                <textarea name="message" class="form-control" placeholder="Your Message" style="width: 100%; height: 150px;"></textarea>
                            </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>

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

<script type="text/javascript">
  $("#checkAll").click(function () {
    $(".styled-checkbox").prop('checked', $(this).prop('checked'));
  });
</script>

<script type="text/javascript">
   $('.btn-edit').on('click', function(){
      let $this = $(this);

      $this.parents('.button1 ').siblings('.edit1').find('input[type="text"][class="user-name"]').prop('contenteditable', true);
      $(".user-name").attr('readonly',false);
      $(".user-name").css({"border": "2px solid var(--primary)", "padding": "5px"});

      $this.parents('.button1 ').siblings('.edit1').find('input[type="text"][class="user-location"]').prop('contenteditable', true);
      $(".user-location").attr('readonly',false);
      $(".user-location").css({"border": "2px solid var(--primary)", "padding": "5px"});

      $this.addClass('hide');
      $this.parents('.button1').find('.btn-save').removeClass('hide');

   });

   $('.btn-save').on('click', function(){

      let $this = $(this);
      var name = $('.user-name').val();
      var location = $('.user-location').val();


      $.ajax({
         'url' : "{{ route('profile.save') }}",
         'type' :'post',
         'data':{'name':name, 'location':location, '_token': "{{ csrf_token() }}" },
         success : function(data){
            console.log(data.message);
              $(".user-name").css({"border": "none", "padding": "0px"});
              $(".user-location").css({"border": "none", "padding": "0px"});

            $this.addClass('hide');
            $this.parents('.button1').find('.btn-edit').removeClass('hide');
         }

      })
   });


   $('input[type="file"][name="user-image"]').on("change", function(e){

   console.log($(this)[0].files[0]);
   var formData = new FormData();
   formData.append('user-image', $(this)[0].files[0]);
   formData.append('_token', "{{ csrf_token() }}");

   $.ajax({
      type:'POST',
      url: "{{ route("profile.image.save") }}",
      data:formData,
      cache:false,
      contentType: false,
      processData: false,
      success:function(data){
          console.log("success");
          console.log(data);
      },
      error: function(data){
          console.log("error");
          console.log(data);
      }
  });


})



</script>


<script type="text/javascript">
   $('.btn-edit1').on('click', function(){
      let $this = $(this);

      $this.parents('.button2 ').siblings('.edit2').find('input[type="text"][class="exp-years"]').prop('contenteditable', true);
      $(".exp-years").attr('readonly',false);
      $(".exp-years").css({"border": "2px solid var(--primary)", "padding": "5px"});

      $this.parents('.button2 ').siblings('.edit2').find('input[type="text"][class="avail"]').prop('contenteditable', true);
      $(".avail").attr('readonly',false);
      $(".avail").css({"border": "2px solid var(--primary)", "padding": "5px"});

      $this.parents('.button2 ').siblings('.edit2').find('input[type="text"][class="citizen"]').prop('contenteditable', true);
      $(".citizen").attr('readonly',false);
      $(".citizen").css({"border": "2px solid var(--primary)", "padding": "5px"});

      $this.parents('.button2 ').siblings('.edit2').find('input[type="text"][class="language"]').prop('contenteditable', true);
      $(".language").attr('readonly',false);
      $(".language").css({"border": "2px solid var(--primary)", "padding": "5px"});

      $this.addClass('hide');
      $this.parents('.button2').find('.btn-save1').removeClass('hide');

   });

   $('.btn-save1').on('click', function(){

      let $this = $(this);
      var expyear = $('.exp-years').val();
      var avail = $('.avail').val();
      var citizen = $('.citizen').val();
      var language = $('.language').val();


      $.ajax({
         'url' : "{{ route('profile1.save') }}",
         'type' :'post',
         'data':{'expyear':expyear, 'avail':avail, 'citizen':citizen, 'language':language, '_token': "{{ csrf_token() }}" },
         success : function(data){
            console.log(data.message);
            $(".exp-years").css({"border": "none", "padding": "0px"});
            $(".avail").css({"border": "none", "padding": "0px"});
            $(".citizen").css({"border": "none", "padding": "0px"});
            $(".language").css({"border": "none", "padding": "0px"});

            $this.addClass('hide');
            $this.parents('.button2').find('.btn-edit1').removeClass('hide');
         }

      })
   });

</script>

<script type="text/javascript">
   $('.btn-edit2').on('click', function(){
      let $this = $(this);

      $this.parents('.button3 ').siblings('.edit3').find('input[type="text"][class="skills"]').prop('contenteditable', true);
      $(".skills").attr('readonly',false);
      $(".skills").css({"border": "2px solid var(--primary)", "padding": "5px"});

      $this.parents('.button3 ').siblings('.edit3').find('input[type="text"][class="expertise"]').prop('contenteditable', true);
      $(".expertise").attr('readonly',false);
      $(".expertise").css({"border": "2px solid var(--primary)", "padding": "5px"});

      $this.addClass('hide');
      $this.parents('.button3').find('.btn-save2').removeClass('hide');

   });

   $('.btn-save2').on('click', function(){

      let $this = $(this);
      var skills = $('.skills').val();
      var expertise = $('.expertise').val();


      $.ajax({
         'url' : "{{ route('profile2.save') }}",
         'type' :'post',
         'data':{'skills':skills, 'expertise':expertise, '_token': "{{ csrf_token() }}" },
         success : function(data){
            console.log(data.message);
            $(".skills").css({"border": "none", "padding": "0px"});
            $(".expertise").css({"border": "none", "padding": "0px"});

            $this.addClass('hide');
            $this.parents('.button3').find('.btn-edit2').removeClass('hide');
         }

      })
   });

</script>

<script type="text/javascript">
   $('.btn-edit3').on('click', function(){
      let $this = $(this);

      $this.parents('.button4 ').siblings('.edit4').find('input[type="number"][class="contact"]').prop('contenteditable', true);
      $(".contact").attr('readonly',false);
      $(".contact").css({"border": "2px solid var(--primary)", "padding": "5px"});

      $this.parents('.button4 ').siblings('.edit4').find('input[type="number"][class="landline"]').prop('contenteditable', true);
      $(".landline").attr('readonly',false);
      $(".landline").css({"border": "2px solid var(--primary)", "padding": "5px"});

      $this.addClass('hide');
      $this.parents('.button4').find('.btn-save3').removeClass('hide');

   });

   $('.btn-save3').on('click', function(){

      let $this = $(this);
      var contact = $('.contact').val();
      var landline = $('.landline').val();

      $.ajax({
         'url' : "{{ route('profile3.save') }}",
         'type' :'post',
         'data':{'contact':contact, 'landline':landline, '_token': "{{ csrf_token() }}" },
         success : function(data){
            console.log(data.message);
            $(".contact").css({"border": "none", "padding": "0px"});
            $(".landline").css({"border": "none", "padding": "0px"});
            $this.addClass('hide');
            $this.parents('.button4').find('.btn-edit3').removeClass('hide');
         }

      })
   });

</script>


<script type="text/javascript">
   $('.btn-edit4').on('click', function(){
      let $this = $(this);

      $this.parents('.button5 ').siblings('.edit5').find('input[type="text"][class="referrer"]').prop('contenteditable', true);
      $(".referrer").attr('readonly',false);
      $(".referrer").css({"border": "2px solid var(--primary)", "padding": "5px"});

      $this.addClass('hide');
      $this.parents('.button5').find('.btn-save4').removeClass('hide');

   });

   $('.btn-save4').on('click', function(){

      let $this = $(this);
      var referrer = $('.referrer').val();


      $.ajax({
         'url' : "{{ route('profile4.save') }}",
         'type' :'post',
         'data':{'referrer':referrer, '_token': "{{ csrf_token() }}" },
         success : function(data){
            console.log(data.message);
            $(".referrer").css({"border": "none", "padding": "0px"});

            $this.addClass('hide');
            $this.parents('.button5').find('.btn-edit4').removeClass('hide');
         }

      })
   });


   $

</script>

@endsection