@extends('frontend.layouts.app')

@section('page_title')
    Job Detail
@endsection

@section('content')
    <!-- Hero Section -->
    <div class="container-fluid p-0 hero-section-jobs">
        <div class="position-relative w-100" style="height: 300px;" data-aos="fade-down" data-aos-delay="200">
            <img src="{{ asset('assets/img/g_img-2.jpg') }}" alt="Breadcrumb" class="w-100 h-100 object-fit-cover">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex flex-column justify-content-center align-items-center text-center"
                 style="background: rgba(0, 47, 108, 0.85);">
                <h1 class="display-4 fw-bold text-white mb-3" style="font-family: 'Poppins', sans-serif; letter-spacing: 1px;" data-aos="fade-up" data-aos-delay="400">
                    Job Details
                </h1>
            </div>
        </div>
    </div>

    <div class="container my-5">
        <div class="row">

            <div class="col-lg-8">

                <div class="card shadow-sm mb-4">
                    <div class="card-body d-flex justify-content-between align-items-center flex-wrap">
                        <div class="job-info">
                            <h1 class="h3 fw-bold mb-2">{{ $job->title }}</h1>
                            <p class="text-muted mb-1">
                                <i class="fas fa-map-marker-alt me-1"></i> {{ $job->location }} |
                                <i class="fas fa-clock me-1"></i> {{ $job->employment_type }}
                            </p>
                            <p class="small mb-0">
                                <i class="fas fa-calendar-alt me-1"></i> Start: {{ \Carbon\Carbon::parse($job->start_date)->format('d M Y') }}
                                &nbsp; | &nbsp;
                                <i class="fas fa-calendar-check me-1"></i> Deadline: {{ \Carbon\Carbon::parse($job->end_date)->format('d M Y') }}
                            </p>
                        </div>
                        <div class="mt-3 mt-lg-0">
                            <a href="{{ route('jobapplication', $job->id) }}"
                               class="btn btn-primary rounded-pill px-4 d-flex align-items-center text-white" style="background-color: #ED1A3B">
                                <i class="cu-paper-plane me-2"></i> Apply Now
                            </a>
                        </div>
                    </div>
                </div>


                <!-- Job Description -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-light">
                        <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i> Job Description</h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted">{{ $job->short_description }}</p>
                        <div>{!! $job->description !!}</div>
                    </div>
                </div>

                <!-- Job Details -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-light">
                        <h5 class="mb-0"><i class="fas fa-briefcase me-2"></i> Job Details</h5>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled mb-0">
                            <li class="mb-2"><strong>Vacancies:</strong> {{ $job->vacancies }}</li>
                            <li class="mb-2"><strong>Salary Range:</strong> {{ $job->salary_range }}</li>
                            <li class="mb-2"><strong>Experience Level:</strong> {{ $job->experience_level }}</li>
                            <li class="mb-2"><strong>Education:</strong> {{ $job->education }}</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Sidebar with Recent Jobs -->
            <div class="col-lg-4">
                <div class="card shadow-sm">
                    <div class="card-header bg-light">
                        <h5 class="mb-0"><i class="fas fa-briefcase me-2"></i> Recent Jobs</h5>
                    </div>
                    <div class="card-body">
                        @forelse($recentJobs as $recent)
                            <div class="mb-3 border-bottom pb-2">
                                <h6 class="fw-bold mb-1">
                                    <a href="{{ route('jobs.show', $recent->id) }}" class="text-dark text-decoration-none">
                                        {{ $recent->title }}
                                    </a>
                                </h6>
                                <small class="text-muted d-block">
                                    <i class="fas fa-map-marker-alt me-1"></i> {{ $recent->location }}
                                </small>
                                <small class="text-muted d-block">
                                    <i class="fas fa-calendar-check me-1"></i> Deadline: {{ \Carbon\Carbon::parse($recent->end_date)->format('d M Y') }}
                                </small>
                            </div>
                        @empty
                            <p class="text-muted">No recent jobs available.</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection