@extends('layouts.admin')

@section('title', isset($career_section) ? 'Edit Career Section' : 'Add Career Section')

@section('admin_content')
    <div class="mb-10">
        <a href="{{ route('admin.career_sections.index') }}" class="text-secondary hover:text-primary transition-colors flex items-center text-sm mb-4">
            <i class="fas fa-arrow-left mr-2 text-[10px]"></i> Back to Sections
        </a>
        <h3 class="text-2xl font-bold">{{ isset($career_section) ? 'Edit Career Section' : 'Create New Career Section' }}</h3>
        <p class="text-secondary text-sm">Configure dynamic content sections for the Careers page.</p>
    </div>

    <div class="admin-card rounded-[2rem] p-8 max-w-4xl">
        <form action="{{ isset($career_section) ? route('admin.career_sections.update', $career_section) : route('admin.career_sections.store') }}" method="POST">
            @csrf
            @if(isset($career_section))
                @method('PUT')
            @endif

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="space-y-6">
                    <div>
                        <label class="block text-[0.6rem] uppercase tracking-widest text-secondary font-bold mb-2">Section Type</label>
                        <select name="type" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-primary/50 transition-all appearance-none" required>
                            <option value="header" {{ old('type', $career_section->type ?? '') == 'header' ? 'selected' : '' }} class="bg-[#1a1a1a]">Header Section</option>
                            <option value="feature" {{ old('type', $career_section->type ?? '') == 'feature' ? 'selected' : '' }} class="bg-[#1a1a1a]">Why Join Us Feature</option>
                        </select>
                        @error('type') <span class="text-red-400 text-[10px] mt-1">{{ $message }}</span> @enderror
                    </div>

                    <div>
                        <label class="block text-[0.6rem] uppercase tracking-widest text-secondary font-bold mb-2">Title</label>
                        <input type="text" name="title" value="{{ old('title', $career_section->title ?? '') }}" 
                            class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-primary/50 transition-all"
                            placeholder="Title" required>
                        @error('title') <span class="text-red-400 text-[10px] mt-1">{{ $message }}</span> @enderror
                    </div>

                    <div>
                        <label class="block text-[0.6rem] uppercase tracking-widest text-secondary font-bold mb-2">Subtitle (Optional)</label>
                        <input type="text" name="subtitle" value="{{ old('subtitle', $career_section->subtitle ?? '') }}" 
                            class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-primary/50 transition-all"
                            placeholder="Subtitle">
                        @error('subtitle') <span class="text-red-400 text-[10px] mt-1">{{ $message }}</span> @enderror
                    </div>
                </div>

                <div class="space-y-6">
                    <div>
                        <label class="block text-[0.6rem] uppercase tracking-widest text-secondary font-bold mb-2">Icon (For Features)</label>
                        <input type="text" name="icon" value="{{ old('icon', $career_section->icon ?? '') }}" 
                            class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-primary/50 transition-all"
                            placeholder="fas fa-rocket">
                        <p class="text-[10px] text-secondary mt-1">Example: fas fa-rocket, fas fa-users, fas fa-globe</p>
                        @error('icon') <span class="text-red-400 text-[10px] mt-1">{{ $message }}</span> @enderror
                    </div>

                    <div>
                        <label class="block text-[0.6rem] uppercase tracking-widest text-secondary font-bold mb-2">Description</label>
                        <textarea name="description" rows="5" 
                            class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-primary/50 transition-all resize-none"
                            placeholder="Description content..." required>{{ old('description', $career_section->description ?? '') }}</textarea>
                        @error('description') <span class="text-red-400 text-[10px] mt-1">{{ $message }}</span> @enderror
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-[0.6rem] uppercase tracking-widest text-secondary font-bold mb-2">Display Order</label>
                            <input type="number" name="order" value="{{ old('order', $career_section->order ?? 0) }}" 
                                class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-primary/50 transition-all"
                                required>
                            @error('order') <span class="text-red-400 text-[10px] mt-1">{{ $message }}</span> @enderror
                        </div>
                        <div>
                            <label class="block text-[0.6rem] uppercase tracking-widest text-secondary font-bold mb-2">Status</label>
                            <select name="status" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-primary/50 transition-all appearance-none">
                                <option value="1" {{ old('status', $career_section->status ?? 1) == 1 ? 'selected' : '' }} class="bg-[#1a1a1a]">Active</option>
                                <option value="0" {{ old('status', $career_section->status ?? 1) == 0 ? 'selected' : '' }} class="bg-[#1a1a1a]">Inactive</option>
                            </select>
                            @error('status') <span class="text-red-400 text-[10px] mt-1">{{ $message }}</span> @enderror
                        </div>
                    </div>

                    <div class="pt-4">
                        <button type="submit" class="w-full py-4 bg-primary text-black font-bold rounded-xl hover:translate-y-[-2px] transition-all shadow-lg shadow-primary/10">
                            {{ isset($career_section) ? 'Update Section' : 'Create Section' }}
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection