@extends('backend.layouts.app')

@section('content')
<div class="container">
    <h2>Edit Career</h2>
    <form action="{{ route('careers.update', $career->id) }}" method="POST">
        @csrf
        @method('PUT')

        <!-- Category -->

        <!-- Career Details -->
        <div class="mb-3">
            <label for="jobtitle" class="form-label">Job Title</label>
            <input type="text" name="jobtitle" class="form-control @error('jobtitle') is-invalid @enderror" value="{{ old('jobtitle', $career->jobtitle) }}" required>
            @error('jobtitle')
            <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="row">
            <div class="mb-3 col-6">
                <label for="category_name" class="form-label">Category Name</label>
                <input type="text" name="category_name" class="form-control @error('category_name') is-invalid @enderror" value="{{ old('category_name', $career->category->category_name) }}" required>
                @error('category_name')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="mb-3 col-6">
                <label for="job_type" class="form-label">Job Type</label>
                <select name="job_type" class="form-control @error('job_type') is-invalid @enderror" required>
                    <option value="">Select Job Type</option>
                    <option value="Functional" {{ old('job_type', $career->job_type) == 'Functional' ? 'selected' : '' }}>Functional</option>
                    <option value="Managerial" {{ old('job_type', $career->job_type) == 'Managerial' ? 'selected' : '' }}>Managerial</option>
                </select>
                @error('job_type')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="row">
            <div class="mb-3 col-4">
                <label for="work_schedule" class="form-label">Work Place</label>
                <select name="work_schedule" class="form-control @error('work_schedule') is-invalid @enderror" required>
                    <option value="">Select Work Place</option>
                    <option value="Remote" {{ old('work_schedule', $career->work_schedule) == 'Remote' ? 'selected' : '' }}>Remote</option>
                    <option value="On-site" {{ old('work_schedule', $career->work_schedule) == 'On-site' ? 'selected' : '' }}>On-site</option>
                </select>
                @error('work_schedule')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="mb-3 col-4">
                <label for="rate" class="form-label">Rate</label>
                <input type="text" step="0.01" name="rate" class="form-control @error('rate') is-invalid @enderror" value="{{ old('rate', $career->rate) }}" required>
                @error('rate')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="mb-3 col-4">
                <label for="location" class="form-label">Location</label>
                <input type="text" name="location" class="form-control @error('location') is-invalid @enderror" value="{{ old('location', $career->location) }}" required>
                @error('location')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="mb-3">
            <label for="subtitle" class="form-label">Subtitle</label>
            <textarea name="subtitle" class="form-control @error('subtitle') is-invalid @enderror" required>{{ old('subtitle', $career->subtitle) }}</textarea>
            @error('subtitle')
            <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
        <div class="mb-3">
            <label for="description" class="form-label">Description</label>
            <textarea name="description" class="form-control @error('description') is-invalid @enderror" required>{{ old('description', $career->description) }}</textarea>
            @error('description')
            <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <script src="https://cdn.ckeditor.com/4.16.0/standard/ckeditor.js"></script>
        <script>
            CKEDITOR.replace('description');
        </script>

        <div class="row">
            <!-- Responsibilities -->
            <div class="mb-3 col-6">
                <label for="job_responsibilities" class="form-label">Job Responsibilities</label>
                <div id="responsibilities-container">
                    @foreach($career->responsibilities as $responsibility)
                    <input type="text" name="job_responsibilities[]" class="form-control mb-2 @error('job_responsibilities') is-invalid @enderror" value="{{ old('job_responsibilities', $responsibility->job_responsibility) }}" required>
                    @endforeach
                </div>
                <button type="button" class="btn btn-secondary" onclick="addResponsibility()">Add Responsibility</button>
                <small>Add multiple responsibilities. Use the button above to add more.</small>
            </div>

            <!-- Requirements -->
            <div class="mb-3 col-6">
                <label for="requirements" class="form-label">Requirements</label>
                <div id="requirements-container">
                    @foreach($career->requirements as $requirement)
                    <input type="text" name="requirements[]" class="form-control mb-2 @error('requirements') is-invalid @enderror" value="{{ old('requirements', $requirement->requirement) }}" required>
                    @endforeach
                </div>
                <button type="button" class="btn btn-secondary" onclick="addRequirement()">Add Requirement</button>
                <small>Add multiple requirements. Use the button above to add more.</small>
            </div>

            <!-- Career Levels -->
            <div class="mb-3 col-6">
                <label for="career_level" class="form-label">Career Level</label>
                <div id="career-level-container">
                    @foreach($career->levels as $level)
                    <input type="text" name="career_level[]" class="form-control mb-2 @error('career_level') is-invalid @enderror" value="{{ old('career_level', $level->career_level) }}" required>
                    @endforeach
                </div>
                <button type="button" class="btn btn-secondary" onclick="addCareerLevel()">Add Career Level</button>
                <small>Add multiple career levels. Use the button above to add more.</small>
            </div>

            <!-- Years of Experience -->
            <div class="mb-3 col-6">
                <label for="year_of_experience" class="form-label">Years of Experience</label>
                <div id="experience-container">
                    @foreach($career->yearsOfExperience as $experience)
                    <input type="text" name="year_of_experience[]" class="form-control mb-2 @error('year_of_experience') is-invalid @enderror" value="{{ old('year_of_experience', $experience->year_of_experience) }}" required>
                    @endforeach
                </div>
                <button type="button" class="btn btn-secondary" onclick="addExperience()">Add Experience</button>
                <small>Add multiple years of experience. Use the button above to add more.</small>
            </div>

            <!-- Job Specializations -->
            <div class="mb-3 col-6">
                <label for="job_specialization" class="form-label">Job Specialization</label>
                <div id="specialization-container">
                    @foreach($career->specializations as $specialization)
                    <input type="text" name="job_specialization[]" class="form-control mb-2 @error('job_specialization') is-invalid @enderror" value="{{ old('job_specialization', $specialization->job_specialization) }}" required>
                    @endforeach
                </div>
                <button type="button" class="btn btn-secondary" onclick="addSpecialization()">Add Specialization</button>
                <small>Add multiple job specializations. Use the button above to add more.</small>
            </div>

            <!-- Qualifications -->
            <div class="mb-3 col-6">
                <label for="qualification" class="form-label">Qualification</label>
                <div id="qualification-container">
                    @foreach($career->qualifications as $qual)
                    <input type="text" name="qualification[]" class="form-control mb-2 @error('qualification') is-invalid @enderror" value="{{ old('qualification', $qual->qualification) }}" required>
                    @endforeach
                </div>
                <button type="button" class="btn btn-secondary" onclick="addQualification()">Add Qualification</button>
                <small>Add multiple qualifications. Use the button above to add more.</small>
            </div>
        </div>

        <button type="submit" class="btn btn-primary">Save Career</button>
    </form>
</div>

<script>
    // JavaScript functions to add fields dynamically
    function addResponsibility() {
        let container = document.getElementById('responsibilities-container');
        let input = document.createElement('input');
        input.type = 'text';
        input.name = 'job_responsibilities[]';
        input.className = 'form-control mb-2';
        container.appendChild(input);
    }

    function addRequirement() {
        let container = document.getElementById('requirements-container');
        let input = document.createElement('input');
        input.type = 'text';
        input.name = 'requirements[]';
        input.className = 'form-control mb-2';
        container.appendChild(input);
    }

    function addCareerLevel() {
        let container = document.getElementById('career-level-container');
        let input = document.createElement('input');
        input.type = 'text';
        input.name = 'career_level[]';
        input.className = 'form-control mb-2';
        container.appendChild(input);
    }

    function addExperience() {
        let container = document.getElementById('experience-container');
        let input = document.createElement('input');
        input.type = 'text';
        input.name = 'year_of_experience[]';
        input.className = 'form-control mb-2';
        container.appendChild(input);
    }

    function addSpecialization() {
        let container = document.getElementById('specialization-container');
        let input = document.createElement('input');
        input.type = 'text';
        input.name = 'job_specialization[]';
        input.className = 'form-control mb-2';
        container.appendChild(input);
    }

    function addQualification() {
        let container = document.getElementById('qualification-container');
        let input = document.createElement('input');
        input.type = 'text';
        input.name = 'qualification[]';
        input.className = 'form-control mb-2';
        container.appendChild(input);
    }
</script>
@endsection