@extends('admin.layouts.app')

@section('title', 'Job Positions')
@section('page-title', 'Quản lý Vị trí Tuyển dụng')

@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">
                <a href="{{ route('admin.job-positions.create') }}"
                    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded inline-flex items-center justify-center">
                    <i class="fas fa-plus mr-2"></i> Thêm Vị trí Mới
                </a>
            </div>

            <div class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-4">
                <a href="{{ route('admin.job-positions.index') }}"
                    class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 inline-block">
                    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="active" {{ request('status') == 'active' ? 'selected' : '' }}>Đang tuyển</option>
                        <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Tạm dừng</option>
                        <option value="closed" {{ request('status') == 'closed' ? 'selected' : '' }}>Đã đóng</option>
                    </select>

                    <select name="department" class="border rounded px-3 py-2 text-sm">
                        <option value="">Tất cả Phòng ban</option>
                        <option value="IT" {{ request('department') == 'IT' ? 'selected' : '' }}>IT</option>
                        <option value="Marketing" {{ request('department') == 'Marketing' ? 'selected' : '' }}>Marketing
                        </option>
                        <option value="Sales" {{ request('department') == 'Sales' ? 'selected' : '' }}>Sales</option>
                        <option value="HR" {{ request('department') == 'HR' ? 'selected' : '' }}>HR</option>
                        <option value="Finance" {{ request('department') == 'Finance' ? 'selected' : '' }}>Finance</option>
                    </select>

                    <div class="flex space-x-2">
                        <input type="text" name="search" placeholder="Tìm kiếm vị trí..."
                            value="{{ request('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">Vị trí</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phòng ban
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Loại hình
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Lương</th>
                    <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">Trạng thái
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nổi bật</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($jobPositions as $position)
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">{{ $position->title }}</div>
                            <div class="text-sm text-gray-500">{{ $position->location }}</div>
                            <div class="text-xs text-gray-400">{{ $position->experience_level_label }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            {{ $position->department }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ $position->employment_type_label }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            {{ $position->formatted_salary }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            <div class="flex items-center">
                                <span class="text-lg font-semibold">{{ $position->applicants_count }}</span>
                                @if ($position->max_applications)
                                    <span class="text-gray-400 ml-1">/ {{ $position->max_applications }}</span>
                                @endif
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span
                                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $position->status_badge }}">
                                {{ ucfirst($position->status) }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <button onclick="toggleFeatured({{ $position->id }})"
                                class="text-sm font-medium {{ $position->is_featured ? 'text-yellow-600' : 'text-gray-400' }}">
                                <i class="fas fa-star"></i>
                            </button>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <div class="flex space-x-2">
                                <a href="{{ route('admin.job-positions.show', $position) }}"
                                    class="text-indigo-600 hover:text-indigo-900">Xem</a>
                                <a href="{{ route('admin.job-positions.edit', $position) }}"
                                    class="text-yellow-600 hover:text-yellow-900">Sửa</a>
                                <form method="POST" action="{{ route('admin.job-positions.destroy', $position) }}"
                                    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="8" class="px-6 py-4 text-center text-gray-500">Không có vị trí tuyển dụng nào.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Mobile Card View -->
    <div class="lg:hidden space-y-4">
        @forelse($jobPositions as $position)
            <div class="bg-white rounded-lg shadow p-4">
                <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">{{ $position->title }}</h3>
                            <div class="flex items-center space-x-2">
                                @if ($position->is_featured)
                                    <i class="fas fa-star text-yellow-500"></i>
                                @endif
                                <span
                                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $position->status_badge }}">
                                    {{ ucfirst($position->status) }}
                                </span>
                            </div>
                        </div>

                        <div class="space-y-1 text-sm text-gray-500 mb-3">
                            <div class="flex items-center">
                                <i class="fas fa-building mr-2"></i>
                                {{ $position->department }}
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-map-marker-alt mr-2"></i>
                                {{ $position->location }}
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-briefcase mr-2"></i>
                                {{ $position->employment_type_label }} - {{ $position->experience_level_label }}
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-money-bill-wave mr-2"></i>
                                {{ $position->formatted_salary }}
                            </div>
                        </div>

                        <div class="flex items-center justify-between mb-3">
                            <div class="flex items-center text-sm text-gray-600">
                                <i class="fas fa-users mr-1"></i>
                                <span class="font-semibold">{{ $position->applicants_count }}</span>
                                @if ($position->max_applications)
                                    <span class="text-gray-400">/ {{ $position->max_applications }}</span>
                                @endif
                                <span class="ml-1">ứng viên</span>
                            </div>
                        </div>

                        <div class="flex flex-wrap gap-2">
                            <a href="{{ route('admin.job-positions.show', $position) }}"
                                class="text-indigo-600 hover:text-indigo-900 text-sm">Xem</a>
                            <a href="{{ route('admin.job-positions.edit', $position) }}"
                                class="text-yellow-600 hover:text-yellow-900 text-sm">Sửa</a>
                            <form method="POST" action="{{ route('admin.job-positions.destroy', $position) }}"
                                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ó vị trí tuyển dụng nào.</p>
            </div>
        @endforelse
    </div>

    <div class="mt-6">
        {{ $jobPositions->links() }}
    </div>

    <script>
        function toggleFeatured(positionId) {
            fetch(`/admin/job-positions/${positionId}/toggle-featured`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Content-Type': 'application/json',
                    },
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload();
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }
    </script>
@endsection