@extends('layouts.app')
@section('content')
<div class="pt-24">
<div class="relative py-20 px-4 bg-gradient-to-br from-dark-brown to-deep-green bengali-pattern text-center">
    <h1 class="font-playfair text-5xl text-cream font-bold mb-3" data-aos="fade-up">Career Opportunities</h1>
    <p class="text-cream/60 text-lg" data-aos="fade-up" data-aos-delay="100">Join the Shalik family — where passion meets profession</p>
    <div class="section-divider mt-4"></div>
</div>
<div class="max-w-5xl mx-auto px-4 py-16">
    {{-- Filter --}}
    <div class="flex flex-wrap gap-3 mb-8" data-aos="fade-up">
        <a href="{{ route('career.index') }}" class="px-4 py-2 rounded-full text-sm transition-all {{ !request('department') ? 'bg-gold text-dark-brown font-semibold' : 'border border-gold/30 text-cream/60 hover:text-gold' }}">All Departments</a>
        @foreach($departments as $dept)
        <a href="{{ route('career.index', ['department'=>$dept]) }}"
           class="px-4 py-2 rounded-full text-sm transition-all {{ request('department')==$dept ? 'bg-gold text-dark-brown font-semibold' : 'border border-gold/30 text-cream/60 hover:text-gold' }}">
            {{ $dept }}
        </a>
        @endforeach
    </div>

    @forelse($careers as $career)
    <div class="glass-card p-6 mb-5 hover:border-gold/40 transition-all" data-aos="fade-up" data-aos-delay="{{ $loop->index*80 }}">
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div class="flex-1">
                <div class="flex flex-wrap items-center gap-2 mb-2">
                    <span class="text-xs bg-gold/20 text-gold px-3 py-0.5 rounded-full">{{ $career->department }}</span>
                    <span class="text-xs border border-gold/20 text-cream/50 px-3 py-0.5 rounded-full">{{ str_replace('_',' ',$career->type) }}</span>
                    @if($career->branch)<span class="text-xs text-cream/40"><i class="fas fa-map-marker-alt mr-1 text-gold/40"></i>{{ $career->branch->name }}</span>@endif
                    @if($career->deadline)<span class="text-xs text-red-400"><i class="fas fa-clock mr-1"></i>Deadline: {{ $career->deadline->format('M d, Y') }}</span>@endif
                </div>
                <h3 class="font-playfair text-cream text-xl font-bold mb-1 hover:text-gold transition-colors">{{ $career->title }}</h3>
                @if($career->salary_min || $career->salary_max)
                <p class="text-gold text-sm">৳{{ number_format($career->salary_min) }} – ৳{{ number_format($career->salary_max) }}/month</p>
                @endif
            </div>
            <a href="{{ route('career.show', $career->slug) }}" class="btn-gold text-sm px-6 py-3 whitespace-nowrap">
                View & Apply <i class="fas fa-arrow-right ml-1"></i>
            </a>
        </div>
    </div>
    @empty
    <div class="text-center py-20 glass-card">
        <i class="fas fa-briefcase text-gold/30 text-6xl mb-4"></i>
        <p class="text-cream/50 text-lg">No open positions at the moment.</p>
        <p class="text-cream/40 text-sm mt-2">Send your CV to <span class="text-gold">careers@shalikrestaurant.com</span></p>
    </div>
    @endforelse
    <div class="mt-8">{{ $careers->links() }}</div>
</div>
</div>
@endsection