@extends('layouts.app')

@section('title', $jobPosting->title . ' - Career')

@section('content')
<!-- Hero Section -->
<section class="relative py-20 bg-gradient-to-r from-primary to-secondary text-white">
    <div class="container mx-auto px-4">
        <div class="max-w-4xl">
            <div class="mb-6">
                <a href="{{ route('career') }}" class="inline-flex items-center text-white hover:text-yellow-300 transition-colors duration-300">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Back to Careers
                </a>
            </div>
            <h1 class="text-4xl md:text-5xl font-bold mb-4">{{ $jobPosting->title }}</h1>
            <div class="flex flex-wrap gap-4 mb-6">
                <div class="flex items-center">
                    <i class="fas fa-building mr-2"></i>
                    <span>{{ $jobPosting->department }}</span>
                </div>
                <div class="flex items-center">
                    <i class="fas fa-map-marker-alt mr-2"></i>
                    <span>{{ $jobPosting->location }}</span>
                </div>
                <div class="flex items-center">
                    <i class="fas fa-briefcase mr-2"></i>
                    <span>{{ $jobPosting->employment_type }}</span>
                </div>
                @if($jobPosting->salary_range)
                    <div class="flex items-center">
                        <i class="fas fa-money-bill-wave mr-2"></i>
                        <span>{{ $jobPosting->salary_range }}</span>
                    </div>
                @endif
                @if($jobPosting->closing_date)
                    <div class="flex items-center">
                        <i class="fas fa-calendar-alt mr-2"></i>
                        <span>Closes: {{ $jobPosting->closing_date->format('M d, Y') }}</span>
                    </div>
                @endif
            </div>
        </div>
    </div>
</section>

<!-- Success Message -->
@if(session('success'))
    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-6" role="alert">
        <strong class="font-bold">Success!</strong>
        <span class="block sm:inline">{{ session('success') }}</span>
        <span class="absolute top-0 bottom-0 right-0 px-4 py-3">
            <svg class="fill-current h-6 w-6 text-green-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
        </span>
    </div>
@endif

<!-- Job Details Section -->
<section class="py-16 bg-gray-50 dark:bg-gray-900">
    <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto">
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
                <div class="p-8">
                    <div class="mb-10">
                        <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-gray-200 dark:border-gray-700">Job Description</h2>
                        <div class="prose prose-lg dark:prose-invert max-w-none">
                            {!! $jobPosting->description !!}
                        </div>
                    </div>

                    <div class="mb-10">
                        <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-gray-200 dark:border-gray-700">Requirements</h2>
                        <div class="prose prose-lg dark:prose-invert max-w-none">
                            {!! $jobPosting->requirements !!}
                        </div>
                    </div>

                    <div class="flex flex-col sm:flex-row justify-between items-center gap-4 pt-6 border-t border-gray-200 dark:border-gray-700">
                        <div>
                            <p class="text-gray-600 dark:text-gray-400">Posted: {{ $jobPosting->created_at->format('M d, Y') }}</p>
                        </div>
                        <div class="flex gap-3">
                            <button class="px-6 py-3 bg-primary hover:bg-primary-dark text-white font-medium rounded-lg transition duration-300" onclick="document.getElementById('application-form').scrollIntoView({behavior: 'smooth'})">
                                Apply Now
                            </button>
                            <button class="px-6 py-3 bg-transparent border-2 border-primary text-primary hover:bg-primary hover:text-white font-medium rounded-lg transition duration-300">
                                Share Job
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Application Form Section -->
<section class="py-16 bg-white dark:bg-gray-800" id="application-form">
    <div class="container mx-auto px-4">
        <div class="max-w-2xl mx-auto">
            <div class="text-center mb-10">
                <h2 class="text-3xl font-bold mb-4">Apply for This Position</h2>
                <p class="text-gray-600 dark:text-gray-400">Fill out the form below to apply for the {{ $jobPosting->title }} position.</p>
            </div>

            <form action="{{ route('career.apply', $jobPosting->slug) }}" method="POST" enctype="multipart/form-data" class="bg-gray-50 dark:bg-gray-700 rounded-xl p-8 shadow-lg">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <label for="first_name" class="block text-gray-700 dark:text-gray-300 font-medium mb-2">First Name</label>
                        <input type="text" id="first_name" name="first_name" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-gray-800 dark:text-white" required>
                        @error('first_name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label for="last_name" class="block text-gray-700 dark:text-gray-300 font-medium mb-2">Last Name</label>
                        <input type="text" id="last_name" name="last_name" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-gray-800 dark:text-white" required>
                        @error('last_name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div class="mb-6">
                    <label for="email" class="block text-gray-700 dark:text-gray-300 font-medium mb-2">Email Address</label>
                    <input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-gray-800 dark:text-white" required>
                    @error('email')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-6">
                    <label for="phone" class="block text-gray-700 dark:text-gray-300 font-medium mb-2">Phone Number</label>
                    <input type="tel" id="phone" name="phone" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-gray-800 dark:text-white">
                    @error('phone')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-6">
                    <label for="resume" class="block text-gray-700 dark:text-gray-300 font-medium mb-2">Resume/CV</label>
                    <div class="flex items-center justify-center w-full">
                        <label for="resume" class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
                            <div class="flex flex-col items-center justify-center pt-5 pb-6">
                                <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
                                <p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Click to upload</span> or drag and drop</p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">PDF, DOC, DOCX (MAX. 5MB)</p>
                            </div>
                            <input id="resume" name="resume" type="file" class="hidden" />
                        </label>
                    </div>
                    @error('resume')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-6">
                    <label for="cover_letter" class="block text-gray-700 dark:text-gray-300 font-medium mb-2">Cover Letter</label>
                    <textarea id="cover_letter" name="cover_letter" rows="4" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-gray-800 dark:text-white"></textarea>
                    @error('cover_letter')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-6">
                    <div class="flex items-center">
                        <input id="terms" name="terms" type="checkbox" class="w-4 h-4 text-primary bg-gray-100 border-gray-300 rounded focus:ring-primary dark:focus:ring-primary dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" required>
                        <label for="terms" class="ml-2 text-sm text-gray-700 dark:text-gray-300">I agree to the <a href="#" class="text-primary hover:underline">terms and conditions</a></label>
                    </div>
                    @error('terms')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div class="flex justify-end">
                    <button type="submit" class="px-6 py-3 bg-primary hover:bg-primary-dark text-white font-medium rounded-lg transition duration-300">
                        Submit Application
                    </button>
                </div>
            </form>
        </div>
    </div>
</section>
@endsection