@extends('layouts.appInnerWithLeftSideBar')
@section('seoTitle')
{{ $title }} @ {{ env('SEO_NAME') }}
@endsection
@section('leftTitle')
Browse Category
@endsection

@section('title')
{{ $title }}
@endsection

@section('leftSideBar')
<div class="bg-white shadow-md rounded-md p-5">
    <ul class="mb-1">
@foreach ($industries as $industry)
@php
    $jobsInCategory = getJobsTotalByIndustryId($industry->id)
@endphp
@if ($jobsInCategory>0)

<li class="mb-3">
    <div class="flex justify-between">
        <a href="{{ $industry->slug }}-jobs" class="inline-block font-medium"><i class="fa fa-chevron-right mr-2 text-xs"></i>{{ $industry->name }}</a>
        ({{ $jobsInCategory }})
    </div>
</li>
@endif
@endforeach
            </ul>
        </div>

@endsection

@section('rightContent')
@if ($jobs->isEmpty())
{!! showMessage('No jobs under this category') !!}
@else
    @foreach ($jobs as $job)
    <div class="relative shadow-md overflow-hidden rounded-md mb-10 p-10 hover:bg-green-50 transition-all duration-500 {{ ($job->is_posted_by_admin == 1) ? ' bg-red-50' : 'bg-white' }}">
        <a href="{{ getJobDetailsUrl($job) }}" class="" target="_blank">
@if($job->is_posted_by_admin == 1)
            <!-- ribbon container -->
    <div class="absolute right-0 top-0 h-16 w-16">
        <!-- ribbon -->
        <div class="absolute right-[-44px] top-[22px] w-[170px] transform rotate-45 bg-red-700 text-center text-white font-semibold py-1">Hot Job</div>
        <!-- end ribbon -->
      </div>
      <!-- end ribbon container -->
      @endif
      {{-- <h3><a href="jobs/">{{ $job->title }}</a></h3> --}}
            <h3 class="text-3xl text-red-700 mb-3">{{ $job->title }}</h3>
                {{-- <div class="my-5">{{ $job->description }}</div> --}}
        <div class="grid grid-cols-3 gap-5">
            <div>
                <p><strong>Location:</strong><br>{{ $job->city }}, {{ $job->state }}</p>
            </div>
            <div>
                {{-- <p><strong>Company:</strong><br>{{ getEmployerByUserId($job->user_id) }}</p> --}}
                <p><strong>Company:</strong><br>{{ $job->company_name }}</p>
            </div>
            <div>
                <p><strong>Salary (Annually): </strong><br>
                    @if($job->salary_from)
                    Rs. {{ $job->salary_from }}
                    @else
                    Undisclosed
                    @endif
                </p>
            </div>
            <div>
                <strong>Industry:</strong> {{ getIndustryByIndustryId($job->industry_id) }}
            </div>
            <div>
                <strong>Designation:</strong>
                @empty($job->designation)
                <x-unspecified />
                @else
                {{ $job->designation }}
            @endempty

            </div>
            <div>
                <strong>Experience:</strong>
                @empty ($job->experience_min)
                <x-unspecified />
                @else
                {{ $job->experience_min }} - {{ $job->experience_max }} Year
                @endempty

            </div>
            {{-- <div>
                <strong>Job Shift:</strong> {{ getJobShiftByJobShiftid($job->job_shift_id) }}
            </div> --}}
            <div class="">
                <strong>Posted On:</strong> {{ Carbon::parse($job->updated_at)->format('d-M-Y'); }}
            </div>
        </div>
        {{-- <div class="flex justify-end">
            {!! showAddToFavoriteJobButton($job->id) !!}
            &nbsp;&nbsp;
            {!! showApplyJobButton($job->id) !!}
            @if(Auth::user())
                @include('user.candidate.applyJobModal')
            @endIf
        </div> --}}
    </a>
    <div class="flex justify-end gap-5">
        <livewire:candidate.job-favorite-button :job="'favorite'.$job" />
        <livewire:candidate.job-apply-button :job="$job" :wire:key="{{ $job->id }}" :key="'apply'.$job->id" />
    </div>
</div>

        @endforeach
        <div class="my-3">
            {{ $jobs->links() }}
        </div>
        @endif
    @endsection
    {{-- @push('custom-scripts')
    <script type="module">
       $(document).ready(function(){
    $('.addToFavorite').on('click', function(){
    var jobId = $(this).attr("data-jobId") ;
    $.ajax({
    url: "{{ route('candidate.add.to.favorite.job') }}",
    type: "POST",
    data: {job_id: jobId,_token: '{{ csrf_token() }}'},
    dataType: 'html',
    beforeSend:function(){
        $(this).prop('disabled', true);
    },
    success: function(result){
        // console.log(result);
        $('#addFavorite'+jobId).html('');
        $('#addFavorite'+jobId).html(result);
    }
    });
    });
    $('.applyJob').on('click', function(){
    var jobId = $(this).attr("data-jobId") ;
    var coverLetterId = $('#coverLetter'+jobId).val() ;
    // var resumeId = $('#resume'+jobId).val() ;
// console.log(coverLetterId +" -  "+resumeId);
// console.log(coverLetterId);
//     return;
    $.ajax({
    url: "{{ route('candidate.apply.job') }}",
    type: "POST",
    data: {job_id: jobId,cover_letter_id: coverLetterId,_token: '{{ csrf_token() }}'},
    dataType: 'html',
    beforeSend:function(){
        $(this).prop('disabled', true);
    },
    success: function(result){
        // console.log(result);
        $('#applyJobModal'+jobId).modal('toggle');
        $('#addApply'+jobId).html('');
        $('#addApply'+jobId).html(result);
    }
    });
    });

        });

    </script>
    @endpush
 --}}