@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 }} {{ $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="#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