@extends('layouts.app')

@section('title', 'Job Postings')
@section('heading', 'Job Postings')

@section('content')
    @include('recruitment.top-submenu')

    <div class="mb-5 flex flex-wrap items-center justify-between gap-3">
        <div>
            <p class="text-sm text-slate-500">{{ $activeCount }} active · {{ $closedCount }} closed</p>
            @php
                $company = auth()->user()->company;
                $careersKey = $company ? strtolower($company->short_name ?: (string) $company->id) : '';
            @endphp
            @if($careersKey && auth()->user()->hasPermission('recruitment_view'))
                <p class="mt-1 text-xs text-slate-500">Public careers: <a href="{{ route('careers.index', $careersKey) }}" target="_blank" class="font-medium text-teal-700 hover:underline">{{ route('careers.index', $careersKey) }}</a></p>
            @endif
        </div>
        @if(auth()->user()->hasPermission('recruitment_create'))
            <a href="{{ route('job-postings.create') }}" class="inline-flex items-center rounded-lg bg-teal-700 px-4 py-2 text-sm font-medium text-white hover:bg-teal-600"><i class="bi bi-plus-lg me-1"></i>Create job</a>
        @endif
    </div>

    <div class="mb-4 flex gap-2">
        <a href="{{ route('job-postings.index') }}" class="rounded-full px-3 py-1.5 text-sm {{ $status === '' ? 'bg-slate-800 text-white' : 'bg-slate-100 text-slate-700' }}">All</a>
        <a href="{{ route('job-postings.index', ['status' => 'active']) }}" class="rounded-full px-3 py-1.5 text-sm {{ $status === 'active' ? 'bg-slate-800 text-white' : 'bg-slate-100 text-slate-700' }}">Active</a>
        <a href="{{ route('job-postings.index', ['status' => 'closed']) }}" class="rounded-full px-3 py-1.5 text-sm {{ $status === 'closed' ? 'bg-slate-800 text-white' : 'bg-slate-100 text-slate-700' }}">Closed</a>
    </div>

    <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
        @forelse($jobPostings as $job)
            @php $pipeline = $pipelineByJob[$job->id] ?? []; @endphp
            <x-card>
                <div class="mb-3 flex items-start justify-between gap-3">
                    <div>
                        <p class="font-semibold text-slate-900">{{ $job->title }}</p>
                        <p class="text-xs text-slate-500">{{ $job->department?->name ?? 'General' }}</p>
                    </div>
                    <span class="rounded-full px-2 py-0.5 text-xs {{ $job->status === 'active' ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-600' }}">{{ ucfirst($job->status) }}</span>
                </div>
                <div class="space-y-1 text-sm text-slate-600">
                    <p><i class="bi bi-geo-alt me-1"></i>{{ $job->location ?: 'N/A' }}</p>
                    <p><i class="bi bi-clock me-1"></i>{{ ucfirst($job->employment_type) }}</p>
                    <p><i class="bi bi-people me-1"></i>{{ $job->applicants_count }} applicants · {{ $job->referrals_count }} referrals</p>
                </div>
                @if(array_sum($pipeline) > 0)
                    <div class="mt-4">
                        <p class="mb-2 text-xs font-medium uppercase text-slate-500">Pipeline</p>
                        <div class="flex h-2 overflow-hidden rounded-full bg-slate-100">
                            @foreach(['applied' => 'bg-slate-400', 'screening' => 'bg-amber-400', 'interview' => 'bg-sky-500', 'offer' => 'bg-emerald-500', 'rejected' => 'bg-rose-300'] as $stage => $color)
                                @if(($pipeline[$stage] ?? 0) > 0)
                                    <div class="{{ $color }}" style="width: {{ round(($pipeline[$stage] / max(1, array_sum($pipeline))) * 100) }}%" title="{{ ucfirst($stage) }}: {{ $pipeline[$stage] }}"></div>
                                @endif
                            @endforeach
                        </div>
                        <div class="mt-2 flex flex-wrap gap-2 text-[10px] text-slate-500">
                            @foreach(['applied', 'screening', 'interview', 'offer'] as $stage)
                                <span>{{ ucfirst($stage) }} {{ $pipeline[$stage] ?? 0 }}</span>
                            @endforeach
                        </div>
                    </div>
                @endif
                <div class="mt-4 flex flex-wrap gap-3 text-sm">
                    <a href="{{ route('applicants.index', ['job_posting_id' => $job->id]) }}" class="font-medium text-teal-700 hover:text-teal-900">View pipeline</a>
                    @if($job->status === 'active' && app(\App\Services\Recruitment\RecruitmentNavService::class)->canRefer(auth()->user()))
                        <a href="{{ route('applicants.refer', ['job_posting_id' => $job->id]) }}" class="text-slate-600 hover:text-slate-900">Refer</a>
                    @endif
                    @if(auth()->user()->hasPermission('recruitment_edit'))
                        <a href="{{ route('job-postings.edit', $job) }}" class="btn-icon-action btn-icon-action--edit" title="Edit" aria-label="Edit"><i class="bi bi-pencil-square"></i></a>
                    @endif
                </div>
            </x-card>
        @empty
            <p class="col-span-full rounded-lg border border-dashed border-slate-300 p-6 text-center text-sm text-slate-500">No job postings yet.</p>
        @endforelse
    </div>

    @if($jobPostings->hasPages())<div class="mt-4">{{ $jobPostings->links() }}</div>@endif
@endsection