138 lines
6.2 KiB
PHP
138 lines
6.2 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-12 mb-25 text-center">
|
|
<h3 class="section-title">For general application, send your resume at career@gujurly.com</h3>
|
|
</div>
|
|
@forelse ($careers as $career)
|
|
<div class="col-xl-4 col-md-6 xl-mb-25 wow fadeInUp" data-wow-delay=".4s">
|
|
<div class="price__area-item">
|
|
<div class="price__area-item-price">
|
|
<span>{{ $career->title }}</span>
|
|
<h3>{{ $career->location }}</h3>
|
|
<h2>{{ $career->salary_per_month }} {{ $career->salary_currency }}</h2>
|
|
<span>Per monthly</span>
|
|
</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="#applyInternshipModal" data-job-id="{{ $career->id }}" data-job-type="career" data-career-title="{{ $career->title }}" data-career-location="{{ $career->location }}" data-career-salary="{{ $career->salary_per_month }}" data-career-description="{{ $career->title_description }}">Apply Now<i class="flaticon-right-up"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<span>No careers found...</span>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Pricing Plan Area End -->
|
|
|
|
@endsection
|
|
|
|
{{-- Application Modal --}}
|
|
@include('web.components.application_modal', ['jobId' => null, 'jobType' => 'career']) {{-- jobId will be set by JS from button data attributes --}}
|
|
|
|
@push('footer-js')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var applicationModal = document.getElementById('applyInternshipModal');
|
|
if (applicationModal) {
|
|
applicationModal.addEventListener('show.bs.modal', function (event) {
|
|
var button = event.relatedTarget; // Button that triggered the modal
|
|
var jobId = button.getAttribute('data-job-id'); // Generic attribute for job ID
|
|
var jobType = button.getAttribute('data-job-type'); // Generic attribute for job type
|
|
|
|
var modalTitle = applicationModal.querySelector('#jobTitle');
|
|
var modalLocation = applicationModal.querySelector('#jobLocation');
|
|
var modalSalary = applicationModal.querySelector('#jobSalary');
|
|
var modalDescription = applicationModal.querySelector('#jobDescription');
|
|
var jobIdInput = applicationModal.querySelector('#jobIdInput');
|
|
var applicationForm = applicationModal.querySelector('#applicationForm');
|
|
|
|
// Set dynamic values
|
|
modalTitle.textContent = button.getAttribute('data-' + jobType + '-title');
|
|
modalLocation.textContent = 'Location: ' + button.getAttribute('data-' + jobType + '-location');
|
|
modalSalary.textContent = 'Salary: ' + button.getAttribute('data-' + jobType + '-salary') + ' / Per monthly';
|
|
modalDescription.textContent = button.getAttribute('data-' + jobType + '-description');
|
|
jobIdInput.value = jobId;
|
|
|
|
// Set form action dynamically
|
|
if (jobType === 'internship') {
|
|
applicationForm.action = '{{ route('internship.store') }}';
|
|
jobIdInput.name = 'internship_id';
|
|
} else if (jobType === 'career') {
|
|
applicationForm.action = '{{ route('applications.store') }}'; // Assuming careers still use applications.store
|
|
jobIdInput.name = 'career_id';
|
|
}
|
|
});
|
|
|
|
// 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: {
|
|
'Accept': 'application/json',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.message) {
|
|
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 |