@extends('layouts.admin')

@section('title', 'Data Pelamar')

@section('content')
<div class="mb-6 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
    <form action="{{ route('admin.applicants') }}" method="GET" class="flex flex-wrap items-center gap-2">
        <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari nama, email, atau WhatsApp..."
            class="border border-gray-200 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-indigo-500 outline-none w-full sm:w-72">
        <button class="bg-gray-100 text-gray-600 px-4 py-2 rounded-lg text-sm hover:outline hover:outline-2 hover:outline-gray-400">Cari</button>
    </form>
    <div class="flex items-center gap-2">
        <a href="{{ route('admin.applicants.download', ['format' => 'csv']) }}"
           class="inline-flex items-center px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700">
            <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg>
            Download CSV
        </a>
        <a href="{{ route('admin.applicants.download', ['format' => 'txt']) }}"
           class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700">
            <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg>
            Download TXT
        </a>
    </div>
</div>

<div class="bg-white rounded-xl border border-gray-100 overflow-x-auto">
    <table class="w-full min-w-[600px]">
        <thead>
            <tr class="bg-gray-50 border-b border-gray-100">
                <th class="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase">Nama</th>
                <th class="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase">Email</th>
                <th class="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase">WhatsApp</th>
                <th class="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase">Pendidikan</th>
                <th class="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase">Lamaran</th>
                <th class="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase">Terdaftar</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-50">
            @forelse($applicants as $applicant)
            <tr class="hover:bg-gray-50">
                <td class="px-6 py-4 font-medium text-gray-800 text-sm">{{ $applicant->name }}</td>
                <td class="px-6 py-4 text-sm text-gray-600">{{ $applicant->email }}</td>
                <td class="px-6 py-4 text-sm text-gray-600">{{ $applicant->whatsapp }}</td>
                <td class="px-6 py-4 text-sm text-gray-600">{{ $applicant->education }}</td>
                <td class="px-6 py-4 text-sm text-gray-600">{{ $applicant->applications_count }}</td>
                <td class="px-6 py-4 text-xs text-gray-400">{{ $applicant->created_at->format('d/m/Y') }}</td>
            </tr>
            @empty
            <tr>
                <td colspan="6" class="px-6 py-12 text-center text-gray-400">Belum ada pelamar</td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

<div class="mt-6">{{ $applicants->appends(request()->query())->links('pagination') }}</div>
@endsection