@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    @php
        $rows = $applicants ?? collect();

        $statusVariant = fn ($status) => match ($status) {
            'new' => 'neutral',
            'rejected' => 'danger',
            'hired' => 'success',
            default => 'neutral',
        };

        $offerVariant = fn ($status) => match ($status) {
            'accepted' => 'success',
            'pending' => 'warn',
            'rejected' => 'danger',
            default => 'neutral',
        };

        $formatValue = function ($value) {
            return filled($value) ? ucfirst(str_replace('_', ' ', $value)) : 'N/A';
        };

        $jobTitleName = optional($recruitment->jobTitles)->name ?: 'Open Position';
        $requestCode = 'REQ-' . str_pad((string) $recruitment->request_id, 4, '0', STR_PAD_LEFT);
        $totalApplicants = $rows->count();
        $newApplicants = $rows->where('current_status', 'new')->count();
        $hiredApplicants = $rows->filter(fn ($applicant) => $applicant->current_status === 'hired' || $applicant->offer_status === 'accepted')->count();
        $rejectedApplicants = $rows->filter(fn ($applicant) => $applicant->current_status === 'rejected' || $applicant->offer_status === 'rejected')->count();
        $pendingOffers = $rows->where('offer_status', 'pending')->count();
    @endphp

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title
                    title="Applicants"
                    description="Review all applicants linked to this recruitment request and monitor how they are moving through the hiring pipeline.">
                        <a href="{{ route('requests.show', $recruitment->request_id) }}" class="asset-btn asset-btn--secondary p-3">
                            Back to Request
                        </a>
                        <a href="{{ route('applicants.myAssigned') }}" class="asset-btn asset-btn-secondary p-3">
                            My Assigned Applicants
                        </a>
                        <a href="{{ route('applicants.create', $recruitment->id) }}" class="asset-btn asset-btn-primary">
                            Add New Applicant
                        </a>
                </x-page-title>

                <div class="ui-card applicants-hero-card mb-3 p-3">
                    <div class="applicants-hero-card__content">
                        <div class="p-3">
                            <div class="applicants-hero-card__title">Recruitment Applicant Workspace</div>
                            <p class="applicants-hero-card__text mb-0">
                                Track candidate progress for this request, review hiring activity, and jump directly into each applicant record.
                            </p>
                        </div>

                        <div class="applicants-hero-card__meta">
                            <span class="applicants-chip">
                                <i class="fas fa-briefcase"></i>
                                {{ $jobTitleName }}
                            </span>

                            @if ($recruitment->number_of_vacancies)
                                <span class="applicants-chip applicants-chip--info">
                                    <i class="fas fa-user-plus"></i>
                                    {{ $recruitment->number_of_vacancies }} Vacancy(s)
                                </span>
                            @endif

                            @if ($recruitment->expected_start_date)
                                <span class="applicants-chip applicants-chip--warn">
                                    <i class="fas fa-calendar-alt"></i>
                                    {{ $recruitment->expected_start_date }}
                                </span>
                            @endif

                        </div>
                    </div>
                </div>

                <div class="applicant-stats-grid mb-3">
                    <div class="ui-card applicant-stat">
                        <div class="applicant-stat__label">Total Applicants</div>
                        <div class="applicant-stat__value text-primary">{{ $totalApplicants }}</div>
                    </div>

                    <div class="ui-card applicant-stat">
                        <div class="applicant-stat__label">New</div>
                        <div class="applicant-stat__value text-info">{{ $newApplicants }}</div>
                    </div>

                    <div class="ui-card applicant-stat">
                        <div class="applicant-stat__label">Hired</div>
                        <div class="applicant-stat__value text-success">{{ $hiredApplicants }}</div>
                    </div>

                    <div class="ui-card applicant-stat">
                        <div class="applicant-stat__label">Rejected</div>
                        <div class="applicant-stat__value text-danger">{{ $rejectedApplicants }}</div>
                    </div>

                    <div class="ui-card applicant-stat">
                        <div class="applicant-stat__label">Pending Offers</div>
                        <div class="applicant-stat__value text-warning">{{ $pendingOffers }}</div>
                    </div>
                </div>

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header">
                        <div class="applicant-table-head">
                            <div>
                                <div class="applicant-table-head__title">Applicants Overview</div>
                                <div class="applicant-table-head__sub">
                                    Total applicants linked to this recruitment request: <strong>{{ $totalApplicants }}</strong>
                                </div>
                            </div>

                            <div class="applicant-table-head__meta">
                                <span class="ui-pill ui-pill--info">{{ $jobTitleName }}</span>
                            </div>
                        </div>
                    </div>

                    <x-table
                        :headers="[
                            '#',
                            'Full Name',
                            'Assigned To',
                            'Email',
                            'Contact Number',
                            'Source',
                            'Current Status',
                            'Screening',
                            'Phone Call',
                            'Offer Status',
                            'Candidate Account',
                            'Actions',
                        ]"
                        :paginator="$rows"
                        :emptyMessage="'No applicants found for this request.'"
                        :emptyActionText="'Add New Applicant'"
                        :emptyActionUrl="route('applicants.create', $recruitment->id)"
                    >
                        @foreach ($rows as $index => $applicant)
                            <tr class="ui-row-click"
                                onclick="window.location='{{ route('applicants.update_applicant', $applicant->id) }}'">
                                <td class="text-center ui-muted">{{ $index + 1 }}</td>

                                <td class="text-center">
                                    <div class="ui-title">{{ $applicant->full_name }}</div>
                                </td>

                                <td class="text-center">
                                    <div class="ui-muted">
                                        {{ $applicant->assignedStaff->full_name ?? optional(optional($applicant->createdBy)->staff)->full_name ?? $applicant->createdBy->full_name ?? 'N/A' }}
                                    </div>
                                </td>

                                <td class="text-center">
                                    <div class="ui-muted">{{ $applicant->email ?: 'N/A' }}</div>
                                </td>

                                <td class="text-center">
                                    <div class="ui-muted">{{ $applicant->contact_number ?: 'N/A' }}</div>
                                </td>

                                <td class="text-center">
                                    <div class="ui-muted">{{ $formatValue($applicant->source) }}</div>
                                </td>

                                <td class="text-center">
                                    <span class="ui-pill ui-pill--{{ $statusVariant($applicant->current_status) }}">
                                        {{ $formatValue($applicant->current_status) }}
                                    </span>
                                </td>

                                <td class="text-center">
                                    <div class="ui-muted">{{ $formatValue($applicant->screening_status) }}</div>
                                </td>

                                <td class="text-center">
                                    <div class="ui-muted">{{ $formatValue($applicant->phone_call_status) }}</div>
                                </td>

                                <td class="text-center">
                                    <span class="ui-pill ui-pill--{{ $offerVariant($applicant->offer_status) }}">
                                        {{ $formatValue($applicant->offer_status) }}
                                    </span>
                                </td>

                                <td class="text-center">
                                    @if($applicant->candidateUser)
                                        @if($applicant->candidateUser->isCandidate())
                                            <span class="badge bg-info">Active</span>
                                        @elseif($applicant->candidateUser->user_type === 'deactivated')
                                            <span class="badge bg-secondary">Deactivated</span>
                                        @elseif($applicant->candidateUser->isEmployee())
                                            <span class="badge bg-success">Upgraded</span>
                                        @else
                                            <span class="badge bg-light text-dark">{{ ucfirst($applicant->candidateUser->user_type) }}</span>
                                        @endif
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>

                                <td class="text-center" onclick="event.stopPropagation()">
                                    <div class="ui-actions justify-content-center">
                                        <x-table-action
                                            type="edit"
                                            :url="route('applicants.update_applicant', $applicant->id)" />
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </x-table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .applicant-page-actions {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .task-id-badge {
            display: inline-flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.15rem;
            padding: 0.8rem 1rem;
            border-radius: 14px;
            background: #f8fafc;
            border: 1px solid #e5e7eb;
            min-width: 140px;
        }

        .task-id-badge__label {
            font-size: 0.78rem;
            color: #64748b;
        }

        .task-id-badge__value {
            font-size: 1rem;
            font-weight: 800;
            color: #111827;
        }

        .applicants-hero-card {
            border: 1px solid #e5e7eb;
            background:
                radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 32%),
                linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
        }

        .applicants-hero-card__content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .applicants-hero-card__title {
            font-size: 1.2rem;
            font-weight: 800;
            color: #111827;
            margin-bottom: 0.35rem;
        }

        .applicants-hero-card__text {
            color: #6b7280;
            font-size: 0.93rem;
            line-height: 1.65;
            max-width: 720px;
        }

        .applicants-hero-card__meta {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .applicants-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.55rem 0.9rem;
            border-radius: 999px;
            background: #eef2ff;
            color: #4338ca;
            font-size: 0.85rem;
            font-weight: 700;
        }

        .applicants-chip--info {
            background: #eff6ff;
            color: #1d4ed8;
        }

        .applicants-chip--warn {
            background: #fff7ed;
            color: #c2410c;
        }

        .applicant-stats-grid {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 1rem;
        }

        .applicant-stat {
            padding: 1rem 1.1rem;
        }

        .applicant-stat__label {
            color: #6b7280;
            font-size: 0.88rem;
            margin-bottom: 0.45rem;
        }

        .applicant-stat__value {
            font-size: 1.45rem;
            font-weight: 800;
            line-height: 1.1;
        }

        .applicant-table-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .applicant-table-head__title {
            font-size: 1rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: 0.2rem;
        }

        .applicant-table-head__sub {
            color: #6b7280;
            font-size: 0.9rem;
        }

        .applicant-table-head__meta {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        @media (max-width: 1199.98px) {
            .applicant-stats-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        @media (max-width: 991.98px) {
            .applicants-hero-card__meta {
                justify-content: flex-start;
            }

            .applicant-stats-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 767.98px) {
            .applicant-page-actions {
                width: 100%;
            }

            .applicant-page-actions .asset-btn {
                width: 100%;
                justify-content: center;
            }

            .applicant-stats-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endpush