@extends('layouts.admin')

@section('title', 'Create Career')
@section('header', 'Create New Career Listing')

@section('content')
<div class="max-w-5xl mx-auto">
    <div class="bg-white rounded-lg shadow">
        <form action="{{ route('admin.careers.store') }}" method="POST" class="p-6 space-y-8">
            @csrf

            <!-- Basic Information -->
            <div>
                <h3 class="text-lg font-medium text-gray-900 mb-4 pb-2 border-b">Basic Information</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Title -->
                    <div class="md:col-span-2">
                        <label for="title" class="block text-sm font-medium text-gray-700 mb-2">
                            Job Title <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="title" id="title" value="{{ old('title') }}" required
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('title') border-red-500 @enderror"
                               placeholder="e.g., Senior SEO Analyst">
                        @error('title')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Slug -->
                    <div class="md:col-span-2">
                        <label for="slug" class="block text-sm font-medium text-gray-700 mb-2">
                            Slug (URL)
                        </label>
                        <input type="text" name="slug" id="slug" value="{{ old('slug') }}"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('slug') border-red-500 @enderror"
                               placeholder="auto-generated-if-empty">
                        <p class="mt-1 text-sm text-gray-500">Leave empty to auto-generate from title.</p>
                        @error('slug')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Department -->
                    <div>
                        <label for="department" class="block text-sm font-medium text-gray-700 mb-2">
                            Department
                        </label>
                        <select name="department" id="department"
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('department') border-red-500 @enderror">
                            <option value="" {{ old('department') == '' ? 'selected' : '' }}>Select Department</option>
                            <option value="Engineering" {{ old('department') == 'Engineering' ? 'selected' : '' }}>Engineering</option>
                            <option value="Marketing" {{ old('department') == 'Marketing' ? 'selected' : '' }}>Marketing</option>
                            <option value="Sales" {{ old('department') == 'Sales' ? 'selected' : '' }}>Sales</option>
                            <option value="Design" {{ old('department') == 'Design' ? 'selected' : '' }}>Design</option>
                            <option value="Operations" {{ old('department') == 'Operations' ? 'selected' : '' }}>Operations</option>
                            <option value="Human Resources" {{ old('department') == 'Human Resources' ? 'selected' : '' }}>Human Resources</option>
                            <option value="Finance" {{ old('department') == 'Finance' ? 'selected' : '' }}>Finance</option>
                            <option value="Content" {{ old('department') == 'Content' ? 'selected' : '' }}>Content</option>
                            <option value="SEO" {{ old('department') == 'SEO' ? 'selected' : '' }}>SEO</option>
                            <option value="Training" {{ old('department') == 'Training' ? 'selected' : '' }}>Training</option>
                            <option value="Management" {{ old('department') == 'Management' ? 'selected' : '' }}>Management</option>
                            <option value="Other" {{ old('department') == 'Other' ? 'selected' : '' }}>Other</option>
                        </select>
                        @error('department')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Employment Type -->
                    <div>
                        <label for="employment_type" class="block text-sm font-medium text-gray-700 mb-2">
                            Employment Type <span class="text-red-500">*</span>
                        </label>
                        <select name="employment_type" id="employment_type" required
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('employment_type') border-red-500 @enderror">
                            <option value="full-time" {{ old('employment_type') == 'full-time' ? 'selected' : '' }}>Full-time</option>
                            <option value="part-time" {{ old('employment_type') == 'part-time' ? 'selected' : '' }}>Part-time</option>
                            <option value="contract" {{ old('employment_type') == 'contract' ? 'selected' : '' }}>Contract</option>
                            <option value="internship" {{ old('employment_type') == 'internship' ? 'selected' : '' }}>Internship</option>
                            <option value="remote" {{ old('employment_type') == 'remote' ? 'selected' : '' }}>Remote</option>
                        </select>
                        @error('employment_type')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Location & Contact -->
            <div>
                <h3 class="text-lg font-medium text-gray-900 mb-4 pb-2 border-b">Location & Contact</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Location (Short) -->
                    <div>
                        <label for="location" class="block text-sm font-medium text-gray-700 mb-2">
                            Location (Short) <span class="text-red-500">*</span>
                        </label>
                        <select name="location" id="location" required
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('location') border-red-500 @enderror">
                            <option value="" {{ old('location') == '' ? 'selected' : '' }}>Select Location</option>
                            <option value="Thrissur" {{ old('location') == 'Thrissur' ? 'selected' : '' }}>Thrissur</option>
                            <option value="Kochi" {{ old('location') == 'Kochi' ? 'selected' : '' }}>Kochi</option>
                            <option value="Trivandrum" {{ old('location') == 'Trivandrum' ? 'selected' : '' }}>Trivandrum</option>
                            <option value="Calicut" {{ old('location') == 'Calicut' ? 'selected' : '' }}>Calicut</option>
                            <option value="Bangalore" {{ old('location') == 'Bangalore' ? 'selected' : '' }}>Bangalore</option>
                            <option value="Chennai" {{ old('location') == 'Chennai' ? 'selected' : '' }}>Chennai</option>
                            <option value="Hyderabad" {{ old('location') == 'Hyderabad' ? 'selected' : '' }}>Hyderabad</option>
                            <option value="Mumbai" {{ old('location') == 'Mumbai' ? 'selected' : '' }}>Mumbai</option>
                            <option value="Delhi" {{ old('location') == 'Delhi' ? 'selected' : '' }}>Delhi</option>
                            <option value="Remote" {{ old('location') == 'Remote' ? 'selected' : '' }}>Remote</option>
                        </select>
                        @error('location')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Job Location (Full Address) -->
                    <div>
                        <label for="job_location" class="block text-sm font-medium text-gray-700 mb-2">
                            Full Job Location
                        </label>
                        <input type="text" name="job_location" id="job_location" value="{{ old('job_location') }}"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('job_location') border-red-500 @enderror"
                               placeholder="e.g., Infopark, Thrissur, Kerala, 680308, INDIA">
                        @error('job_location')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Contact Email -->
                    <div>
                        <label for="contact_email" class="block text-sm font-medium text-gray-700 mb-2">
                            Contact Email
                        </label>
                        <input type="email" name="contact_email" id="contact_email" value="{{ old('contact_email') }}"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('contact_email') border-red-500 @enderror"
                               placeholder="e.g., hr@galtech.org">
                        @error('contact_email')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Contact Phone -->
                    <div>
                        <label for="contact_phone" class="block text-sm font-medium text-gray-700 mb-2">
                            Contact Phone
                        </label>
                        <input type="text" name="contact_phone" id="contact_phone" value="{{ old('contact_phone') }}"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('contact_phone') border-red-500 @enderror"
                               placeholder="e.g., +91 6282845368">
                        @error('contact_phone')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Job Details -->
            <div>
                <h3 class="text-lg font-medium text-gray-900 mb-4 pb-2 border-b">Job Details</h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                    <!-- Education -->
                    <div>
                        <label for="education" class="block text-sm font-medium text-gray-700 mb-2">
                            Education Requirements
                        </label>
                        <input type="text" name="education" id="education" value="{{ old('education') }}"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('education') border-red-500 @enderror"
                               placeholder="e.g., Bachelor's Degree in Computer Science">
                        @error('education')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Industry -->
                    <div>
                        <label for="industry" class="block text-sm font-medium text-gray-700 mb-2">
                            Industry
                        </label>
                        <select name="industry" id="industry"
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('industry') border-red-500 @enderror">
                            <option value="" {{ old('industry') == '' ? 'selected' : '' }}>Select Industry</option>
                            <option value="Information Technology" {{ old('industry') == 'Information Technology' ? 'selected' : '' }}>Information Technology</option>
                            <option value="Digital Marketing" {{ old('industry') == 'Digital Marketing' ? 'selected' : '' }}>Digital Marketing</option>
                            <option value="E-commerce" {{ old('industry') == 'E-commerce' ? 'selected' : '' }}>E-commerce</option>
                            <option value="Healthcare" {{ old('industry') == 'Healthcare' ? 'selected' : '' }}>Healthcare</option>
                            <option value="Education" {{ old('industry') == 'Education' ? 'selected' : '' }}>Education</option>
                            <option value="Finance" {{ old('industry') == 'Finance' ? 'selected' : '' }}>Finance</option>
                            <option value="Real Estate" {{ old('industry') == 'Real Estate' ? 'selected' : '' }}>Real Estate</option>
                            <option value="Manufacturing" {{ old('industry') == 'Manufacturing' ? 'selected' : '' }}>Manufacturing</option>
                            <option value="Other" {{ old('industry') == 'Other' ? 'selected' : '' }}>Other</option>
                        </select>
                        @error('industry')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Working Hours -->
                    <div>
                        <label for="working_hours" class="block text-sm font-medium text-gray-700 mb-2">
                            Working Hours
                        </label>
                        <input type="text" name="working_hours" id="working_hours" value="{{ old('working_hours') }}"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('working_hours') border-red-500 @enderror"
                               placeholder="e.g., 9:00 AM to 6:00 PM">
                        @error('working_hours')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Skills -->
                    <div class="md:col-span-3">
                        <label for="skills" class="block text-sm font-medium text-gray-700 mb-2">
                            Required Skills
                        </label>
                        <input type="text" name="skills" id="skills" value="{{ old('skills') }}"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('skills') border-red-500 @enderror"
                               placeholder="e.g., SEO, Content Marketing, Google Analytics">
                        @error('skills')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Salary Range -->
                    <div>
                        <label for="salary_range" class="block text-sm font-medium text-gray-700 mb-2">
                            Salary Range
                        </label>
                        <input type="text" name="salary_range" id="salary_range" value="{{ old('salary_range') }}"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('salary_range') border-red-500 @enderror"
                               placeholder="e.g., ₹3,00,000 - ₹5,00,000">
                        @error('salary_range')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Base Salary -->
                    <div>
                        <label for="base_salary" class="block text-sm font-medium text-gray-700 mb-2">
                            Base Salary
                        </label>
                        <input type="text" name="base_salary" id="base_salary" value="{{ old('base_salary') }}"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('base_salary') border-red-500 @enderror"
                               placeholder="e.g., ₹4,00,000 per year">
                        @error('base_salary')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Description -->
                <div class="mb-6">
                    <label for="description" class="block text-sm font-medium text-gray-700 mb-2">
                        Job Description <span class="text-red-500">*</span>
                    </label>
                    <textarea name="description" id="description" rows="5" required
                              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('description') border-red-500 @enderror"
                              placeholder="Brief overview of the position...">{{ old('description') }}</textarea>
                    @error('description')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Responsibilities -->
                <div class="mb-6">
                    <label for="responsibilities" class="block text-sm font-medium text-gray-700 mb-2">
                        Roles & Responsibilities
                    </label>
                    <textarea name="responsibilities" id="responsibilities" rows="5"
                              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('responsibilities') border-red-500 @enderror"
                              placeholder="1. Responsibility one&#10;2. Responsibility two&#10;3. Responsibility three...">{{ old('responsibilities') }}</textarea>
                    @error('responsibilities')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Requirements -->
                <div class="mb-6">
                    <label for="requirements" class="block text-sm font-medium text-gray-700 mb-2">
                        Requirements & Qualifications
                    </label>
                    <textarea name="requirements" id="requirements" rows="5"
                              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('requirements') border-red-500 @enderror"
                              placeholder="1. Required skill one&#10;2. Required skill two&#10;3. Experience requirement...">{{ old('requirements') }}</textarea>
                    @error('requirements')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Benefits -->
                <div>
                    <label for="benefits" class="block text-sm font-medium text-gray-700 mb-2">
                        Benefits
                    </label>
                    <textarea name="benefits" id="benefits" rows="4"
                              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('benefits') border-red-500 @enderror"
                              placeholder="1. Benefit one&#10;2. Benefit two&#10;3. Benefit three...">{{ old('benefits') }}</textarea>
                    @error('benefits')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- Publishing Settings -->
            <div>
                <h3 class="text-lg font-medium text-gray-900 mb-4 pb-2 border-b">Publishing Settings</h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- Date Posted -->
                    <div>
                        <label for="date_posted" class="block text-sm font-medium text-gray-700 mb-2">
                            Date Posted
                        </label>
                        <input type="date" name="date_posted" id="date_posted" value="{{ old('date_posted', date('Y-m-d')) }}"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('date_posted') border-red-500 @enderror">
                        @error('date_posted')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Valid Through -->
                    <div>
                        <label for="valid_through" class="block text-sm font-medium text-gray-700 mb-2">
                            Valid Through
                        </label>
                        <input type="date" name="valid_through" id="valid_through" value="{{ old('valid_through') }}"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('valid_through') border-red-500 @enderror">
                        @error('valid_through')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Is Active -->
                    <div class="flex items-center pt-8">
                        <input type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}
                               class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                        <label for="is_active" class="ml-2 text-sm font-medium text-gray-700">
                            Active (visible on website)
                        </label>
                    </div>
                </div>
            </div>

            <!-- Buttons -->
            <div class="flex items-center justify-end space-x-4 pt-6 border-t">
                <a href="{{ route('admin.careers.index') }}" 
                   class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition">
                    Cancel
                </a>
                <button type="submit" 
                        class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                    Create Career
                </button>
            </div>
        </form>
    </div>
</div>
@endsection