@extends('layouts.admin')

@section('title', 'Kelola Lamaran')

@section('content')
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
    <form action="{{ route('admin.applications.index') }}" method="GET" class="flex flex-wrap items-center gap-2">
        <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari pelamar..."
            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-64">
        <select name="job_id" class="border border-gray-200 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
            <option value="">Semua Lowongan</option>
            @foreach($jobs as $job)
            <option value="{{ $job->id }}" {{ request('job_id') == $job->id ? 'selected' : '' }}>{{ Str::limit($job->title, 30) }}</option>
            @endforeach
        </select>
        <select name="status" class="border border-gray-200 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
            <option value="">Semua Status</option>
            <option value="applied" {{ request('status') === 'applied' ? 'selected' : '' }}>Lamaran Masuk</option>
            @foreach($statuses as $st)
            <option value="{{ $st }}" {{ request('status') === $st ? 'selected' : '' }}>{{ ucfirst(str_replace('_', ' ', $st)) }}</option>
            @endforeach
            <option value="accepted" {{ request('status') === 'accepted' ? 'selected' : '' }}>Diterima</option>
            <option value="rejected" {{ request('status') === 'rejected' ? 'selected' : '' }}>Ditolak</option>
        </select>
        <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">Filter</button>
    </form>
</div>

{{-- Bulk Actions --}}
<form action="{{ route('admin.applications.bulk') }}" method="POST" id="bulkForm">
    @csrf
    <div class="flex flex-wrap items-center gap-2 mb-4">
        <select name="status" class="border border-gray-200 rounded-lg px-3 py-2 text-sm">
            <option value="">Aksi Massal...</option>
            @foreach($statuses as $st)
            @if(str_contains($st, '_passed'))
            <option value="{{ $st }}">Loloskan {{ ucfirst(str_replace('_', ' ', $st)) }}</option>
            @endif
            @endforeach
            <option value="accepted">Terima</option>
            <option value="rejected">Tolak</option>
        </select>
        <button type="submit" class="bg-yellow-500 text-white px-4 py-2 rounded-lg text-sm font-medium hover:outline hover:outline-2 hover:outline-yellow-700"
            onclick="return confirm('Yakin melakukan aksi massal?')">
            Terapkan
        </button>
    </div>

    <div class="bg-white rounded-xl border border-gray-100 overflow-x-auto">
        <table class="w-full min-w-[700px]">
            <thead>
                <tr class="bg-gray-50 border-b border-gray-100">
                    <th class="px-6 py-3"><input type="checkbox" id="selectAll" class="rounded"></th>
                    <th class="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase">Pelamar</th>
                    <th class="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase">Lowongan</th>
                    <th class="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase">Status</th>
                    <th class="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase">Tahap</th>
                    <th class="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase">Tanggal</th>
                    <th class="text-right px-6 py-3 text-xs font-medium text-gray-500 uppercase">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @forelse($applications as $app)
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4"><input type="checkbox" name="application_ids[]" value="{{ $app->id }}" class="rounded row-check"></td>
                    <td class="px-6 py-4">
                        <p class="font-medium text-gray-800 text-sm">{{ $app->applicant->name ?? 'N/A' }}</p>
                        <p class="text-xs text-gray-400">{{ $app->applicant->email ?? '' }}</p>
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-600">{{ $app->jobListing->title ?? 'N/A' }}</td>
                    <td class="px-6 py-4">
                        <span class="inline-block px-2 py-1 text-xs font-medium rounded-full {{ $app->status_badge_class }}">
                            {{ $app->status_label }}
                        </span>
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-600">{{ $app->current_stage }}</td>
                    <td class="px-6 py-4 text-xs text-gray-400">{{ $app->applied_at?->format('d/m/Y H:i') }}</td>
                    <td class="px-6 py-4 text-right">
                        <a href="{{ route('admin.applications.show', $app) }}" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium">Detail</a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="px-6 py-12 text-center text-gray-400">Belum ada lamaran</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</form>

<div class="mt-6">{{ $applications->appends(request()->only(['search', 'status', 'job_id']))->links('pagination') }}</div>

<script>
document.getElementById('selectAll')?.addEventListener('change', function() {
    document.querySelectorAll('.row-check').forEach(cb => cb.checked = this.checked);
});
</script>
@endsection