Job Details Page - Copy this Html, Tailwind Component to your project
ref các thông tin về jobs từ layout dưới để bổ sung vào layout <div class="bg white rounded lg shadow md p 6 hover:shadow lg transition shadow duration 300 border border gray 100"> <div class="flex justify between items start mb 4"> <div> <h3 class="text xl font semibold text gray 800"> <a href="{{ route('jobs.jobDetail', [$job >company >career_page_link ?? '', $job >slug??'']) }}" class="job opening card cursor pointer"> {{ $job >title }} </a> </h3> <span class="text gray 600 mt 1"> <a class="text secondary no underline" href="{{ $job >company >website_url ?? "" }}">{{ $job >company >company_name ?? ""}}</a> </span> </div> <div> <button class="p 2 rounded full text gray 400 hover:bg gray 100" aria label="Save job"> <svg stroke="currentColor" fill="none" stroke width="2" viewBox="0 0 24 24" class="w 5 h 5"> <path d="M19 21l 7 5 7 5V5a2 2 0 0 1 2 2h10a2 2 0 0 1 2 2z"></path> </svg> </button> </div> </div> <div class="space y 3"> <div class="flex items center text gray 600"> <img class="w 4 h 4 mr 2" src="{{asset('assets/feather/map pin.svg')}}" alt="location"> @if(!empty($job >location >location)) <span>{{ $job >location >location ?? '' }}</span> @else @if($job >locations && $job >locations >isNotEmpty()) <span> {{ $job >locations >pluck('location') >filter() >implode(', ') }} </span> @endif @endif </div> <div class="flex items center text gray 600"> <img class=" w 4 h 4 mr 2" src="{{asset('assets/feather/salary.svg')}}" alt="salary"/> @if(auth() >guest()) <a href="{{ route('login', ['redirect' => request() >fullUrl()]) }}" class="text blue 500"> <span class=" text green 600">Đăng nhập để xem mức lương</span> </a> @else <span>{{ $job >salary }}</span> @endif </div> @if($job >levels && $job >levels >isNotEmpty()) <div class="flex items center text gray 600"> <img class=" w 4 h 4 mr 2" src="{{asset('assets/feather/contract type.svg')}}" alt="contract"/> <span>{{ $job >levels >pluck('name') >filter() >implode(', ') }}</span> </div> @endif @if($job >contracts && $job >contracts >isNotEmpty()) <div class="flex items center text gray 600"> <img class=" w 4 h 4 mr 2" src="{{asset('assets/feather/contract type.svg')}}" alt="contract"/> <span>{{ $job >contracts >pluck('name') >filter() >implode(', ') }}</span> </div> @endif @if($job >jobsSkill && $job >jobsSkill >isNotEmpty()) <div class="flex items center text gray 600 overflow hidden whitespace nowrap"> <img class="w 4 h 4 mr 2 flex shrink 0" src="{{ asset('assets/feather/tag.svg') }}" alt="tag"/> <div class="flex space x 2 overflow hidden text ellipsis"> @foreach($job >jobsSkill as $skill) <a class="text reset" href="{{ route('jobs.job openings') . "?job_title=" . $skill >name }}"> <div class="inline block px 3 py 1 bg blue 100 text blue 600 rounded full text sm"> {{ $skill >name }} </div> </a> @endforeach </div> </div> @endif </div> <div class="mt 4 flex items center justify between"> <span class="text sm text gray 500 flex items center"> <img class="w 4 h 4 mr 1" src="{{asset('assets/feather/clock.svg')}}"> {{ $job >updated_at >diffForHumans() }} </span> <a href="{{ $job >status !== \App\Models\Job::STATUS_ACTIVE ? 'javascript:void(0);' : (auth() >check() ? route('careers.apply', $job >id) : route('login', ['redirect' => request() >fullUrl()])) }}" class="{{ $job >status !== \App\Models\Job::STATUS_ACTIVE ? 'bg gray 400 text white text sm px 6 py 2 rounded lg shadow md cursor not allowed opacity 50' : 'bg oranges 900 hover:bg oranges 700 text white text sm px 6 py 2 rounded lg shadow md hover:scale 105 transition duration 300' }}" title="{{ $job >status !== \App\Models\Job::STATUS_ACTIVE ? 'Đã đóng' : 'Ứng tuyển' }}" > {{ $job >status !== \App\Models\Job::STATUS_ACTIVE ? 'ĐÃ ĐÓNG' : 'ỨNG TUYỂN' }} </a> </div> </div>
