@extends('layouts.app')

@section('title', 'Open roles')
@section('heading', 'Open roles')

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

    @php $canRefer = app(\App\Services\Recruitment\RecruitmentNavService::class)->canRefer(auth()->user()); @endphp

    <div class="mb-5 flex flex-wrap items-end justify-between gap-4">
        <div>
            <h1 class="text-lg font-semibold text-slate-900">Open positions</h1>
            <p class="mt-1 text-sm text-slate-500">Browse active roles and refer someone from your network.</p>
        </div>
        @if($canRefer)
            <a href="{{ route('applicants.refer') }}" class="inline-flex items-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:opacity-90">
                Refer a candidate
            </a>
        @endif
    </div>

    <div class="mb-5 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
        <x-kpi-card title="Open roles" :value="$stats['roles']" accent="teal" subtitle="Active positions" />
        <x-kpi-card title="Openings" :value="$stats['openings']" accent="sky" tone="info" subtitle="Total seats available" />
        <x-kpi-card title="Departments" :value="$stats['departments']" accent="violet" subtitle="Hiring teams" />
        <x-kpi-card title="Locations" :value="$stats['locations']" accent="amber" tone="warning" subtitle="Distinct locations" />
    </div>

    <x-card class="mb-5">
        <form method="GET" action="{{ route('recruitment.open-roles') }}" class="flex flex-wrap items-end gap-3 justify-end">
            <div>
                <label class="block text-xs font-medium text-slate-500">Search</label>
                <input type="text" name="search" value="{{ $search }}" placeholder="Title, location..." class="mt-1 rounded-lg border border-slate-300 px-3 py-2 text-sm" style="width: 200px;">
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-500">Department</label>
                <select name="department_id" class="mt-1 rounded-lg border border-slate-300 px-3 py-2 text-sm js-select2" style="width: 180px;">
                    <option value="">All departments</option>
                    @foreach($departments as $department)
                        <option value="{{ $department->id }}" @selected((int) $departmentId === (int) $department->id)>{{ $department->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-500">Employment type</label>
                <select name="employment_type" class="mt-1 rounded-lg border border-slate-300 px-3 py-2 text-sm js-select2" style="width: 150px;">
                    <option value="">All types</option>
                    @foreach($employmentTypes as $type)
                        <option value="{{ $type }}" @selected($employmentType === $type)>{{ ucfirst($type) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="flex shrink-0 gap-2">
                <button type="submit" class="rounded-lg bg-slate-800 px-4 py-2 text-sm font-medium text-white">Filter</button>
                @if($search !== '' || $departmentId || $employmentType !== '')
                    <a href="{{ route('recruitment.open-roles') }}" class="rounded-lg bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-200">Clear</a>
                @endif
            </div>
        </form>
    </x-card>

    <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
        @forelse($jobPostings as $job)
            <div class="relative flex h-full flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white p-4 pl-5 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md">
                <span class="absolute inset-y-0 left-0 w-1.5 rounded-l-2xl bg-teal-600" aria-hidden="true"></span>
                <div class="mb-3 flex items-start justify-between gap-3">
                    <div class="min-w-0">
                        <p class="font-semibold text-slate-900">{{ $job->title }}</p>
                        <p class="mt-0.5 text-xs text-slate-500">{{ $job->department?->name ?? 'General' }}</p>
                    </div>
                    <span class="shrink-0 rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700">Open</span>
                </div>
                <div class="grid gap-2 text-sm text-slate-600 sm:grid-cols-2">
                    <p class="flex items-center gap-1.5"><i class="bi bi-geo-alt text-slate-400"></i>{{ $job->location ?: 'Location flexible' }}</p>
                    <p class="flex items-center gap-1.5"><i class="bi bi-clock text-slate-400"></i>{{ ucfirst($job->employment_type) }}</p>
                    <p class="flex items-center gap-1.5"><i class="bi bi-people text-slate-400"></i>{{ $job->openings }} opening{{ (int) $job->openings === 1 ? '' : 's' }}</p>
                    @if($job->posted_at)
                        <p class="flex items-center gap-1.5 text-xs text-slate-500"><i class="bi bi-calendar3 text-slate-400"></i>Posted {{ $job->posted_at->format('d M Y') }}</p>
                    @endif
                </div>
                @if($job->description)
                    <p class="mt-3 flex-1 text-sm text-slate-600">{{ \Illuminate\Support\Str::limit(strip_tags($job->description), 140) }}</p>
                @else
                    <div class="flex-1"></div>
                @endif
                <div class="mt-4 flex flex-wrap gap-2">
                    @if($canRefer)
                        <a href="{{ route('applicants.refer', ['job_posting_id' => $job->id]) }}" class="inline-flex items-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:opacity-90">
                            Refer a candidate
                        </a>
                    @endif
                    @if(auth()->user()->hasPermission('recruitment_view'))
                        <a href="{{ route('applicants.index', ['job_posting_id' => $job->id]) }}" class="inline-flex items-center rounded-lg bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-200">
                            View applicants
                        </a>
                    @endif
                </div>
            </div>
        @empty
            <div class="col-span-full rounded-2xl border border-dashed border-slate-300 bg-white p-10 text-center">
                <p class="text-sm text-slate-500">No open positions match your filters.</p>
                @if($search !== '' || $departmentId || $employmentType !== '')
                    <a href="{{ route('recruitment.open-roles') }}" class="mt-3 inline-flex rounded-lg bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-200">Clear filters</a>
                @elseif($canRefer)
                    <a href="{{ route('applicants.refer') }}" class="mt-3 inline-flex rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:opacity-90">Refer a candidate anyway</a>
                @endif
            </div>
        @endforelse
    </div>

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