170 lines
7.9 KiB
PHP
170 lines
7.9 KiB
PHP
@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 |