@extends('backend.layouts.app')

@section('content')
<div class="container">
    <h2>Create Career</h2>
    <form action="{{ route('careers.store') }}" method="POST">
        @csrf

        <!-- 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') }}" required>
            @error('jobtitle')
            <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="row">
            <!-- Category -->
            <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') }}" 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') == 'Functional' ? 'selected' : '' }}>Functional</option>
                    <option value="Managerial" {{ old('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') == 'Remote' ? 'selected' : '' }}>Remote</option>
                    <option value="On-site" {{ old('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') }}" 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') }}" required>
                @error('location')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="mb-3">
            <label for="subtitle" class="form-label">Subtitle</label>
            <input type="text" name="subtitle" class="form-control @error('subtitle') is-invalid @enderror" value="{{ old('subtitle') }}" required>
            @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') }}</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">
                    <input type="text" name="job_responsibilities[]" class="form-control mb-2 @error('job_responsibilities') is-invalid @enderror" value="{{ old('job_responsibilities.0') }}" required>
                </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>
                @error('job_responsibilities')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <!-- Requirements -->
            <div class="mb-3 col-6">
                <label for="requirements" class="form-label">Requirements</label>
                <div id="requirements-container">
                    <input type="text" name="requirements[]" class="form-control mb-2 @error('requirements') is-invalid @enderror" value="{{ old('requirements.0') }}" required>
                </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>
                @error('requirements')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <!-- Career Levels -->
            <div class="mb-3 col-6">
                <label for="career_level" class="form-label">Career Level</label>
                <div id="career-level-container">
                    <input type="text" name="career_level[]" class="form-control mb-2 @error('career_level') is-invalid @enderror" value="{{ old('career_level.0') }}" required>
                </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>
                @error('career_level')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </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">
                    <input type="text" name="year_of_experience[]" class="form-control mb-2 @error('year_of_experience') is-invalid @enderror" value="{{ old('year_of_experience.0') }}" required>
                </div>
                <button type="button" class="btn btn-secondary" onclick="addExperience()">Add Years of Experience</button>
                <small>Add multiple years of experience. Use the button above to add more.</small>
                @error('year_of_experience')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

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

            <!-- Qualifications -->
            <div class="mb-3 col-6">
                <label for="qualification" class="form-label">Qualification</label>
                <div id="qualification-container">
                    <input type="text" name="qualification[]" class="form-control mb-2 @error('qualification') is-invalid @enderror" value="{{ old('qualification.0') }}" required>
                </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>
                @error('qualification')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
        </div>

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

<script>
    // JavaScript functions for adding dynamic responsibilities, requirements, etc.
    function addResponsibility() {
        const container = document.getElementById('responsibilities-container');
        const input = document.createElement('input');
        input.type = 'text';
        input.name = 'job_responsibilities[]';
        input.className = 'form-control mb-2';
        container.appendChild(input);
    }

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

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

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

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

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