@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