@extends('frontend.layouts.main')

@section('content')

<main class="home">
  <!-- Banner section -->
  @if($jobs->banner)
  <section class="bs-banner typ-job-details set-bg" data-img="{{$jobs->banner}}">
  </section>
  @else
  <section class="bs-banner typ-job-details set-bg" data-img="assets/images/job-listing/job-details-banner.jpg">
  </section>
  @endif
  <!-- Featured -->
  <section class="mod-featured position-relative">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="contet-wrapper">
            <div class="logo-wrapper wow fadeInUp" data-wow-duration="0.4s">
              <img class="c-logo" src="{{$jobs->logo}}" alt="logo">
            </div>
            <div class="row">
              <div class="col-lg-8 col-md-6">
                <div class="details-section">
                  <div class="company-details wow fadeInUp" data-wow-duration="0.6s">
                    @if($jobs->is_featured == 1)
                    <div class="ribon">Featured</div>
                    @endif
                    <h2 class="designation">{{$jobs->title}}</h2>
                    <p class="post">{{$jobs->designation_name}} - {{$jobs->employee_types_name}}</p>
                    <span class="location"><span class="icon icon-map-icon"></span> {{$jobs->city_name}}</span>
                  </div>
                </div>
              </div>
              <div class="col-lg-4 col-md-6 align-self-center">
                <div class="btn-sec wow fadeInUp" data-wow-duration="0.6s">
                  <!-- <div class="apply-btn-group ">
                    <a href="#" class="saveBtn"><span class="icon icon-save1"></span></a>
                    <a href="{{ route('job.onboarding',[$jobs->id]) }}" class="apply-btn bs-btn typ-apply-arrow">Apply
                      now <span class="icon icon-right-arrow"></span></a>
                  </div> -->


                  <div class="apply-btn-group">
                  @if(auth()->check())
                        @if($application)
                            <a href="javascript:void(0);" onclick="saveJob()" class="saveBtn {{ $saveedJob ? 'active' : '' }}"><span class="icon icon-save1"></span></a>
                            <span class="apply-btn bs-btn typ-green-arrow">Applied<span class="icon icon-check-sucess"></span></span>
                        @elseif($jobsurvey)
                            @if($userProfile)
                                <a href="javascript:void(0);" onclick="saveJob()" class="saveBtn {{ $saveedJob ? 'active' : '' }}"><span class="icon icon-save1"></span></a>
                                <a href="{{ route('job.onboarding', [$jobs->id]) }}" class="apply-btn bs-btn typ-apply-arrow">Apply now <span class="icon icon-right-arrow"></span></a>
                            @else
                                <a href="javascript:void(0);" onclick="saveJob()" class="saveBtn {{ $saveedJob ? 'active' : '' }}"><span class="icon icon-save1"></span></a>
                                <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#exampleModal" class="apply-btn bs-btn typ-apply-arrow">Apply now <span class="icon icon-right-arrow"></span></a>
                            @endif
                        @else
                            @if($userProfile)
                            <a href="javascript:void(0);" onclick="saveJob()" class="saveBtn {{ $saveedJob ? 'active' : '' }}"><span class="icon icon-save1"></span></a>
                                <form method="POST" action="{{ route('jobApplication.Store', [$jobs->id]) }}">
                                    @csrf
                                    <button type="submit" class="apply-btn bs-btn typ-apply-arrow">Apply now <span class="icon icon-right-arrow"></span></button>
                                </form>
                            @else
                                <a href="javascript:void(0);" onclick="saveJob()" class="saveBtn {{ $saveedJob ? 'active' : '' }}"><span class="icon icon-save1"></span></a>
                                <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#exampleModal" class="apply-btn bs-btn typ-apply-arrow">Apply now <span class="icon icon-right-arrow"></span></a>
                            @endif
                        @endif
                    @else
                        <a href="{{ route('signin') }}" class="saveBtn"><span class="icon icon-save1"></span></a>
                        <a href="{{ route('signin') }}" class="apply-btn bs-btn typ-apply-arrow">Apply now <span class="icon icon-right-arrow"></span></a>
                    @endif

                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- Featured end -->

  {{-- <div class="bs-toast d-none" id="courceSucces" style="position: fixed; top: 50px; left: 0; right: 10px; z-index: 9999;">
                        <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
                            <div class="toast-header">
                                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                                <div class="img">
                                    <img src="{{asset('assets/images/toastersvg.svg')}}" alt="toastersvg">
                                </div>
                                <div class="txt-wrapper" style="display: block;">
                                    <h5 class="me-auto" id="courceSuccesmsg"></h5>
                                </div>
                            </div>
                        </div>
                    </div> --}}


                    {{-- <div class="toast-container position-absolute  end-0 p-3" style="top:50px;">
                        <div class="toast" role="alert" id="courceSucces" aria-live="assertive" aria-atomic="true">
                          <div class="toast-header">
                            <img src="{{asset('assets/images/toastersvg.svg')}}" class="rounded me-2" alt="...">
                            <strong class="me-auto">Bootstrap</strong>
                            <small class="text-muted">just now</small>
                            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                          </div>
                          <div class="toast-body" id="courceSuccesmsg">
                          </div>
                        </div>
                      </div> --}}


                      <div class="bs-toast toast-container position-fixed end-0 p-3 w-100" style="top:70px;">
                        <div class="toast" role="alert" id="courceSucces" aria-live="assertive" aria-atomic="true">
                            <div class="toast-header">
                                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                                <div class="img">
                                    <img src="{{asset('assets/images/toastersvg.svg')}}" alt="toastersvg">
                                </div>
                                <div class="txt-wrapper">
                                    <h5 class="me-auto" id="courceSuccesmsg"></h5>
                                </div>
                            </div>
                          </div>
                        </div>


  <div class="bs-modal congratulation-modal">
            <div class="modal " id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                aria-hidden="false">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <span class="icon icon-Close-circle" data-bs-dismiss="modal" aria-label="Close"></span>
                        </div>
                        <div class="modal-body">
                            <div class="congrats-img">
                                <img src="{{env('APP_URL')}}assets/images/logo.svg" alt="congrats" class="img-fluid">
                            </div>
                            <!-- <h2 class="congrats">Congratulation</h2> -->
                            <h5 class="congratsPara typ-img-flexCenter">
                                Kindly complete your profile to proceed with the job application.
                            </h5>
                        </div>
                        <div class="modal-footer job-detailmodel">
                            <a href="{{ route('user.dashboard') }}" class="apply-btn bs-btn typ-apply-arrow">Continue </a>

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

  <!-- details  -->
  <section class="lyt-section typ-job-details-requirement">
    <div class="container">
      <div class="row">
        <div class="col-xl-7 col-lg-6 wow fadeInUp" data-wow-duration="0.2s">
          <div class="bs-list-details max-700">
            <h5 class="title">About the role</h5>
            {!! $jobs->about_role !!}
            <!-- <ul>
              <li>Responsible for executing client-related engagements in the areas of governance, risk & compliance,
                internal audits, process reviews, standard operating procedures, and revenue assurance.</li>
              <li>Manage Audits on a day-to-day basis & prepare the reports periodically.</li>
              <li>Maintain audit working papers and report the findings/recommendations to engagement partners and
                management responses.</li>
              <li>Provide timely communications of progress, audit issues, potential roadblocks, etc. to Audit Partner
              </li>
            </ul> -->
          </div>
          <div class="bs-list-details max-700 wow fadeInUp" data-wow-duration="0.2s">
            <h5 class="title">Roles and responsibilities</h5>
            {!! $jobs->roles_responsibilities !!}
            <!-- <ul>
              <li>Work with CFO</li>
              <li>Prepare balance sheet</li>
              <li>File Gst returns</li>
              <li>File claims</li>
            </ul> -->
          </div>
          <div class="bs-list-details max-700">
            <h5 class="title">Eligibility</h5>
            {!! $jobs->eligibility !!}
            <!-- <ul>
              <li>CA (0-3 years of experience)</li>
              <li>Semi-qualified CA (2-5 years of experience) </li>
              <li>Commerce Graduates (5-7 years of experience )</li>
            </ul> -->
          </div>
          <div class="bs-list-details max-700">
            <h5 class="title">Required Skills</h5>
            {!! $jobs->required_skills !!}
            <!-- <ul>
              <li>Accounts</li>
              <li>Tax filing</li>
              <li>Communication</li>
              <li>Documentation</li>
            </ul> -->
          </div>
          <div class="bs-list-details max-700 typ-para">
            <h5 class="title">About the company</h5>
            <div class="para">{!! $jobs->company_description !!}</div>
          </div>
        </div>
        <div class="col-xl-5 col-lg-6">
          <div class="job-overview">
            <div class="bs-list-details typ-salary">
              <div class="row">
                <div class="col-6">
                  <div class="salary">
                    <p class="hd">Salary (INR)</p>
                    <p class="unit"><span>₹</span> {{$jobs->salary_from}}-{{$jobs->salary_to}} LPA</p>
                    <p class="year">Yearly salary</p>
                  </div>
                </div>
                <div class="col-6">
                  <div class="map">
                    <span class="icon icon-job-location"><span class="path1"></span><span class="path2"></span><span
                        class="path3"></span><span class="path4"></span><span class="path5"></span><span
                        class="path6"></span></span>
                    <h5 class="title">Job Location</h5>
                    <p class="location">{{$jobs->city_name}}</p>
</div>
                </div>
              </div>
            </div>
            <div class="bs-list-details typ-icons">
              <div class="padding24">
                <h3 class="title">Job Overview</h3>
                <div class="icon-wrapper row">
                  <div class="col-md-4 col-6">
                    <div class="icon-section">
                      <div class="icon-area typ-yellow">
                        <span class="icon icon-date"></span>
                      </div>
                      <p class="position">Job Posted: <span class="level">{{date('M d,Y',
                          strtotime($jobs->start_date))}}</span></p>
                    </div>
                  </div>
                  <div class="col-md-4 col-6">
                    <div class="icon-section">
                      <div class="icon-area typ-lavender">
                        <span class="icon icon-watch"></span>
                      </div>
                      <p class="position">Job expire in: <span class="level">{{date('M d,Y',
                          strtotime($jobs->end_date))}}</span></p>
                    </div>
                  </div>
                  <div class="col-md-4 col-6">
                    <div class="icon-section">
                      <div class="icon-area typ-yellowLight">
                        <span class="icon icon-job-level"></span>
                      </div>
                      <p class="position">Job Level: <span class="level">{{$jobs->job_level_title}}</span></p>
                    </div>
                  </div>
                  <div class="col-md-4 col-6">
                    <div class="icon-section">
                      <div class="icon-area typ-green">
                        <span class="icon icon-tai"></span>
                      </div>
                      <p class="position">Experience <span class="level">{{$jobs->experience}} Years</span></p>
                    </div>
                  </div>
                  <div class="col-md-4 col-6">
                    <div class="icon-section">
                      <div class="icon-area typ-blueLight">
                        <span class="icon icon-degree"></span>
                      </div>
                      <p class="position">Education <span class="level">{{$jobs->education_name}}</span></p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="line"></div>
              <div class="padding24">
                  <h4 class="title mrgB8">Share this job:</h4>
                  <div class="copy-links">
                      <!-- <a href=""><span class="links copy-link"><span class="icon icon-attachment"></span>Copy Link</span></a>
                     -->
                     <span class="links" id="copyLink" data-bs-toggle="tooltip" data-bs-placement="bottom"
                      data-bs-title="Link Copied!" onclick="copyLink()"><span class="icon icon-attachment"></span>Copy
                      Link</span>
                      <ul class="icon-list">
                          <li><a class="facebook" href="#"><span class="icon icon-facebook"></span></a></li>
                          <li class="linkdin"><a class="" href="#"><span class="icon icon-linkdin"></span></a></li>
                          <li class="twitter"><a class="" href="#"><span class="icon icon-twitter"></span></a></li>
                          <!-- <li class="whatsapp"><a class="" href="#"><span class="icon icon-whatsapp"></span></a></li> -->
                          <li class="gmail">
                              <a class="" href="#">
                                  <span class="icon icon-gmail"><span class="path1"></span><span class="path2"></span><span
                                          class="path3"></span><span class="path4"></span><span class="path5"></span></span>
                              </a>
                          </li>
                      </ul>
                  </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- details end -->

  <!-- Related Jobs -->
  @if($relatedJobs->isNotEmpty())
  <section class="lyt-section typ-related-job">
    <div class="container abc">
      <div class="row">
        <div class="col-md-12">
          <div class="heading-wrapper mb-0">
            <h2 class="bs-heading typ-black wow fadeInUp" data-wow-duration="0.4s">
              Related Jobs
            </h2>
          </div>
        </div>
      </div>
      <div class="row swiper-reverse-margin">
        <div class="col-md-12">
          <div class="custom-navigation margB wow fadeInUp" data-wow-duration="0.8s">
            <div class="swiper-button-next rj-next"></div>
            <div class="swiper-button-prev rj-prev"></div>
          </div>
        </div>
        <div class="col-md-12">
          <div class="bs-swiper typ-opp typ-related-job wow fadeInUp" data-wow-duration="0.8s">
            <div class="swiper related-job">
              <div class="swiper-wrapper">
                @foreach($relatedJobs as $relatedJob)
                <div class="swiper-slide">
                  <a href="{{ route('job.detail',[$relatedJob->slug]) }}" class="bs-card typ-job-list typ-slider">
                    <div class="card-body">
                      <div class="logo-section">
                        <div class="img-title">
                          <div class="img-section"><img class="img-fluid" src="{{$relatedJob->logo}}" alt="logo"> </div>
                          <div class="title">
                            <h3 class="name">{{$relatedJob->company_name}}</h3>
                            <h2 class="position">{{$relatedJob->title}}</h2>
                          </div>
                        </div>
                        <div class="icon-section">
                          <span class="icon icon-save"></span>
                        </div>
                      </div>
                      <div class="icon-section">
                        <ul>
                          <li>
                            <span class="icon-name"><span class="icon icon-map-new"></span>
                              {{$relatedJob->city_name}}</span>
                          </li>
                          <li class="dot-sec">
                            <span class="dot"></span>
                          </li>
                          <li>
                          <span class="icon-name"><img src="{{env('APP_URL')}}assets/images/svg/bag1.svg" alt="bagss">
                          {{$relatedJob->experience}} Yrs</span>
                          </li>
                          <li class="dot-sec">
                            <span class="dot"></span>
                          </li>
                          <li>
                            <span class="icon-name"><span class="icon icon-clock"></span>
                              {{$relatedJob->employee_types_name}}</span>
                          </li>
                          <li class="dot-sec">
                            <span class="dot"></span>
                          </li>
                          <li>
                            <span class="icon-name"><span class="">₹</span>
                              {{$relatedJob->salary_from}}-{{$relatedJob->salary_to}} LPA</span>
                          </li>
                        </ul>
                      </div>
                      <div class="description">
                        <p>{{ Illuminate\Support\Str::limit(strip_tags($relatedJob->description),
                                    $limit = 180, $end = '...') }}</p>
                      </div>
                    </div>
                    <div class="card-footer">
                      <div class="last-date">
                        <span class="icon icon-calender1"></span> Last date - {{date('M
                        d,Y', strtotime($relatedJob->end_date))}}
                      </div>
                      <div class="btn-section">
                        <span class="bs-btn typ-outline">Apply Now</span>
                      </div>
                    </div>
                  </a>
                </div>
                @endforeach

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  @endif
  <!-- Related Jobs end -->

</main>

@endsection
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
      function copyLink() {
        var url = window.location.href;

        // Create a temporary input element
        var tempInput = document.createElement("input");
        tempInput.style = "position: absolute; left: -1000px; top: -1000px";
        tempInput.value = url;
        document.body.appendChild(tempInput);

        // Select the URL and copy it to the clipboard
        tempInput.select();
        document.execCommand("copy");

        // Remove the temporary input element
        document.body.removeChild(tempInput);

      var copyLinkBtn = document.getElementById('copyLink');
      var tooltip = new bootstrap.Tooltip(copyLinkBtn);

      tooltip.show();
      setTimeout(function () {
        tooltip.hide();
        copyLinkBtn.addEventListener('click', copyLink); // Reset the click event listener after hiding tooltip
      }, 2000); // 3 seconds delay

      // Remove the event listener to prevent multiple tooltips on subsequent clicks
      copyLinkBtn.removeEventListener('click', copyLink);

      // Add a click event listener to re-enable showing the tooltip on click
      copyLinkBtn.addEventListener('click', copyLink);
    }

  $(document).ready(function() {

    // Social media sharing functionality (replace '#' with the appropriate URLs)
    $('.facebook').click(function() {
        window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(window.location.href));
    });

    $('.linkdin').click(function() {
        window.open('https://www.linkedin.com/shareArticle?url=' + encodeURIComponent(window.location.href));
    });

    $('.twitter').click(function() {
        window.open('https://twitter.com/intent/tweet?url=' + encodeURIComponent(window.location.href));
    });

    $('.whatsapp').click(function() {
        window.open('whatsapp://send?text=' + encodeURIComponent(window.location.href));
    });

    $('.gmail').click(function() {
        window.open('mailto:?body=' + encodeURIComponent(window.location.href));
    });
});

function saveJob() {
    var jobID = {{$jobs->id}};
    console.log("jobID>>>",jobID);
    const token='{{csrf_token()}}';
    $.ajax({
      url: "{{ route('job.save') }}",
      method: 'POST',
      headers: {
        'X-CSRF-TOKEN': token
      },
      data: { jobID: jobID },
      success: function (response) {
      if (response.status == 200) {
        $('.saveBtn').toggleClass('active');
        $('#courceSucces').removeClass('show');
        $('#courceSuccesmsg').html('Job Saved');
      } else {
        console.log('Failed to save course.');
        $('.saveBtn').toggleClass('active');
          $('#courceSucces').removeClass('show');
          $('#courceSuccesmsg').html('Job UnSaved');
      }
      $('#courceSucces').removeClass('show').fadeIn('fast');
      setTimeout(function() {
        $('#courceSucces').fadeOut('fast', function() {
          $(this).addClass('show');
        });
        }, 1000);
      },
      error: function (error) {
      console.error('AJAX error:', error);
      }
      });
      }

</script>