@php
    $layout = auth()->check()
        ? (strtolower(auth()->user()->role) === 'manager'
            ? 'layouts.manager'
            : 'layouts.staff')
        : 'layouts.app';
@endphp
@extends($layout)

@section('content')
<div class="container mx-auto px-4 py-6">
    <h1 class="text-3xl font-bold text-gray-800 mb-6">🎯 Job Opportunities</h1>

    @if($jobAds->count() > 0)
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($jobAds as $jobAd)
                <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-200">
                    @if($jobAd->image_path)
                        <img src="{{ asset('storage/' . $jobAd->image_path) }}"
                             alt="{{ $jobAd->title }}"
                             class="w-full h-48 object-cover">
                    @endif

                    <div class="p-6">
                        <h3 class="text-xl font-semibold text-gray-800 mb-2">{{ $jobAd->title }}</h3>
                        <p class="text-gray-600 mb-4">{{ \Illuminate\Support\Str::limit($jobAd->description, 120) }}</p>

                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">
                                📅 {{ $jobAd->posted_at->format('M d, Y') }}
                            </span>
                            <a href="{{ route('jobs.show', $jobAd->id) }}"
                               class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm transition duration-200">
                                View Details
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @else
        <div class="text-center py-12">
            <div class="text-6xl mb-4">📋</div>
            <h3 class="text-xl font-semibold text-gray-600 mb-2">No Job Openings</h3>
            <p class="text-gray-500">Check back later for new opportunities!</p>
        </div>
    @endif
</div>
@endsection