@extends('layouts.main-app')

@section('title', 'Home')

@section('content')

@include('components.navbar')

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
    AOS.init();
</script>
<div class="bg-center bg-cover" style=" background-image: url('{{ url('/images/careers/Wallpaper.png') }}');">
    <div class="container mx-auto ">
        <div class="py-32 ml-4 text-white md:ml-20">
            <h1 class="text-2xl font-bold md:text-6xl">Apply here</h1>
            <p class="text-sm text-justify md:text-xl">
                Michael Angelo Manpower Exponent Inc.
            </p>
        </div>
    </div>
</div>

<form id="contactform" action="{{ route('store_application_form') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <div class="container mx-auto my-12 space-y-4 max-w-7xl">
        <div class="">
            <h2 class="my-8 text-2xl font-bold text-center text-red-600 md:text-2xl lg:text-4xl">Application Form</h2>

            <div class="grid grid-cols-2 gap-4 mx-2 mt-2 sm:grid-cols-2 md:grid-cols-11">
                <input required type="text" name="full_name" class="col-span-1 px-4 py-4 placeholder-black border-2 border-black md:col-span-4 xl:col-span-5 rounded-xl" placeholder="Full Name">
                <input required type="text" name="location" class="col-span-1 px-4 py-2 placeholder-black border-2 border-black md:col-span-5 xl:col-span-6 rounded-xl" placeholder="Location">

                <input required type="number" name="whatsapp" class="col-span-1 px-4 py-4 placeholder-black border-2 border-black md:col-span-4 xl:col-span-5 rounded-xl" min="0" placeholder="Whatsapp">
                <input required type="text" name="contact_number" class="col-span-1 px-4 py-4 placeholder-black border-2 border-black md:col-span-5 xl:col-span-4 rounded-xl" min="0" placeholder="Contact Number">
                <input required type="number" name="age" id="age-input" class="col-span-1 px-4 py-4 placeholder-black border-2 border-black md:col-span-2 xl:col-span-2 rounded-xl" min="0" placeholder="Age">
            </div>
        </div>
        <div class="grid grid-cols-1 gap-4 mx-2 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4">
            <select required name="job_order_id" id="job-order-select" class="px-4 placeholder-black bg-white border-2 border-black rounded-xl">
                <option value="" disabled selected>Select Job Order</option>
                @foreach($career->where('active', 'Yes') as $careers)
                <option value="{{ $careers->id }}" data-gender="{{ $careers->gender }}" data-country="{{ $careers->country_id }}">
                    {{ $careers->description }}
                </option>
                @endforeach
            </select>
            <input required readonly type="text" name="gender" id="gender-input" class="placeholder-black bg-white border-2 border-black rounded-xl" placeholder="Gender">
            <select required name="country" id="country-select" class="px-4 py-4 placeholder-black bg-white border-2 border-black rounded-xl">
                <option value="" disabled selected>Select Country</option>
            </select>
            <select required name="branch_id" class="px-4 placeholder-black bg-white border-2 border-black rounded-xl">
                <option value="" disabled selected>Select Branch</option>
                @foreach($branch as $branches)
                <option value="{{ $branches->id }}">{{ $branches->branch_name }}</option>
                @endforeach
            </select>
        </div>

        <div class="flex items-center justify-center">
            <button type="submit" id="submit-btn" class="px-8 py-2 text-white bg-red-600 md:py-2 md:px-12 rounded-xl">Submit</button>
        </div>
    </div>
</form>

<div class="flex items-center justify-center">
    <div class="container mx-auto">
        <div class="hidden modal">
            <div class="fixed top-0 left-0 z-50 flex items-center justify-center w-full h-screen bg-black bg-opacity-70 closemodal">
                <div class="w-2/4 p-12 bg-white rounded-xl md:w-1/5">
                    <div class="flex flex-col items-center justify-center space-y-4 text-center text-red-600 ">
                        <img class="w-auto h-1/4 animate-bounce" src="{{asset('images/branches/Success!.png')}}" alt="">
                        <img class="w-auto h-1/4 animate-bounce" src="{{asset('images/branches/checklist (2).png')}}" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const modal = document.querySelector('.modal');
        const modalOverlay = document.querySelector('.closemodal'); // Select the modal overlay
        const contactform = document.getElementById('contactform');
        const submitBtn = document.getElementById('submit-btn');

        // Function to close the modal
        function closeModal() {
            modal.classList.add('hidden');
        }

        // Event listener for clicking on modal overlay to close modal
        modalOverlay.addEventListener('click', function(event) {
            if (event.target === modalOverlay) {
                closeModal();
                contactform.submit(); // Close modal only if clicked on the overlay outside the content
            }
        });

        // Event listener for form submission
        contactform.addEventListener('submit', function(event) {
            event.preventDefault(); // Prevent default form submission

            // You can perform AJAX form submission here if needed
            // For simplicity, let's assume the form submission is successful

            // Show the modal after successful submission
            modal.classList.remove('hidden');

            // Optionally, you can reset the form after submission

        });
    });
</script>



<script>
    document.addEventListener('DOMContentLoaded', function() {
        const jobOrderSelect = document.getElementById('job-order-select');
        const genderInput = document.getElementById('gender-input');
        const countrySelect = document.getElementById('country-select');
        const ageInput = document.getElementById('age-input');
        const countries = @json($country); // Assuming you pass the countries data as a JSON object from the backend

        // Function to set age validation based on job order
        function setAgeValidation(jobOrderType) {
            // Convert jobOrderType to lowercase for case insensitive comparison
            jobOrderType = jobOrderType.trim().toLowerCase();

            if (jobOrderType === 'domestic helper') { // Check in lowercase
                ageInput.setAttribute('min', 22);
                ageInput.setAttribute('max', 44);
            } else {
                ageInput.removeAttribute('min');
                ageInput.removeAttribute('max');
            }
        }

        // Initial setup on page load
        setAgeValidation(jobOrderSelect.options[jobOrderSelect.selectedIndex].textContent.trim());

        // Event listener for job order select change
        jobOrderSelect.addEventListener('change', function() {
            const selectedOption = jobOrderSelect.options[jobOrderSelect.selectedIndex];
            const gender = selectedOption.getAttribute('data-gender');
            const countryId = selectedOption.getAttribute('data-country');
            const jobOrderType = selectedOption.textContent.trim();

            genderInput.value = gender;

            // Clear the current country options
            countrySelect.innerHTML = '';

            // Filter and add the relevant country options
            const countryOptions = countries.filter(country => country.id == countryId);
            countryOptions.forEach(country => {
                const option = document.createElement('option');
                option.value = country.id;
                option.textContent = country.country;
                countrySelect.appendChild(option);
            });

            // Set the first option as selected
            if (countrySelect.options.length > 0) {
                countrySelect.selectedIndex = 0;
            }

            // Set age validation based on selected job order
            setAgeValidation(jobOrderType);
        });

        // Event listener for age input to enforce manual validation
        ageInput.addEventListener('input', function() {
            const jobOrderType = jobOrderSelect.options[jobOrderSelect.selectedIndex].textContent.trim();
            const enteredAge = parseInt(ageInput.value, 10);

            jobOrderType = jobOrderType.trim().toLowerCase();

            if (jobOrderType === 'domestic helper' && (enteredAge < 22 || enteredAge > 44)) {
                // Handle invalid age input (show error, disable submit, etc.)
                // Example: You can add a class to indicate error state
                ageInput.classList.add('error'); // Define this CSS class for error style
            } else {
                // Remove error state if valid
                ageInput.classList.remove('error');
            }
        });
    });
</script>




@include('components.footer2')


@endsection