<div class="modal fade" id="applyInternshipModal" tabindex="-1" aria-labelledby="applyInternshipModalLabel" 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="{{ $jobType === 'internship' ? route('internship.store') : route('career.store') }}" method="POST">
                    @csrf
                    @if($jobType === 'internship')
                        <input type="hidden" name="internship_id" id="jobIdInput" value="{{ $jobId }}">
                    @else
                        <input type="hidden" name="career_id" id="jobIdInput" value="{{ $jobId }}">
                    @endif
                    <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 <span> *</span></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 <span> *</span></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 <span> *</span></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) <span> *</span></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>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var applicationModal = document.getElementById('applyInternshipModal'); // Changed ID here
        if (applicationModal) { // Add a check for modal existence
            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 