@extends('layouts.admin')

@section('title', 'View Career')
@section('header', 'Career Details')

@section('content')
<div class="max-w-5xl mx-auto space-y-6">
    <!-- Career Info Card -->
    <div class="bg-white rounded-lg shadow">
        <div class="p-6 border-b border-gray-200 flex justify-between items-start">
            <div>
                <h2 class="text-2xl font-bold text-gray-900">{{ $career->title }}</h2>
                <p class="mt-1 text-sm text-gray-500">Slug: {{ $career->slug }}</p>
            </div>
            <div class="flex space-x-2">
                <span class="px-3 py-1 rounded-full text-sm font-medium 
                    {{ $career->is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                    {{ $career->is_active ? 'Active' : 'Inactive' }}
                </span>
            </div>
        </div>

        <div class="p-6 space-y-6">
            <!-- Quick Stats -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 bg-gray-50 rounded-lg p-4">
                <div>
                    <span class="text-xs font-medium text-gray-500 uppercase">Applications</span>
                    <p class="mt-1 text-2xl font-bold text-blue-600">{{ $career->applications->count() }}</p>
                </div>
                <div>
                    <span class="text-xs font-medium text-gray-500 uppercase">Department</span>
                    <p class="mt-1 text-sm font-medium text-gray-900">{{ $career->department ?? 'N/A' }}</p>
                </div>
                <div>
                    <span class="text-xs font-medium text-gray-500 uppercase">Employment Type</span>
                    <p class="mt-1 text-sm font-medium text-gray-900">{{ ucfirst($career->employment_type) }}</p>
                </div>
                <div>
                    <span class="text-xs font-medium text-gray-500 uppercase">Valid Through</span>
                    <p class="mt-1 text-sm font-medium text-gray-900">{{ $career->valid_through ? $career->valid_through->format('M d, Y') : 'No expiry' }}</p>
                </div>
            </div>

            <!-- Location & Contact -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-3">Location</h3>
                    <div class="space-y-2">
                        <p class="text-sm"><span class="text-gray-500">Short:</span> {{ $career->location }}</p>
                        @if($career->job_location)
                            <p class="text-sm"><span class="text-gray-500">Full:</span> {{ $career->job_location }}</p>
                        @endif
                    </div>
                </div>
                <div>
                    <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-3">Contact</h3>
                    <div class="space-y-2">
                        @if($career->contact_email)
                            <p class="text-sm"><span class="text-gray-500">Email:</span> {{ $career->contact_email }}</p>
                        @endif
                        @if($career->contact_phone)
                            <p class="text-sm"><span class="text-gray-500">Phone:</span> {{ $career->contact_phone }}</p>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Job Details -->
            <div>
                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-3">Job Details</h3>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    @if($career->education)
                        <div>
                            <span class="text-xs text-gray-500">Education</span>
                            <p class="text-sm font-medium">{{ $career->education }}</p>
                        </div>
                    @endif
                    @if($career->industry)
                        <div>
                            <span class="text-xs text-gray-500">Industry</span>
                            <p class="text-sm font-medium">{{ $career->industry }}</p>
                        </div>
                    @endif
                    @if($career->working_hours)
                        <div>
                            <span class="text-xs text-gray-500">Working Hours</span>
                            <p class="text-sm font-medium">{{ $career->working_hours }}</p>
                        </div>
                    @endif
                    @if($career->salary_range)
                        <div>
                            <span class="text-xs text-gray-500">Salary Range</span>
                            <p class="text-sm font-medium">{{ $career->salary_range }}</p>
                        </div>
                    @endif
                </div>
                @if($career->skills)
                    <div class="mt-4">
                        <span class="text-xs text-gray-500">Skills:</span>
                        <p class="text-sm font-medium">{{ $career->skills }}</p>
                    </div>
                @endif
            </div>

            <!-- Description -->
            <div>
                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-3">Description</h3>
                <div class="prose max-w-none text-gray-700 whitespace-pre-wrap bg-gray-50 p-4 rounded-lg">{{ $career->description }}</div>
            </div>

            <!-- Responsibilities -->
            @if($career->responsibilities)
            <div>
                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-3">Responsibilities</h3>
                <div class="prose max-w-none text-gray-700 whitespace-pre-wrap bg-gray-50 p-4 rounded-lg">{{ $career->responsibilities }}</div>
            </div>
            @endif

            <!-- Requirements -->
            @if($career->requirements)
            <div>
                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-3">Requirements</h3>
                <div class="prose max-w-none text-gray-700 whitespace-pre-wrap bg-gray-50 p-4 rounded-lg">{{ $career->requirements }}</div>
            </div>
            @endif

            <!-- Benefits -->
            @if($career->benefits)
            <div>
                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-3">Benefits</h3>
                <div class="prose max-w-none text-gray-700 whitespace-pre-wrap bg-gray-50 p-4 rounded-lg">{{ $career->benefits }}</div>
            </div>
            @endif

            <!-- Public Link -->
            <div class="bg-blue-50 rounded-lg p-4">
                <h4 class="text-sm font-medium text-blue-900 mb-2">Public URL</h4>
                <div class="flex items-center space-x-2">
                    <input type="text" readonly value="{{ url('/careers/' . $career->slug) }}" 
                           class="flex-1 px-3 py-2 border border-blue-200 rounded text-sm text-blue-800 bg-white">
                    <a href="{{ url('/careers/' . $career->slug) }}" target="_blank"
                       class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition text-sm">
                        View on Site
                    </a>
                </div>
            </div>
        </div>

        <!-- Actions -->
        <div class="px-6 py-4 bg-gray-50 rounded-b-lg border-t flex justify-between items-center">
            <form action="{{ route('admin.careers.destroy', $career) }}" method="POST" class="inline"
                  onsubmit="return confirm('Are you sure you want to delete this career?')">
                @csrf
                @method('DELETE')
                <button type="submit" class="text-red-600 hover:text-red-800 font-medium">
                    Delete Career
                </button>
            </form>
            
            <div class="flex space-x-4">
                <a href="{{ route('admin.careers.index') }}" 
                   class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-white transition">
                    Back to List
                </a>
                <a href="{{ route('admin.careers.edit', $career) }}" 
                   class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                    Edit Career
                </a>
            </div>
        </div>
    </div>

    <!-- Applications Section -->
    <div class="bg-white rounded-lg shadow">
        <div class="p-6 border-b border-gray-200 flex justify-between items-center">
            <h3 class="text-lg font-medium text-gray-900">Applications ({{ $career->applications->count() }})</h3>
            <a href="{{ route('admin.applications.index', ['career_id' => $career->id]) }}" 
               class="text-blue-600 hover:text-blue-800 text-sm font-medium">
                View All Applications →
            </a>
        </div>
        
        <div class="overflow-x-auto">
            @if($career->applications->count() > 0)
                <table class="w-full">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Applicant</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Position</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Applied</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @foreach($career->applications->take(5) as $application)
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4">
                                    <div class="text-sm font-medium text-gray-900">{{ $application->name }}</div>
                                    <div class="text-sm text-gray-500">{{ $application->email }}</div>
                                </td>
                                <td class="px-6 py-4 text-sm text-gray-900">{{ $application->position }}</td>
                                <td class="px-6 py-4">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-{{ $application->status_color }}-100 text-{{ $application->status_color }}-800">
                                        {{ $application->status_label }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 text-sm text-gray-500">{{ $application->created_at->format('M d, Y') }}</td>
                                <td class="px-6 py-4 text-right">
                                    <a href="{{ route('admin.applications.show', $application) }}" 
                                       class="text-blue-600 hover:text-blue-900 text-sm font-medium">View</a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                @if($career->applications->count() > 5)
                    <div class="px-6 py-3 border-t text-center">
                        <a href="{{ route('admin.applications.index', ['career_id' => $career->id]) }}" 
                           class="text-blue-600 hover:text-blue-800 text-sm">
                            View {{ $career->applications->count() - 5 }} more applications →
                        </a>
                    </div>
                @endif
            @else
                <div class="p-8 text-center text-gray-500">
                    <svg class="w-12 h-12 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                    <p>No applications yet.</p>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection