@extends('layoutsfrontend.master')
@section('content')

    <!-- Page Header Start -->
    <div class="page-header bg-section parallaxie">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-12">
                    <!-- Page Header Box Start -->
                    <div class="page-header-box">
                        <h1 class="text-anime-style-3" data-cursor="-opaque">Careers</h1>
                        <nav class="wow fadeInUp">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="index.html">home</a></li>
                                <li class="breadcrumb-item">Careers</li>
                            </ol>
                        </nav>
                    </div>
                    <!-- Page Header Box End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header End -->

    <div class="careers_outer">

        <div class="container">
            <!-- Section Title Start -->
                        <div class="section-title">
                            <h3 class="wow fadeInUp">Careers</h3>
                            <h2 class="text-anime-style-3" data-cursor="-opaque">Join Our Team  </h2>
                            <p class="wow fadeInUp" data-wow-delay="0.2s">
                                Welcome to our career opportunities page! At Sunrise, we are committed to excellence in patient care and fostering a supportive and dynamic work environment for our employees. Explore our current job openings, learn about our hospital culture, benefits, and development opportunities, and hear from our dedicated team members.
                            </p>
                        </div>
                        <!-- Section Title End -->
            <div class="row">
                <div class="col-md-6">
                    <div class="caereer_immage_box">
                        <div class="career_image">
                            <figure class="image-anime">
                                <img src="{{ asset('images/career.jpg') }}" alt="">
                            </figure>
                        </div>
                    <!-- careers CTA Box Start -->
                        <div class="careers-contact-box">
                            <div class="careers-cta-box-content">
                                <h3>If you want submit your CV</h3>
                                <a href="careers_form.html" class="btn-default btn-dark">Submit here</a>
                            </div>
                            <div class="icon-box">
                                <img src="{{ asset('images/icon-phone-accent.svg') }}" alt="">
                            </div>
                        </div>
                        <!-- careers CTA Box End -->
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="job_section">
                        @foreach ($Careers as $job)
                            <div class="job_box">
                                <div class="jobbox_top">
                                    <img src="{{ asset('images/logo.svg') }}"> <h4>{{ $job->location }}</h4>
                                </div>
                                <div class="job_content">
                                    <h3>{{ $job->title }}</h3>
                                    <p>{!! Str::limit(strip_tags($job->description), 150) !!}</p>
                                    <div class="job_box_footer">
                                        <span>Post Date : {{ $job->created_at->format('d/m/Y') }}</span>
                                        <a href="{{ route('frontend.careers.detail', $job->slug) }}">Apply Now</a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <!-- Pagination Start -->
                    @if($Careers->count() > 0 && method_exists($Careers, 'hasPages') && $Careers->hasPages())
                    <div class="pagination_outer">
                        {{ $Careers->links('vendor.pagination.bootstrap-5') }}
                    </div>
                    @endif
                    <!-- Pagination End -->

                </div>
            </div>
        </div>
           
    </div>
    <!-- What We Do Section End -->
@endsection
@section('script')
 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
            $(document).ready(function () {
                // Filter Specialties and Doctors by Department
                $('#department_id').change(function() {
                    let departmentId = $(this).val();
                    
                    if(departmentId) {
                        // Fetch Specialties
                        $.get("{{ route('frontend.getSpecialties') }}", { department_id: departmentId }, function(data) {
                            let specialtyDropdown = $('#speciality_id');
                            specialtyDropdown.empty();
                            specialtyDropdown.append('<option value="" disabled selected>Speciality</option>');
                            $.each(data, function(index, item) {
                                specialtyDropdown.append('<option value="' + item.id + '">' + item.name + '</option>');
                            });
                        });

                        // Fetch Doctors
                        $.get("{{ route('frontend.getDoctors') }}", { department_id: departmentId }, function(data) {
                            let doctorDropdown = $('#doctor_id');
                            doctorDropdown.empty();
                            doctorDropdown.append('<option value="">Choose Doctor</option>');
                            $.each(data, function(index, item) {
                                doctorDropdown.append('<option value="' + item.id + '">' + item.name + '</option>');
                            });
                        });
                    }
                });

                // Unbind any existing handlers from theme scripts (like function.js) to prevent double submission
                $('#appointmentForm').off('submit').on('submit', function (e) {
                    e.preventDefault();
                    e.stopPropagation();

                    let form = this;
                    if (!form.checkValidity()) {
                        form.reportValidity();
                        return false;
                    }

                    let formObj = $(this);
                    let url = formObj.attr('action');
                    let formData = new FormData(form);

                    let submitBtn = formObj.find('button[type="submit"]');
                    let originalBtnText = submitBtn.html();

                    $('.help-block.with-errors').html('');
                    $('.form-group').removeClass('has-error');

                    submitBtn.prop('disabled', true).html('<span>Sending...</span>');

                    $.ajax({
                        url: url,
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        success: function (response) {
                            submitBtn.prop('disabled', false).html(originalBtnText);
                            if (response.success) {
                                Swal.fire({
                                    title: 'Success!',
                                    text: response.message,
                                    icon: 'success',
                                    confirmButtonText: 'Great'
                                });
                                $('#appointmentForm')[0].reset();
                            }
                        },
                        error: function (xhr) {
                            submitBtn.prop('disabled', false).html(originalBtnText);
                            if (xhr.status === 422) {
                                let errors = xhr.responseJSON.errors;
                                let errorHtml = '<ul>';
                                $.each(errors, function (key, value) {
                                    let input = $('[name="' + key + '"]');
                                    let errorContainer = input.closest('.form-group').find('.help-block.with-errors');
                                    errorContainer.html(value[0]);
                                    input.closest('.form-group').addClass('has-error');
                                    errorHtml += '<li>' + value[0] + '</li>';
                                });
                                errorHtml += '</ul>';
                                Swal.fire({
                                    title: 'Validation Error',
                                    html: errorHtml,
                                    icon: 'error',
                                    confirmButtonText: 'Try Again'
                                });
                            } else {
                                Swal.fire({
                                    title: 'Error!',
                                    text: 'Something went wrong. Please try again.',
                                    icon: 'error',
                                    confirmButtonText: 'Close'
                                });
                            }
                        }
                    });
                });
            });
        </script>

@endsection