@extends('admin.layouts.app')

@section('title', 'Job Position Details')
@section('page-title', 'Chi tiết Vị trí Tuyển dụng')

@section('content')
<div class="max-w-6xl mx-auto">
    <!-- Header Actions -->
    <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between">
        <div class="flex items-center space-x-4">
            <a href="{{ route('admin.job-positions.index') }}" class="text-gray-600 hover:text-gray-900">
                <i class="fas fa-arrow-left mr-2"></i> Quay lại
            </a>
            <div class="flex items-center space-x-2">
                @if($jobPosition->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
                <span class="px-2 py-1 text-xs font-semibold rounded-full {{ $jobPosition->status_badge }}">
                    {{ ucfirst($jobPosition->status) }}
                </span>
            </div>
        </div>
        
        <div class="flex space-x-2 mt-4 sm:mt-0">
            <a href="{{ route('admin.job-positions.edit', $jobPosition) }}" 
               class="bg-yellow-500 hover:bg-yellow-700 text-white px-4 py-2 rounded text-sm">
                <i class="fas fa-edit mr-1"></i> Chỉnh sửa
            </a>
            <a href="{{ route('admin.applicants.index', ['job_position_id' => $jobPosition->id]) }}" 
               class="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm">
                <i class="fas fa-users mr-1"></i> Xem Ứng viên ({{ $jobPosition->applicants->count() }})
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Main Content -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Job Information -->
            <div class="bg-white rounded-lg shadow p-6">
                <h2 class="text-2xl font-bold text-gray-900 mb-4">{{ $jobPosition->title }}</h2>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                    <div class="flex items-center">
                        <i class="fas fa-building text-gray-400 mr-3"></i>
                        <div>
                            <p class="text-sm text-gray-500">Phòng ban</p>
                            <p class="font-medium">{{ $jobPosition->department }}</p>
                        </div>
                    </div>
                    
                    <div class="flex items-center">
                        <i class="fas fa-map-marker-alt text-gray-400 mr-3"></i>
                        <div>
                            <p class="text-sm text-gray-500">Địa điểm</p>
                            <p class="font-medium">{{ $jobPosition->location }}</p>
                        </div>
                    </div>
                    
                    <div class="flex items-center">
                        <i class="fas fa-briefcase text-gray-400 mr-3"></i>
                        <div>
                            <p class="text-sm text-gray-500">Loại hình</p>
                            <p class="font-medium">{{ $jobPosition->employment_type_label }}</p>
                        </div>
                    </div>
                    
                    <div class="flex items-center">
                        <i class="fas fa-chart-line text-gray-400 mr-3"></i>
                        <div>
                            <p class="text-sm text-gray-500">Cấp độ</p>
                            <p class="font-medium">{{ $jobPosition->experience_level_label }}</p>
                        </div>
                    </div>
                    
                    <div class="flex items-center">
                        <i class="fas fa-money-bill-wave text-gray-400 mr-3"></i>
                        <div>
                            <p class="text-sm text-gray-500">Lương</p>
                            <p class="font-medium">{{ $jobPosition->formatted_salary }}</p>
                        </div>
                    </div>
                    
                    <div class="flex items-center">
                        <i class="fas fa-users text-gray-400 mr-3"></i>
                        <div>
                            <p class="text-sm text-gray-500">Ứng viên</p>
                            <p class="font-medium">{{ $jobPosition->applicants_count }} 
                                @if($jobPosition->max_applications)
                                    / {{ $jobPosition->max_applications }}
                                @endif
                            </p>
                        </div>
                    </div>
                </div>
                
                @if($jobPosition->application_deadline)
                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
                        <div class="flex items-center">
                            <i class="fas fa-clock text-blue-600 mr-2"></i>
                            <span class="text-blue-800 font-medium">
                                Hạn nộp hồ sơ: {{ $jobPosition->application_deadline->format('d/m/Y') }}
                            </span>
                        </div>
                    </div>
                @endif
            </div>

            <!-- Job Description -->
            <div class="bg-white rounded-lg shadow p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Mô tả công việc</h3>
                <div class="prose max-w-none">
                    {!! nl2br(e($jobPosition->description)) !!}
                </div>
            </div>

            <!-- Requirements -->
            <div class="bg-white rounded-lg shadow p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Yêu cầu</h3>
                <div class="prose max-w-none">
                    {!! nl2br(e($jobPosition->requirements)) !!}
                </div>
            </div>

            <!-- Benefits -->
            <div class="bg-white rounded-lg shadow p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Quyền lợi</h3>
                <div class="prose max-w-none">
                    {!! nl2br(e($jobPosition->benefits)) !!}
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Quick Stats -->
            <div class="bg-white rounded-lg shadow p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Thống kê</h3>
                
                <div class="space-y-4">
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">Tổng ứng viên</span>
                        <span class="font-semibold text-lg">{{ $jobPosition->applicants_count }}</span>
                    </div>
                    
                    @if($jobPosition->max_applications)
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">Giới hạn</span>
                            <span class="font-semibold">{{ $jobPosition->max_applications }}</span>
                        </div>
                        
                        <div class="w-full bg-gray-200 rounded-full h-2">
                            <div class="bg-blue-600 h-2 rounded-full" 
                                 style="width: {{ min(100, ($jobPosition->applicants_count / $jobPosition->max_applications) * 100) }}%"></div>
                        </div>
                    @endif
                    
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">Trạng thái</span>
                        <span class="px-2 py-1 text-xs font-semibold rounded-full {{ $jobPosition->status_badge }}">
                            {{ ucfirst($jobPosition->status) }}
                        </span>
                    </div>
                    
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">Ngày tạo</span>
                        <span class="text-sm">{{ $jobPosition->created_at->format('d/m/Y') }}</span>
                    </div>
                </div>
            </div>

            <!-- Recent Applicants -->
            <div class="bg-white rounded-lg shadow p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Ứng viên gần đây</h3>
                
                @if($jobPosition->applicants->count() > 0)
                    <div class="space-y-3">
                        @foreach($jobPosition->applicants->take(5) as $applicant)
                            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                <div class="flex-1 min-w-0">
                                    <p class="text-sm font-medium text-gray-900 truncate">
                                        {{ $applicant->full_name }}
                                    </p>
                                    <p class="text-xs text-gray-500">
                                        {{ $applicant->applied_at->format('d/m/Y H:i') }}
                                    </p>
                                </div>
                                <div class="ml-2">
                                    <span class="px-2 py-1 text-xs font-semibold rounded-full {{ $applicant->status_badge }}">
                                        {{ $applicant->status_label }}
                                    </span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    
                    @if($jobPosition->applicants->count() > 5)
                        <div class="mt-4 text-center">
                            <a href="{{ route('admin.applicants.index', ['job_position_id' => $jobPosition->id]) }}" 
                               class="text-blue-600 hover:text-blue-800 text-sm">
                                Xem tất cả {{ $jobPosition->applicants_count }} ứng viên
                            </a>
                        </div>
                    @endif
                @else
                    <p class="text-gray-500 text-sm">Chưa có ứng viên nào</p>
                @endif
            </div>

            <!-- Job Details -->
            <div class="bg-white rounded-lg shadow p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Thông tin chi tiết</h3>
                
                <div class="space-y-3 text-sm">
                    <div class="flex justify-between">
                        <span class="text-gray-600">Slug:</span>
                        <span class="font-mono text-xs">{{ $jobPosition->slug }}</span>
                    </div>
                    
                    <div class="flex justify-between">
                        <span class="text-gray-600">Thứ tự:</span>
                        <span>{{ $jobPosition->sort_order }}</span>
                    </div>
                    
                    @if($jobPosition->start_date)
                        <div class="flex justify-between">
                            <span class="text-gray-600">Ngày bắt đầu:</span>
                            <span>{{ $jobPosition->start_date->format('d/m/Y') }}</span>
                        </div>
                    @endif
                    
                    <div class="flex justify-between">
                        <span class="text-gray-600">Cập nhật:</span>
                        <span>{{ $jobPosition->updated_at->format('d/m/Y H:i') }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection