@extends('layouts.app')

@section('title', 'My referrals')
@section('heading', 'My referrals')

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

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

    @php $progressService = app(\App\Services\Recruitment\ReferralProgressService::class); @endphp

    <div class="mb-5 flex flex-wrap items-end justify-between gap-4">
        <div>
            <h1 class="text-lg font-semibold text-slate-900">My referrals</h1>
            <p class="mt-1 text-sm text-slate-500">Track candidates you have referred through the hiring process.</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 someone new
            </a>
        @endif
    </div>

    <div class="mb-5 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
        <x-kpi-card title="Total" :value="$stats['total']" accent="slate" />
        <x-kpi-card title="In progress" :value="$stats['in_progress']" accent="sky" tone="info" />
        <x-kpi-card title="Offer stage" :value="$stats['offer']" accent="emerald" />
        <x-kpi-card title="Not selected" :value="$stats['rejected']" accent="rose" tone="critical" />
    </div>

    <x-card class="mb-4">
        <form method="GET" class="flex flex-wrap items-end gap-3 justify-end">
            <div>
                <label class="block text-xs font-medium text-slate-500">Status</label>
                <select name="status" class="mt-1 rounded-lg border border-slate-300 px-3 py-2 text-sm js-select2" style="width: 120px;">
                    <option value="all" @selected($status === 'all')>All</option>
                    <option value="active" @selected($status === 'active')>In progress</option>
                    <option value="closed" @selected($status === 'closed')>Closed</option>
                </select>
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-500">Role</label>
                <select name="job_posting_id" class="mt-1 rounded-lg border border-slate-300 px-3 py-2 text-sm js-select2" style="width: 200px;">
                    <option value="">All roles</option>
                    @foreach($jobPostings as $job)
                        <option value="{{ $job->id }}" @selected((int) request('job_posting_id') === (int) $job->id)>{{ $job->title }}</option>
                    @endforeach
                </select>
            </div>
            <button type="submit" class="rounded-lg bg-slate-800 px-4 py-2 text-sm font-medium text-white">Filter</button>
        </form>
    </x-card>

    <div class="space-y-4">
        @forelse($referrals as $referral)
            @php $progress = $progressService->build($referral); @endphp
            <x-card>
                <div class="flex flex-wrap items-start justify-between gap-4">
                    <div class="min-w-0">
                        <a href="{{ route('recruitment.my-referrals.show', $referral) }}" class="text-base font-semibold text-slate-900 hover:text-primary">{{ $referral->name }}</a>
                        <p class="text-sm text-slate-600">{{ $referral->jobPosting?->title ?? 'Open role' }}</p>
                        <p class="mt-1 text-xs text-slate-500">Referred {{ $referral->applied_at?->format('d M Y') ?? $referral->created_at?->format('d M Y') }}</p>
                    </div>
                    <a href="{{ route('recruitment.my-referrals.show', $referral) }}" class="text-sm font-medium text-primary hover:underline">View details</a>
                </div>
                <div class="mt-4">
                    @include('recruitment.partials.progress-stepper', ['progress' => $progress, 'showPercent' => true])
                </div>
            </x-card>
        @empty
            <x-card>
                <div class="py-10 text-center">
                    <p class="text-sm text-slate-500">You have not referred anyone yet.</p>
                    <div class="mt-4 flex flex-wrap justify-center gap-2">
                        <a href="{{ route('recruitment.open-roles') }}" class="rounded-lg bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700">Browse open roles</a>
                        @if($canRefer)
                            <a href="{{ route('applicants.refer') }}" class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white">Refer a candidate</a>
                        @endif
                    </div>
                </div>
            </x-card>
        @endforelse
    </div>

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