@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-edit"></i> Edit Requirement</div>
        </div>
        <div class="card-body px-4 py-4">
            <form action="{{ route('recuirements.update', $recuirement->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <!-- Department -->
                <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 $department)
                        <option value="{{ $department->id }}"
                            {{ old('department_id', $recuirement->department_id) == $department->id ? 'selected' : '' }}>
                            {{ $department->name }}
                        </option>
                        @endforeach
                    </select>
                    @error('department_id')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <!-- Job Title -->
                <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>
                        @foreach ($jobTitles as $title)
                        <option value="{{ $title->id }}"
                            {{ old('job_title_id', $recuirement->job_title_id) == $title->id ? 'selected' : '' }}>
                            {{ $title->name }}
                        </option>
                        @endforeach
                    </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', $recuirement->priority) == 'high' ? 'selected' : '' }}>High</option>
                        <option value="medium" {{ old('priority', $recuirement->priority) == 'medium' ? 'selected' : '' }}>Medium</option>
                        <option value="low" {{ old('priority', $recuirement->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', $recuirement->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', $recuirement->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', $recuirement->job_type) == 'full_time' ? 'selected' : '' }}>Full Time</option>
                        <option value="part_time" {{ old('job_type', $recuirement->job_type) == 'part_time' ? 'selected' : '' }}>Part Time</option>
                        <option value="contract" {{ old('job_type', $recuirement->job_type) == 'contract' ? 'selected' : '' }}>Contract</option>
                        <option value="internship" {{ old('job_type', $recuirement->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">Job Title <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 }}"
                            {{ old('report_to', $recuirement->report_to) == $staff->id ? 'selected' : '' }}>
                            {{ $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', $recuirement->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', $recuirement->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', $recuirement->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', $recuirement->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-outline-primary px-4">
                        <i class="fas fa-save me-2"></i> Update 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

@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title
                    title="Edit Requirement"
                    description="Update requirement details including role, priority, and job expectations.">
                    <a href="{{ route('recuirements.index') }}" class="asset-btn asset-btn--secondary">
                        Cancel
                    </a>
                </x-page-title>

                <form action="{{ route('recuirements.update', $recuirement->id) }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="ui-card form-section">
                        <div class="form-section__head">
                            <div class="form-section__title">Requirement Details</div>
                            <div class="form-section__sub">Modify existing requirement information.</div>
                        </div>

                        <div class="asset-form-grid">

                            {{-- Department --}}
                            <div class="asset-col-6">
                                <label class="asset-label">Department <span class="text-danger">*</span></label>
                                <div class="asset-select2-wrap">
                                    <select name="department_id" id="department_id"
                                        class="asset-select general-select select2 @error('department_id') asset-invalid @enderror" required>
                                        <option value="">Select Department</option>
                                        @foreach ($departments as $department)
                                            <option value="{{ $department->id }}"
                                                {{ old('department_id', $recuirement->department_id) == $department->id ? 'selected' : '' }}>
                                                {{ $department->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                @error('department_id')
                                    <div class="asset-invalid">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Job Title --}}
                            <div class="asset-col-6">
                                <label class="asset-label">Job Title <span class="text-danger">*</span></label>
                                <div class="asset-select2-wrap">
                                    <select name="job_title_id" id="job_title_id"
                                        class="asset-select general-select select2 @error('job_title_id') asset-invalid @enderror" required>
                                        <option value="">Select Job Title</option>
                                        @foreach ($jobTitles as $title)
                                            <option value="{{ $title->id }}"
                                                {{ old('job_title_id', $recuirement->job_title_id) == $title->id ? 'selected' : '' }}>
                                                {{ $title->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                @error('job_title_id')
                                    <div class="asset-invalid">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Priority --}}
                            <div class="asset-col-6">
                                <label class="asset-label">Priority <span class="text-danger">*</span></label>
                                <select name="priority"
                                    class="asset-select @error('priority') asset-invalid @enderror" required>
                                    <option value="">Select Priority</option>
                                    <option value="high" {{ old('priority', $recuirement->priority) == 'high' ? 'selected' : '' }}>High</option>
                                    <option value="medium" {{ old('priority', $recuirement->priority) == 'medium' ? 'selected' : '' }}>Medium</option>
                                    <option value="low" {{ old('priority', $recuirement->priority) == 'low' ? 'selected' : '' }}>Low</option>
                                </select>
                                @error('priority')
                                    <div class="asset-invalid">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Job Type --}}
                            <div class="asset-col-6">
                                <label class="asset-label">Job Type <span class="text-danger">*</span></label>
                                <select name="job_type"
                                    class="asset-select @error('job_type') asset-invalid @enderror" required>
                                    <option value="">Select Job Type</option>
                                    <option value="full_time" {{ old('job_type', $recuirement->job_type) == 'full_time' ? 'selected' : '' }}>Full Time</option>
                                    <option value="part_time" {{ old('job_type', $recuirement->job_type) == 'part_time' ? 'selected' : '' }}>Part Time</option>
                                    <option value="contract" {{ old('job_type', $recuirement->job_type) == 'contract' ? 'selected' : '' }}>Contract</option>
                                    <option value="internship" {{ old('job_type', $recuirement->job_type) == 'internship' ? 'selected' : '' }}>Internship</option>
                                </select>
                                @error('job_type')
                                    <div class="asset-invalid">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Salary --}}
                            <div class="asset-col-6">
                                <label class="asset-label">Salary Range</label>
                                <input type="text" name="salary_range"
                                    class="asset-input @error('salary_range') asset-invalid @enderror"
                                    value="{{ old('salary_range', $recuirement->salary_range) }}">
                                @error('salary_range')
                                    <div class="asset-invalid">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Experience --}}
                            <div class="asset-col-6">
                                <label class="asset-label">Work Experience</label>
                                <input type="text" name="work_experience"
                                    class="asset-input @error('work_experience') asset-invalid @enderror"
                                    value="{{ old('work_experience', $recuirement->work_experience) }}">
                                @error('work_experience')
                                    <div class="asset-invalid">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Report To --}}
                            <div class="asset-col-6">
                                <label class="asset-label">Report To <span class="text-danger">*</span></label>
                                <div class="asset-select2-wrap">
                                    <select name="report_to"
                                        class="asset-select general-select select2 @error('report_to') asset-invalid @enderror" required>
                                        <option value="">Select Manager</option>
                                        @foreach ($staffs as $staff)
                                            <option value="{{ $staff->id }}"
                                                {{ old('report_to', $recuirement->report_to) == $staff->id ? 'selected' : '' }}>
                                                {{ $staff->first_name }} {{ $staff->last_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                @error('report_to')
                                    <div class="asset-invalid">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Due Date --}}
                            <div class="asset-col-6">
                                <label class="asset-label">Due Date <span class="text-danger">*</span></label>
                                <input type="date" name="due_date"
                                    class="asset-input @error('due_date') asset-invalid @enderror"
                                    value="{{ old('due_date', $recuirement->due_date) }}" required>
                                @error('due_date')
                                    <div class="asset-invalid">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Preferred Age --}}
                            <div class="asset-col-6">
                                <label class="asset-label">Preferred Age</label>
                                <input type="number" name="prefered_age"
                                    class="asset-input @error('prefered_age') asset-invalid @enderror"
                                    value="{{ old('prefered_age', $recuirement->prefered_age) }}">
                                @error('prefered_age')
                                    <div class="asset-invalid">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Description --}}
                            <div class="asset-col-12">
                                <label class="asset-label">Job Description <span class="text-danger">*</span></label>
                                <textarea name="job_description"
                                    class="asset-input @error('job_description') asset-invalid @enderror"
                                    rows="4" required>{{ old('job_description', $recuirement->job_description) }}</textarea>
                                @error('job_description')
                                    <div class="asset-invalid">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Skills --}}
                            <div class="asset-col-12">
                                <label class="asset-label">Required Skills</label>
                                <textarea name="required_skills"
                                    class="asset-input @error('required_skills') asset-invalid @enderror"
                                    rows="4">{{ old('required_skills', $recuirement->required_skills) }}</textarea>
                                @error('required_skills')
                                    <div class="asset-invalid">{{ $message }}</div>
                                @enderror
                            </div>

                        </div>
                    </div>

                    <div class="asset-actions">
                        <a href="{{ route('recuirements.index') }}" class="asset-btn asset-btn--secondary">
                            Cancel
                        </a>

                        <button type="submit" class="asset-btn asset-btn--primary">
                            Update Requirement
                        </button>
                    </div>

                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
$(function () {

    $('.select2').select2({
        width: '100%',
        allowClear: true
    });

    let departments = @json($departments);

    $('#department_id').on('change', function () {
        let deptId = this.value;
        let jobSelect = $('#job_title_id');

        jobSelect.empty().append('<option value="">Select Job Title</option>');

        if (!deptId) return;

        let dept = departments.find(d => d.id == deptId);

        if (dept && dept.job_titles?.length) {
            dept.job_titles.forEach(job => {
                jobSelect.append(`<option value="${job.id}">${job.name}</option>`);
            });
        }

        jobSelect.trigger('change');
    });

});
</script>
@endpush