@extends('layouts.recruiter')
@section('title', 'Applicants — JOBES')

@section('recruiter_content')
<div class="card-seeker-panel animate__animated animate__fadeIn">
    <h5 class="fw-800 text-dark mb-4" style="font-size:1.1rem; border-left:3px solid #0d9488; padding-left:10px;">All Applicants</h5>
    
    @if($applications->count())
    <div class="table-responsive">
        <table class="table align-middle mb-0" style="border-collapse:separate; border-spacing:0 8px;">
            <thead>
                <tr style="background:#f1f5f9; color:#0f172a;">
                    <th class="py-3 px-3 text-dark border-0" style="border-top-left-radius:10px; border-bottom-left-radius:10px; font-weight:700;">Candidate</th>
                    <th class="py-3 px-3 text-dark border-0" style="font-weight:700;">Applied For</th>
                    <th class="py-3 px-3 text-dark border-0" style="font-weight:700;">Status Update</th>
                    <th class="py-3 px-3 text-dark border-0" style="font-weight:700;">Applied On</th>
                    <th class="py-3 px-3 text-dark border-0" style="border-top-right-radius:10px; border-bottom-right-radius:10px; font-weight:700;">Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach($applications as $app)
                <tr class="bg-light hover-shadow-xs transition-all-200" style="border-radius:10px;">
                    <td class="py-3 px-3 border-0 text-start" style="border-top-left-radius:10px; border-bottom-left-radius:10px;">
                        <div class="d-flex align-items-center gap-3">
                            <img src="{{ $app->user->avatar_url }}" alt="" class="rounded-circle shadow-sm border" style="width:40px; height:40px; object-fit:cover;">
                            <div>
                                <div class="fw-800 text-dark" style="font-size:0.92rem;">{{ $app->user->name }}</div>
                                <div class="text-muted small fw-600 mt-0.5">{{ $app->user->email }}</div>
                            </div>
                        </div>
                    </td>
                    <td class="py-3 px-3 border-0 text-start">
                        <span class="text-muted small fw-700">{{ Str::limit($app->jobListing->title ?? 'N/A', 25) }}</span>
                    </td>
                    <td class="py-3 px-3 border-0 text-start">
                        <form method="POST" action="{{ route('recruiter.applicants.status', $app->id) }}">
                            @csrf
                            <select name="status" class="form-select form-ctrl-light py-1 px-2.5" style="font-size:0.8rem; width:135px; border-radius:30px;" onchange="this.form.submit()">
                                @foreach(['pending','reviewed','shortlisted','interviewed','offered','hired','rejected'] as $s)
                                    <option value="{{ $s }}" {{ $app->status === $s ? 'selected' : '' }}>
                                        {{ ucfirst($s) }}
                                    </option>
                                @endforeach
                            </select>
                        </form>
                    </td>
                    <td class="py-3 px-3 border-0 text-muted small fw-700">
                        {{ $app->created_at->format('d M Y') }}
                    </td>
                    <td class="py-3 px-3 border-0 text-start" style="border-top-right-radius:10px; border-bottom-right-radius:10px;">
                        <a href="{{ route('recruiter.applicants.detail', $app->id) }}" class="btn btn-light border btn-sm fw-800 px-3 py-1.5 text-dark" style="border-radius:0.5rem; font-size:0.8rem;">
                            <i class="far fa-eye me-1 text-teal-accent"></i> View
                        </a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    
    <div class="mt-4 d-flex justify-content-center">
        {{ $applications->links() }}
    </div>
    @else
    <div class="text-center py-5">
        <div style="font-size:4rem; filter: grayscale(10%) contrast(90%);">👥</div>
        <h5 class="text-dark fw-800 mt-3">No Applicants Yet</h5>
        <p class="text-muted small">Post jobs to start receiving applicant submissions.</p>
    </div>
    @endif
</div>
@endsection