<x-app-layout>
    <x-slot name="header">Edit Career Vacancy</x-slot>

    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden shadow-sm">
        <div class="p-6">
            <form action="{{ route('careers.update', $career) }}" method="POST">
                @csrf
                @method('PUT')
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Job Title *</label>
                        <input type="text" name="title" value="{{ old('title', $career->title) }}" required
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">
                        @error('title') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Department *</label>
                        <input type="text" name="department" value="{{ old('department', $career->department) }}" required
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Location *</label>
                        <input type="text" name="location" value="{{ old('location', $career->location) }}" required
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Type (Full-time, Part-time) *</label>
                        <input type="text" name="type" value="{{ old('type', $career->type) }}" required
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">
                    </div>
                </div>

                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Description *</label>
                    <textarea name="description" rows="4" required
                              class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">{{ old('description', $career->description) }}</textarea>
                </div>

                <div class="mb-6" id="requirements-container">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Requirements</label>
                    @php $requirements = old('requirements', $career->requirements ?? []); @endphp
                    @if(count($requirements) > 0)
                        @foreach($requirements as $index => $req)
                            <div class="requirement-input flex items-center gap-2 mb-2">
                                <input type="text" name="requirements[]" value="{{ $req }}"
                                       class="flex-1 border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">
                                @if($index === 0)
                                    <button type="button" class="add-req bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-2 rounded-lg font-bold">+</button>
                                @else
                                    <button type="button" class="remove-req bg-red-100 hover:bg-red-200 text-red-700 px-3 py-2 rounded-lg font-bold">×</button>
                                @endif
                            </div>
                        @endforeach
                    @else
                        <div class="requirement-input flex items-center gap-2 mb-2">
                            <input type="text" name="requirements[]"
                                   class="flex-1 border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">
                            <button type="button" class="add-req bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-2 rounded-lg font-bold">+</button>
                        </div>
                    @endif
                </div>

                <div class="mb-6">
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" name="is_active" value="1" {{ old('is_active', $career->is_active) ? 'checked' : '' }} class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                        <span class="text-sm font-medium text-gray-700">Active (Visible on website)</span>
                    </label>
                </div>

                <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-100">
                    <a href="{{ route('careers.index') }}" class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg font-medium transition-colors">Cancel</a>
                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition-colors shadow-sm">Update Vacancy</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const container = document.getElementById('requirements-container');
            
            container.addEventListener('click', function(e) {
                if (e.target.classList.contains('add-req')) {
                    const row = document.createElement('div');
                    row.className = 'requirement-input flex items-center gap-2 mb-2';
                    row.innerHTML = `
                        <input type="text" name="requirements[]" class="flex-1 border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">
                        <button type="button" class="remove-req bg-red-100 hover:bg-red-200 text-red-700 px-3 py-2 rounded-lg font-bold">×</button>
                    `;
                    container.appendChild(row);
                } else if (e.target.classList.contains('remove-req')) {
                    e.target.closest('.requirement-input').remove();
                }
            });
        });
    </script>
</x-app-layout>
