@extends('layouts.app')

@section('title', 'Tuyển dụng - LVT Global')
@section('description', 'Khám phá cơ hội nghề nghiệp tại LVT Global. Chúng tôi đang tìm kiếm những tài năng xuất sắc để cùng phát triển.')

@section('content')
<div class="min-h-screen bg-gray-50">
    <!-- Hero Section -->
    <div class="bg-gradient-to-r from-blue-600 to-blue-800 text-white py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <h1 class="text-4xl md:text-5xl font-bold mb-4">Cơ hội nghề nghiệp</h1>
                <p class="text-xl md:text-2xl mb-8">Gia nhập đội ngũ LVT Global và cùng chúng tôi tạo ra những sản phẩm công nghệ tuyệt vời</p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <div class="bg-white bg-opacity-20 rounded-lg px-6 py-3">
                        <i class="fas fa-users text-2xl mb-2"></i>
                        <p class="font-semibold">{{ $jobPositions->total() }} vị trí</p>
                    </div>
                    <div class="bg-white bg-opacity-20 rounded-lg px-6 py-3">
                        <i class="fas fa-building text-2xl mb-2"></i>
                        <p class="font-semibold">{{ $departments->count() }} phòng ban</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Search & Filter -->
    <div class="bg-white shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <form method="GET" class="space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                    <div>
                        <label for="search" class="block text-sm font-medium text-gray-700 mb-2">Tìm kiếm</label>
                        <input type="text" name="search" id="search" value="{{ request('search') }}" 
                               placeholder="Tên vị trí, mô tả..." 
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    
                    <div>
                        <label for="department" class="block text-sm font-medium text-gray-700 mb-2">Phòng ban</label>
                        <select name="department" id="department" 
                                class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">Tất cả phòng ban</option>
                            @foreach($departments as $dept)
                                <option value="{{ $dept }}" {{ request('department') == $dept ? 'selected' : '' }}>
                                    {{ $dept }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div>
                        <label for="employment_type" class="block text-sm font-medium text-gray-700 mb-2">Loại hình</label>
                        <select name="employment_type" id="employment_type" 
                                class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">Tất cả loại hình</option>
                            <option value="full-time" {{ request('employment_type') == 'full-time' ? 'selected' : '' }}>Toàn thời gian</option>
                            <option value="part-time" {{ request('employment_type') == 'part-time' ? 'selected' : '' }}>Bán thời gian</option>
                            <option value="contract" {{ request('employment_type') == 'contract' ? 'selected' : '' }}>Hợp đồng</option>
                            <option value="internship" {{ request('employment_type') == 'internship' ? 'selected' : '' }}>Thực tập</option>
                        </select>
                    </div>
                    
                    <div>
                        <label for="experience_level" class="block text-sm font-medium text-gray-700 mb-2">Cấp độ</label>
                        <select name="experience_level" id="experience_level" 
                                class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">Tất cả cấp độ</option>
                            <option value="entry" {{ request('experience_level') == 'entry' ? 'selected' : '' }}>Mới tốt nghiệp</option>
                            <option value="mid" {{ request('experience_level') == 'mid' ? 'selected' : '' }}>Trung cấp</option>
                            <option value="senior" {{ request('experience_level') == 'senior' ? 'selected' : '' }}>Cao cấp</option>
                            <option value="executive" {{ request('experience_level') == 'executive' ? 'selected' : '' }}>Quản lý</option>
                        </select>
                    </div>
                </div>
                
                <div class="flex justify-center">
                    <button type="submit" class="bg-blue-600 text-white px-8 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <i class="fas fa-search mr-2"></i> Tìm kiếm
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Job Listings -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        @if($jobPositions->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($jobPositions as $position)
                    <div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-6">
                        <div class="flex items-start justify-between mb-4">
                            <div class="flex-1">
                                <h3 class="text-lg font-semibold text-gray-900 mb-2">{{ $position->title }}</h3>
                                <div class="flex items-center text-sm text-gray-600 mb-2">
                                    <i class="fas fa-building mr-2"></i>
                                    {{ $position->department }}
                                </div>
                                <div class="flex items-center text-sm text-gray-600 mb-2">
                                    <i class="fas fa-map-marker-alt mr-2"></i>
                                    {{ $position->location }}
                                </div>
                            </div>
                            @if($position->is_featured)
                                <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs font-semibold rounded-full">
                                    <i class="fas fa-star mr-1"></i> Nổi bật
                                </span>
                            @endif
                        </div>
                        
                        <div class="space-y-2 mb-4">
                            <div class="flex items-center text-sm text-gray-600">
                                <i class="fas fa-briefcase mr-2"></i>
                                {{ $position->employment_type_label }}
                            </div>
                            <div class="flex items-center text-sm text-gray-600">
                                <i class="fas fa-chart-line mr-2"></i>
                                {{ $position->experience_level_label }}
                            </div>
                            <div class="flex items-center text-sm text-gray-600">
                                <i class="fas fa-money-bill-wave mr-2"></i>
                                {{ $position->formatted_salary }}
                            </div>
                        </div>
                        
                        <p class="text-gray-600 text-sm mb-4 line-clamp-3">
                            {{ Str::limit(strip_tags($position->description), 120) }}
                        </p>
                        
                        <div class="flex items-center justify-between">
                            <div class="flex items-center text-sm text-gray-500">
                                <i class="fas fa-users mr-1"></i>
                                {{ $position->applicants_count }} ứng viên
                            </div>
                            
                            <div class="flex space-x-2">
                                <a href="{{ route('careers.show', $position) }}" 
                                   class="text-blue-600 hover:text-blue-800 text-sm font-medium">
                                    Xem chi tiết
                                </a>
                                <a href="{{ route('careers.apply', $position) }}" 
                                   class="bg-blue-600 text-white px-4 py-1 rounded text-sm hover:bg-blue-700">
                                    Ứng tuyển
                                </a>
                            </div>
                        </div>
                        
                        @if($position->application_deadline)
                            <div class="mt-3 text-xs text-gray-500">
                                <i class="fas fa-clock mr-1"></i>
                                Hạn nộp: {{ $position->application_deadline->format('d/m/Y') }}
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>
            
            <!-- Pagination -->
            <div class="mt-12">
                {{ $jobPositions->links() }}
            </div>
        @else
            <div class="text-center py-12">
                <i class="fas fa-search text-6xl text-gray-300 mb-4"></i>
                <h3 class="text-xl font-semibold text-gray-900 mb-2">Không tìm thấy vị trí nào</h3>
                <p class="text-gray-600 mb-6">Hãy thử thay đổi bộ lọc tìm kiếm của bạn</p>
                <a href="{{ route('careers.index') }}" class="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700">
                    Xem tất cả vị trí
                </a>
            </div>
        @endif
    </div>
</div>
@endsection