@extends('dashboard.layouts.app')
@section('content')
<div class="container mt-5">
    <div class="card shadow-lg border-0 rounded-3">
        <div class="card-header py-3">
            <div class="mb-0"><i class="fas fa-plus-circle"></i> Add New Requirement</div>
        </div>
        <div class="card-body px-4 py-4">
            <form action="{{ route('recuirements.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="mb-3">
                    <label for="department_id" class="form-label">Department <span class="text-danger">*</span></label>
                    <select name="department_id" id="department_id"
                        class="form-select select2 @error('department_id') is-invalid @enderror" required>
                        <option value="">Select Department</option>
                        @foreach ($departments as $dept)
                        <option value="{{ $dept->id }}">{{ $dept->name }}</option>
                        @endforeach
                    </select>
                    @error('department_id')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label for="job_title_id" class="form-label">Job Title <span class="text-danger">*</span></label>
                    <select name="job_title_id" id="job_title_id"
                        class="form-select select2 @error('job_title_id') is-invalid @enderror" required>
                        <option value="">Select Job Title</option>
                    </select>
                    @error('job_title_id')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Priority -->
                <div class="mb-3">
                    <label for="priority" class="form-label">Priority <span class="text-danger">*</span></label>
                    <select name="priority" id="priority"
                        class="form-select @error('priority') is-invalid @enderror" required>
                        <option value="">Select Priority</option>
                        <option value="high" {{ old('priority') == 'high' ? 'selected' : '' }}>High</option>
                        <option value="medium" {{ old('priority', 'medium') == 'medium' ? 'selected' : '' }}>Medium</option>
                        <option value="low" {{ old('priority') == 'low' ? 'selected' : '' }}>Low</option>
                    </select>
                    @error('priority')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Salary Range -->
                <div class="mb-3">
                    <label for="salary_range" class="form-label">Salary Range</label>
                    <input type="text" name="salary_range" id="salary_range"
                        class="form-control rounded-3 @error('salary_range') is-invalid @enderror"
                        value="{{ old('salary_range') }}" placeholder="e.g. $2000 - $3000">
                    @error('salary_range')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Work Experience -->
                <div class="mb-3">
                    <label for="work_experience" class="form-label">Work Experience</label>
                    <input type="text" name="work_experience" id="work_experience"
                        class="form-control rounded-3 @error('work_experience') is-invalid @enderror"
                        value="{{ old('work_experience') }}" placeholder="e.g. 2-3 years">
                    @error('work_experience')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Job Type -->
                <div class="mb-3">
                    <label for="job_type" class="form-label">Job Type <span class="text-danger">*</span></label>
                    <select name="job_type" id="job_type"
                        class="form-select @error('job_type') is-invalid @enderror" required>
                        <option value="">Select Job Type</option>
                        <option value="full_time" {{ old('job_type') == 'full_time' ? 'selected' : '' }}>Full Time</option>
                        <option value="part_time" {{ old('job_type') == 'part_time' ? 'selected' : '' }}>Part Time</option>
                        <option value="contract" {{ old('job_type') == 'contract' ? 'selected' : '' }}>Contract</option>
                        <option value="internship" {{ old('job_type') == 'internship' ? 'selected' : '' }}>Internship</option>
                    </select>
                    @error('job_type')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <!-- Report To -->
                <div class="mb-3">
                    <label for="report_to" class="form-label">Report To <span class="text-danger">*</span></label>
                    <select name="report_to" id="report_to"
                        class="form-select select2 @error('report_to') is-invalid @enderror" required>
                        <option value="">Report To</option>
                        @foreach ($staffs as $staff)
                        <option value="{{ $staff->id }}">{{ $staff->first_name . $staff->last_name }}</option>
                        @endforeach
                    </select>
                    @error('report_to')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Due Date -->
                <div class="mb-3">
                    <label for="due_date" class="form-label">Due Date <span class="text-danger">*</span></label>
                    <input type="date" name="due_date" id="due_date"
                        class="form-control rounded-3 @error('due_date') is-invalid @enderror"
                        value="{{ old('due_date') }}" required>
                    @error('due_date')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Preferred Age -->
                <div class="mb-3">
                    <label for="prefered_age" class="form-label">Preferred Age</label>
                    <input type="number" name="prefered_age" id="prefered_age"
                        class="form-control rounded-3 @error('prefered_age') is-invalid @enderror"
                        value="{{ old('prefered_age') }}" placeholder="e.g. 25">
                    @error('prefered_age')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Job Description -->
                <div class="mb-3">
                    <label for="job_description" class="form-label">Job Description <span class="text-danger">*</span></label>
                    <textarea name="job_description" id="job_description" rows="4"
                        class="form-control rounded-3 @error('job_description') is-invalid @enderror" required>{{ old('job_description') }}</textarea>
                    @error('job_description')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Required Skills -->
                <div class="mb-3">
                    <label for="required_skills" class="form-label">Required Skills</label>
                    <textarea name="required_skills" id="required_skills" rows="4"
                        class="form-control rounded-3 @error('required_skills') is-invalid @enderror">{{ old('required_skills') }}</textarea>
                    @error('required_skills')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Submit -->
                <div class="d-flex justify-content-end mt-3">
                    <button type="submit" class="btn btn-success px-4">
                        <i class="fas fa-save me-2"></i> Save Requirement
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script type="text/javascript">
    $(document).ready(function() {
        $('.select2').select2({
            allowClear: true,
            width: '100%'
        });
    });
    let departments = @json($departments);
    $('#department_id').on('change', function() {
        let deptId = this.value;
        let jobTitleSelect = document.getElementById('job_title_id');
        jobTitleSelect.innerHTML = '<option value="">Select Job Title</option>';
        if (deptId) {
            let selectedDept = departments.find(d => d.id == deptId);

            if (selectedDept && selectedDept.job_titles.length > 0) {
                selectedDept.job_titles.forEach(job => {
                    let option = document.createElement('option');
                    option.value = job.id;
                    option.text = job.name;
                    jobTitleSelect.appendChild(option);
                });
            }
        }
    });
</script>

@endpush