@extends('admin.layouts.app')

@section('title', 'Ứng viên')
@section('page-title', 'Quản lý ứng viên')

@section('content')
    <div class="mb-6">
        <div class="flex flex-col lg:flex-row lg:justify-between lg:items-center space-y-4 lg:space-y-0">
            <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
                <span class="text-sm text-gray-600">Tổng: {{ $applicants->total() }} ứng viên</span>
            </div>

            <div class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-4">
                <a href="{{ route('admin.applicants.index', ['clear_filters' => 1]) }}"
                    class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 inline-block text-center">
                    Reset
                </a>
                <form method="GET" class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
                    <select name="status" class="border rounded px-3 py-2 text-sm">
                        <option value="">Tất cả Trạng thái</option>
                        <option value="new" {{ $status == 'new' ? 'selected' : '' }}>Mới</option>
                        <option value="reviewing" {{ $status == 'reviewing' ? 'selected' : '' }}>Đang xem xét</option>
                        <option value="shortlisted" {{ $status == 'shortlisted' ? 'selected' : '' }}>Đã chọn</option>
                        <option value="interviewed" {{ $status == 'interviewed' ? 'selected' : '' }}>Đã phỏng vấn</option>
                        <option value="rejected" {{ $status == 'rejected' ? 'selected' : '' }}>Từ chối</option>
                        <option value="hired" {{ $status == 'hired' ? 'selected' : '' }}>Đã tuyển</option>
                    </select>

                    <select name="job_position_id" class="border rounded px-3 py-2 text-sm">
                        <option value="">Tất cả Vị trí</option>
                        @foreach($jobPositions as $position)
                            <option value="{{ $position->id }}" {{ $job_position_id == $position->id ? 'selected' : '' }}>
                                {{ \Illuminate\Support\Str::limit($position->title, 50, '...') }}
                            </option>
                        @endforeach
                    </select>

                    <div class="flex space-x-2">
                        <input type="text" name="search" placeholder="Tìm kiếm ứng viên..." value="{{ $search }}"
                            class="border rounded px-3 py-2 text-sm flex-1">
                        <button type="submit" class="bg-gray-500 hover:bg-gray-700 text-white px-4 py-2 rounded">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Desktop Table View -->
    <div class="hidden lg:block bg-white rounded-lg shadow overflow-hidden">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ứng viên</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Vị trí ứng
                        tuyển</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Liên hệ</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Lương mong
                        muốn</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Trạng thái
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ngày ứng
                        tuyển</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Thao tác</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @forelse($applicants as $applicant)
                    <tr class="{{ $applicant->status === 'new' ? 'bg-blue-50' : '' }}">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">{{ Str::limit(trim($applicant->full_name), 50) }}
                            </div>
                            <div class="text-sm text-gray-500">{{ Str::limit(trim($applicant->current_position), 50) }}</div>
                            @if($applicant->current_company)
                                <div class="text-sm text-gray-500">{{ $applicant->current_company }}</div>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">
                                {{ Str::limit($applicant->jobPosition->title ?? 'N/A', 50) }}
                            </div>
                            <div class="text-sm text-gray-500">{{ $applicant->jobPosition->department ?? 'N/A' }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-900">{{ $applicant->email }}</div>
                            @if($applicant->phone)
                                <div class="text-sm text-gray-500">{{ $applicant->phone }}</div>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            {{ $applicant->formatted_expected_salary }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span
                                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $applicant->status_badge }}">
                                {{ $applicant->status_label }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ $applicant->applied_at->format('d/m/Y H:i') }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <div class="flex space-x-2">
                                <a href="{{ route('admin.applicants.show', $applicant) }}"
                                    class="text-indigo-600 hover:text-indigo-900">Xem</a>
                                <a href="{{ route('admin.applicants.edit', $applicant) }}"
                                    class="text-yellow-600 hover:text-yellow-900">Sửa</a>
                                <form method="POST" action="{{ route('admin.applicants.destroy', $applicant) }}" class="inline"
                                    onsubmit="return confirm('Bạn có chắc chắn muốn xóa?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-600 hover:text-red-900">Xóa</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="px-6 py-4 text-center text-gray-500">Không có ứng viên nào.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Mobile Card View -->
    <div class="lg:hidden space-y-4">
        @forelse($applicants as $applicant)
            <div class="bg-white rounded-lg shadow p-4 {{ $applicant->status === 'new' ? 'border-l-4 border-blue-500' : '' }}">
                <div class="flex items-start justify-between">
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center justify-between mb-2">
                            <h3 class="text-lg font-medium text-gray-900 truncate">{{ trim($applicant->full_name) }}</h3>
                            <span
                                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $applicant->status_badge }}">
                                {{ $applicant->status_label }}
                            </span>
                        </div>

                        <div class="space-y-1 text-sm text-gray-500 mb-3">
                            <div class="flex items-center">
                                <i class="fas fa-briefcase mr-2"></i>
                                {{ $applicant->jobPosition->title ?? 'N/A' }}
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-envelope mr-2"></i>
                                {{ $applicant->email }}
                            </div>
                            @if($applicant->phone)
                                <div class="flex items-center">
                                    <i class="fas fa-phone mr-2"></i>
                                    {{ $applicant->phone }}
                                </div>
                            @endif
                            <div class="flex items-center">
                                <i class="fas fa-clock mr-2"></i>
                                {{ $applicant->applied_at->format('d/m/Y H:i') }}
                            </div>
                        </div>

                        @if($applicant->current_position)
                            <div class="mb-3">
                                <p class="text-sm text-gray-600">
                                    <strong>Vị trí hiện tại:</strong> {{ trim($applicant->current_position) }}
                                    @if($applicant->current_company)
                                        tại {{ $applicant->current_company }}
                                    @endif
                                </p>
                            </div>
                        @endif

                        <div class="mb-3">
                            <p class="text-sm text-gray-600">
                                <strong>Lương mong muốn:</strong> {{ $applicant->formatted_expected_salary }}
                            </p>
                        </div>

                        <div class="flex flex-wrap gap-2">
                            <a href="{{ route('admin.applicants.show', $applicant) }}"
                                class="text-indigo-600 hover:text-indigo-900 text-sm">Xem</a>
                            <a href="{{ route('admin.applicants.edit', $applicant) }}"
                                class="text-yellow-600 hover:text-yellow-900 text-sm">Sửa</a>
                            <form method="POST" action="{{ route('admin.applicants.destroy', $applicant) }}" class="inline"
                                onsubmit="return confirm('Bạn có chắc chắn muốn xóa?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-red-600 hover:text-red-900 text-sm">Xóa</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="bg-white rounded-lg shadow p-8 text-center">
                <p class="text-gray-500">Không có ứng viên nào.</p>
            </div>
        @endforelse
    </div>

    <div class="mt-6 admin-pagination">
        {{ $applicants->links() }}
    </div>
@endsection
@push('styles')
    <style>
        .admin-pagination [aria-current="page"] span {
            background-color: #2563eb;
            border-color: #2563eb;
            color: #ffffff;
        }

        .premium-label.required::after {
            content: " *";
            color: #ef4444;
        }

        .admin-pagination .pagination .active span,
        .admin-pagination .pagination .active a {
            background-color: #2563eb;
            border-color: #2563eb;
            color: #ffffff;
        }

        .admin-pagination span[aria-disabled="true"]:first-of-type {
            display: none;
        }
    </style>
@endpush