@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';
        };

        $totalApplicants = $stats['total'] ?? 0;
        $newApplicants = $stats['new'] ?? 0;
        $hiredApplicants = $stats['hired'] ?? 0;
        $rejectedApplicants = $stats['rejected'] ?? 0;
        $pendingOffers = $stats['pending_offers'] ?? 0;
    @endphp

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

                <x-page-title
                    title="My Assigned Applicants"
                    description="Review every applicant currently assigned to you and jump back into the right candidate record quickly.">
                        <a href="{{ route('applicants.createDirect') }}" class="asset-btn asset-btn--primary">
                            <i class="fa fa-plus"></i> Add Applicant
                        </a>
                        <a href="{{ route('requests.index') }}" class="asset-btn asset-btn--secondary">
                            Back to Requests
                        </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">Assigned Applicant Workspace</div>
                            <p class="applicants-hero-card__text mb-0">
                                This page pulls all applicants currently assigned to you across recruitment requests, so you can continue follow-up from one place.
                            </p>
                        </div>

                        <form action="{{ route('applicants.myAssigned') }}" method="GET" class="applicant-search-form">
                            <input
                                type="text"
                                name="search"
                                value="{{ request('search') }}"
                                class="form-control"
                                placeholder="Search by applicant, request, job title, or department">
                            <button type="submit" class="asset-btn asset-btn--primary">Search</button>
                            @if (filled(request('search')))
                                <a href="{{ route('applicants.myAssigned') }}" class="asset-btn asset-btn--secondary">
                                    Reset
                                </a>
                            @endif
                        </form>
                    </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">Assigned Applicants</div>
                                <div class="applicant-table-head__sub">
                                    Applicants matched to your current workload: <strong>{{ $totalApplicants }}</strong>
                                </div>
                            </div>

                            @if (filled(request('search')))
                                <div class="applicant-table-head__meta">
                                    <span class="ui-pill ui-pill--info">Search: {{ request('search') }}</span>
                                </div>
                            @endif
                        </div>
                    </div>

                    <x-table
                        :headers="[
                            '#',
                            'Applicant',
                            'Job Title',
                            'Department',
                            'Request',
                            'Contact Number',
                            'Current Status',
                            'Offer Status',
                            'Candidate Account',
                            'Last Update',
                            'Actions',
                        ]"
                        :paginator="$rows"
                        :emptyMessage="'No applicants are currently assigned to you.'"
                        :emptyActionText="'Back to Requests'"
                        :emptyActionUrl="route('requests.index')"
                    >
                        @foreach ($rows as $index => $applicant)
                            @php
                                $rowNumber = method_exists($rows, 'firstItem') ? $rows->firstItem() + $index : $index + 1;
                                $recruitment = $applicant->recruitment;
                                $requestCode = $recruitment?->request_id
                                    ? 'REQ-' . str_pad((string) $recruitment->request_id, 4, '0', STR_PAD_LEFT)
                                    : 'N/A';
                            @endphp

                            <tr class="ui-row-click"
                                onclick="window.location='{{ route('applicants.update_applicant', $applicant->id) }}'">
                                <td class="text-center ui-muted">{{ $rowNumber }}</td>

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

                                <td class="text-center">
                                    <div class="ui-muted">{{ $recruitment?->jobTitles?->name ?: 'Open Position' }}</div>
                                </td>

                                <td class="text-center">
                                    <div class="ui-muted">{{ $recruitment?->requests?->department?->name ?: 'N/A' }}</div>
                                </td>

                                <td class="text-center">
                                    <a href="{{ $recruitment?->request_id ? route('requests.show', $recruitment->request_id) : '#' }}">                            
                                        <span class="ui-pill ui-pill--info">{{ $requestCode }}</span>
                                    </a>
                                </td>

                                <td class="text-center">
                                    <div class="ui-muted">{{ $applicant->contact_number ?: 'N/A' }}</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">
                                    <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">
                                    <div class="ui-muted">{{ optional($applicant->updated_at)->format('Y-m-d H:i') ?: 'N/A' }}</div>
                                </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;
        }

        .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: 680px;
        }

        .applicant-search-form {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
            min-width: min(100%, 420px);
        }

        .applicant-search-form .form-control {
            min-width: 240px;
            flex: 1;
        }

        .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) {
            .applicant-stats-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

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

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

            .applicant-search-form .form-control {
                min-width: 100%;
            }

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