Enhance careers management features: update CareersPageController to fetch and display career listings with additional fields, modify Career model to include relationships and new attributes, and create a new view for the careers index with an application modal. Update database migration to reflect changes in the careers table structure and adjust routes for application submissions.
This commit is contained in:
@@ -0,0 +1,170 @@
|
||||
@extends('web.layouts.app')
|
||||
|
||||
@push('header-css')
|
||||
<style>
|
||||
#applicationForm > label > span {
|
||||
color: var(--gujurly-primary);
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<!-- Breadcrumb Area Start -->
|
||||
<div class="breadcrumb__area" style="background-image: url('/web/assets/img/page/breadcrumb.jpg');">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xl-12">
|
||||
<div class="breadcrumb__area-content">
|
||||
<h2>Careers</h2>
|
||||
<ul>
|
||||
<li><a href="/">Home</a><i class="fa-regular fa-angle-right"></i></li>
|
||||
<li>Careers</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Breadcrumb Area End -->
|
||||
<!-- Pricing Plan Area Start -->
|
||||
<div class="price__area section-padding">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xl-4 col-md-6 xl-mb-25 wow fadeInUp" data-wow-delay=".4s">
|
||||
@forelse ($careers as $career)
|
||||
<div class="price__area-item">
|
||||
<div class="price__area-item-price">
|
||||
<span>{{ $career->title }}</span>
|
||||
<h3>{{ $career->location }}</h3>
|
||||
<h2>{{ $career->salary_per_month }}<span>/Per monthly</span></h2>
|
||||
</div>
|
||||
<div class="price__area-item-list">
|
||||
<ul>
|
||||
@foreach($career->bullets as $bullet)
|
||||
<li><i class="flaticon-checked"></i>{{ $bullet['bullet'] ?? '' }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
<div class="price__area-item-btn">
|
||||
<button type="button" class="build_button apply-now-button" data-bs-toggle="modal" data-bs-target="#applicationModal" data-career-title="{{ $career->title }}" data-career-location="{{ $career->location }}" data-career-salary="{{ $career->salary_per_month }}" data-career-description="{{ $career->title_description }}" data-career-id="{{ $career->id }}">Apply Now<i class="flaticon-right-up"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<span>No careers found...</span>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Pricing Plan Area End -->
|
||||
|
||||
<!-- Application Modal -->
|
||||
<div class="modal fade" id="applicationModal" tabindex="-1" aria-labelledby="applicationModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content rounded-3">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="applicationModalLabel">Apply for <span id="jobTitle"></span></h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h6 id="jobLocation"></h6>
|
||||
<p id="jobSalary"></p>
|
||||
<p id="jobDescription"></p>
|
||||
<form id="applicationForm" enctype="multipart/form-data" action="{{ route('applications.store') }}" method="POST">
|
||||
@csrf
|
||||
<input type="hidden" name="career_id" id="careerId">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="name" class="form-label">Name <span> *</span></label>
|
||||
<input type="text" class="form-control" id="name" name="name" required>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="birthdate" class="form-label">Birthdate</label>
|
||||
<input type="date" class="form-control" id="birthdate" name="birthdate" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="email" class="form-label">Email</label>
|
||||
<input type="email" class="form-control" id="email" name="email" required>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="phone_number" class="form-label">Phone Number</label>
|
||||
<input type="text" class="form-control" id="phone_number" name="phone_number" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="resume_file" class="form-label">Resume (PDF, DOC, DOCX)</label>
|
||||
<input type="file" class="form-control" id="resume_file" name="resume_file" accept=".pdf,.doc,.docx" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="cover_letter" class="form-label">Cover Letter (Optional)</label>
|
||||
<textarea class="form-control" id="cover_letter" name="cover_letter" rows="5"></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Submit Application</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
||||
@push('footer-js')
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var applicationModal = document.getElementById('applicationModal');
|
||||
applicationModal.addEventListener('show.bs.modal', function (event) {
|
||||
var button = event.relatedTarget;
|
||||
var careerTitle = button.getAttribute('data-career-title');
|
||||
var careerLocation = button.getAttribute('data-career-location');
|
||||
var careerSalary = button.getAttribute('data-career-salary');
|
||||
var careerDescription = button.getAttribute('data-career-description');
|
||||
var careerId = button.getAttribute('data-career-id');
|
||||
|
||||
var modalTitle = applicationModal.querySelector('#jobTitle');
|
||||
var modalLocation = applicationModal.querySelector('#jobLocation');
|
||||
var modalSalary = applicationModal.querySelector('#jobSalary');
|
||||
var modalDescription = applicationModal.querySelector('#jobDescription');
|
||||
var modalCareerId = applicationModal.querySelector('#careerId');
|
||||
|
||||
modalTitle.textContent = careerTitle;
|
||||
modalLocation.textContent = 'Location: ' + careerLocation;
|
||||
modalSalary.textContent = 'Salary: ' + careerSalary + ' / Per monthly';
|
||||
modalDescription.textContent = careerDescription;
|
||||
modalCareerId.value = careerId;
|
||||
});
|
||||
|
||||
// Handle form submission with AJAX
|
||||
document.getElementById('applicationForm').addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
let form = e.target;
|
||||
let formData = new FormData(form);
|
||||
|
||||
fetch(form.action, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
alert(data.message);
|
||||
var modal = bootstrap.Modal.getInstance(applicationModal);
|
||||
modal.hide();
|
||||
form.reset();
|
||||
} else {
|
||||
alert('Error: ' + data.message);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
alert('An error occurred. Please try again.');
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user