@extends('layout.app')
@section('title')
<title>Enquiry Form</title>
    <meta name="description" content="ET Education and Visa Services, presented by Extratech, is an adept provider of excellent education consultation, information, and visa guidance solution to students seeking schooling abroad.">
    <meta name="robots" content="index, follow" />
    <meta property="og:url" content="" />
    <meta property="og:image" content="{{url('frontend/images/banner.png')}}"/>
    <meta property="og:title" content="ET-Visas"/>
    <meta property="og:description" content="ET Education and Visa Services, presented by Extratech, is an adept provider of excellent education consultation, information, and visa guidance solution to students seeking schooling abroad."/>
@endsection
@section('content')
    <section class="enquiry-form-section">
        @php
          $msg = Session::get('msg') ?? null;
          $status = Session::get('status') ?? null;
        @endphp
        <h2>Enquiry Form</h2>
        <p>Please fill up the form and we will get back to you soon, Thanks !</p>
        <form action="{{ route('enquiry.submit') }}" onsubmit="return submitEnquiry()" method = "post">
            @csrf
            <div class="row enquiry-form-row">
                <h3>Personal Details</h3>
                <div class="col-md-4">
                    <div class="form-group mb-3">
                        <label for="name">First Name</label>
                        <input type="text" class="form-control" id="fname" name="first_name" value="" placeholder="Enter your First name" onkeyup="validatefName()">
                        <span class="error" id="error-fname"></span>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group mb-3">
                        <label for="name">Middle Name</label>
                        <input type="text" class="form-control" id="mname" name="middle_name" value="" placeholder="Enter your Middle name">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group mb-3">
                        <label for="name">Last Name</label>
                        <input type="text" class="form-control" id="lname" name="last_name" value="" placeholder="Enter your Last name" onkeyup="validatelName()">
                        <span class="error" id="error-lname"></span>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group mb-3">
                        <label for="name">Date of birth</label>
                        <input type="date" class="form-control" id="dob" name="dob" placeholder="Enter your Date of birth" onkeyup="validateDob()">
                        <span class="error" id="error-dob"></span>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group mb-3">
                        <label for="name">Country</label>
                        <select class="form-select" name="cob" id="e-cob" onchange="eCob()">
                            <option hidden>Select your country of birth</option>
                            @foreach($countries as $country)
                                <option class="select-placeholder" value="{{$country->id}}" @if(old('country_id') === $country->id) selected @endif>{{$country->name}}</option>
                            @endforeach
                        </select>
                        <span class="error" id="error-cob"></span>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group mb-3">
                        <label for="name">Gender</label>
                        <div class="d-flex gap-2" onclick="eGender()">
                            <div class="form-check">
                                <input class="form-check-input gender" type="radio" name="gender" value="Male"/>
                                <label class="form-check-label">
                                    Male
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input gender" type="radio" name="gender" value="Female"/>
                                <label class="form-check-label">
                                    Female
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input gender" type="radio" name="gender" value="Other"/>
                                <label class="form-check-label">
                                    Other
                                </label>
                            </div>
                        </div>
                        <span class="error" id="error-gender"></span>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group mb-3">
                        <label for="name">Address</label>
                        <input type="text" class="form-control" id="address" name="address" placeholder="Enter your Address" onkeyup="validateAddress()">
                        <span class="error" id="error-address"></span>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group mb-3">
                        <label for="name">Email</label>
                        <input type="email" class="form-control" id="email" name="email" placeholder="Enter your Email Address" onkeyup="validateEmail()">
                        <span class="error" id="error-email"></span>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group mb-3">
                        <label for="name">Phone</label>
                        <input type="text" class="form-control" id="phone" name="phone" placeholder="Enter your Phone Number" onkeyup="validatePhone()">
                        <span class="error" id="error-phone"></span>
                    </div>
                </div>

                <h3 class="mt-5">Additional Information</h3>
                <div class="col-md-4">
                    <div class="form-group mb-3">
                        <label for="name">Highest Qualification</label>
                        <input type="text" class="form-control" id="highest_qualification" name="highest_qualification" placeholder="Enter your Highest Qualification" onkeyup="validateQualification()">
                        <span class="error" id="error-qualification"></span>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group mb-3">
                        <label for="name">Stream</label>
                        <input type="text" class="form-control" id="stream" name="stream" placeholder="Enter your Stream" onkeyup="validateStream()">
                        <span class="error" id="error-stream"></span>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group mb-3">
                        <label for="name">% or GPA</label>
                        <input type="text" class="form-control" id="gpa" name="gpa" placeholder="Enter your % or GPA" onkeyup="validateGpa()">
                        <span class="error" id="error-gpa"></span>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group mb-3">
                        <label for="name">Passed Year</label>
                        <input type="text" class="form-control" id="graduate_year" name="graduate_year" placeholder="Enter your Passed Year" onkeyup="validatePassout()">
                        <span class="error" id="error-graduate_year"></span>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group mb-3">
                        <label for="name">Gap after Studies</label>
                        <input type="text" class="form-control" id="gap" name="gap" placeholder="Enter your Gap after Studies" onkeyup="validateGap()">
                        <span class="error" id="error-gap"></span>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group mb-3">
                        <label for="name">What you are doing now?</label>
                        <input type="text" class="form-control" id="current_status" name="current_status" placeholder="Enter your Current Status" onkeyup="validateCurrent()">
                        <span class="error" id="error-currentStatus"></span>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group mb-3">
                        <label for="name">Do you have work experience?</label>
                        <select class="form-select" name="work_experience" id="work-experience" onchange="wExperience()">
                            <option hidden value="">Work experence status</option>
                            <option value="yes" class="select-placeholder">Yes</option>
                            <option value="no" class="select-placeholder">No</option>
                        </select>
                        <span class="error" id="error-workExperience"></span>
                    </div>
                </div>
                <div class="col-md-4" id="work-exp-detail">
                    <div class="form-group mb-3">
                        <label for="name">Work experience Details</label>
                        <input type="text" class="form-control" id="work-experience-detail" name="work_experience_details" placeholder="Enter your Work experience Details">
                    </div>
                </div>
                <div class="col-md-4" id="work-salary-mode">
                    <div class="form-group mb-3">
                        <label for="name">Salary mode</label>
                        <input type="text" class="form-control" id="salary-mode" name="salary_mode" placeholder="Enter your Salary Mode">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group mb-3">
                        <label for="name">IELTS / PTE Score</label>
                        <input type="text" class="form-control" id="test-score" name="test_score" placeholder="Enter your IELTS / PTE score">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group mb-3">
                        <label for="name">Marital Status</label>
                        <div class="d-flex gap-2" onclick="maritalStatus()">
                            <div class="form-check">
                                <input class="form-check-input marital-status" id="marital-status" type="radio" name="marital_status" value="Single"/>
                                <label class="form-check-label">
                                    Single
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input marital-status" id="marital-status" type="radio" name="marital_status" value="Married"/>
                                <label class="form-check-label">
                                    Married
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input marital-status" id="marital-status" type="radio" name="marital_status" value="Widow"/>
                                <label class="form-check-label">
                                    Widow
                                </label>
                            </div>
                        </div>
                        <span class='error' id="error-gender"></span>
                    </div>
                </div>
                <div class="col-md-4" id="spouse-married-date">
                    <div class="form-group mb-3">
                        <label for="name">Married date</label>
                        <input type="date" class="form-control" id="married-date" name="married_date">
                    </div>
                </div>
                <div class="col-md-4" id="spouse-academic">
                    <div class="form-group mb-3">
                        <label for="name">Spouse Academics</label>
                        <input type="text" class="form-control" id="spouse-academics" name="spouse_academics" placeholder="Enter your Spouse Academics">
                    </div>
                </div>
                <div class="col-md-4" id="spouse-experience">
                    <div class="form-group mb-3">
                        <label for="name">Work Experience of Spouse</label>
                        <input type="text" class="form-control" id="spouse-work-experience" name="spouse_work_experience" placeholder="Enter Work Experience of Spouse">
                    </div>
                </div>
                <div class="col-md-4" id="spouse-salary">
                    <div class="form-group mb-3">
                        <label for="name">Spouse Salary Mode</label>
                        <input type="text" class="form-control" id="spouse-salary-mode" name="spouse_salary_mode" placeholder="Enter Spouse Salary Mode">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group mb-3">
                        <label for="name">Immigration History: </label>
                        <input type="text" class="form-control" id="immigration-history" name="immigration_history" placeholder="Enter your Immigration History" onkeyup="validateImmigrationHistory()">
                        <span class="error" id="error-immigration-history"></span>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group mb-3">
                        <label for="name">Desired study field</label>
                        <input type="text" class="form-control" id="desired-study-field" name="desired_study_field" placeholder="Enter your Desired study field" onkeyup="validateStudyField()">
                        <span class="error" id="error-studyfield"></span>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group mb-3">
                        <label for="name">Desired location (If Any)</label>
                        <select class="form-select" name="desired_location" id="desired-location">
                            <option hidden>Select your desired location</option>
                            @foreach(config('custom.states') as $in => $val)
                               <option value="{{$in}}" @if(old('desired_location') == $in) selected @endif>{{$val}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-12 text-center">
                    <button type="submit" class="enquiry-from-btn" id="enquirybtn">Submit</button>
                    <button type="submit" class="enquiry-from-btn buttonload" id="enquirybutnload" disabled>
                        <i class="fas fa-spinner fa-pulse"></i> Submiting
                    </button>
                </div>
            </div>
        </form>
    </section>
@endsection
@section('script')
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        var php_var = "<?php echo $msg; ?>";

        var status = "<?php echo $status; ?>";

    if(php_var.length !== 0){
        Swal.fire({
            title: 'Submitted!!',
            text: php_var,
            icon: status ? 'success' : 'error'
        })
    }
        fnameError = document.getElementById('error-fname');
        lnameError = document.getElementById('error-lname');
        dobError = document.getElementById('error-dob');
        cobError = document.getElementById('error-cob');
        GenderError = document.getElementById('error-gender');
        addressError = document.getElementById('error-address');
        emailError = document.getElementById('error-email');
        phoneNumberError = document.getElementById('error-phone');
        qualificationError = document.getElementById('error-qualification');
        streamError = document.getElementById('error-stream');
        gpaError = document.getElementById('error-gpa');
        graduateYearError = document.getElementById('error-graduate_year');
        gapError = document.getElementById('error-gap');
        currentStatusError = document.getElementById('error-currentStatus');
        workExperienceError = document.getElementById('error-workExperience');
        ImmigrationHistoryError = document.getElementById('error-immigration-history');
        StudyFieldError = document.getElementById('error-studyfield');

        function maritalStatus(){
            var marriedDate = document.getElementById('spouse-married-date');
            var spouseAcademic = document.getElementById('spouse-academic');
            var spouseExperience = document.getElementById('spouse-experience');
            var spouseSalary = document.getElementById('spouse-salary');
            var maritalStatus = document.getElementsByClassName("marital-status");

            for(var i=0;i<maritalStatus.length;i++){
                if(maritalStatus[i].checked){
                    valid = true;
                    break;
                }
            }
            if(maritalStatus[i].value == "Married"){
                marriedDate.classList.add('married');
                spouseAcademic.classList.add('married');
                spouseExperience.classList.add('married');
                spouseSalary.classList.add('married');
            }else{
                marriedDate.classList.remove('married');
                spouseAcademic.classList.remove('married');
                spouseExperience.classList.remove('married');
                spouseSalary.classList.remove('married');
            }
        }

        function wExperience(){
            workExperience = document.getElementById('work-experience').value;
            workDetail = document.getElementById('work-exp-detail');
            salaryMode = document.getElementById('work-salary-mode');
            if(workExperience.length == 0){
                $('#work-experience').focus();
                workExperienceError.innerHTML = "This field cannot be empty !"
                return false;
            }if(workExperience == "yes"){
                workDetail.classList.add('married');
                salaryMode.classList.add('married');
            }else{
                workDetail.classList.remove('married');
                salaryMode.classList.remove('married');
            }
                workExperienceError.innerHTML = "";
                return true;
        }

        function validatefName(){
            firstName = document.getElementById('fname').value;
            if(firstName.length == 0){
                $('#fname').focus();
                fnameError.innerHTML = "First Name is required !";
                return false;
            }else{
                fnameError.innerHTML = "";
                return true;
            }
        }

        function validatelName(){
            lastName = document.getElementById('lname').value;
            if(lastName.length == 0){
                $('#lname').focus();
                lnameError.innerHTML = "Last Name is required !";
                return false;
            }else{
                lnameError.innerHTML = "";
                return true;
            }
        }

        function validateDob(){
            var dob = document.getElementById('dob').value;
            if(dob == ""){
                $('#dob').focus();
                dobError.innerHTML = "Date of birth is required !";
                return false;
            }
                dobError.innerHTML = '';
                return true;
        }

        function eCob(){
            var cob = document.getElementById('e-cob').value;
            if(cob == ""){
                $('#e-cob').focus();
                cobError.innerHTML = "Country of birth is required !";
                return false;
            }
                cobError.innerHTML = '';
                return true;
        }

        function eGender(){
            var valid = false;
            var gender = document.getElementsByClassName("gender");
            for(var i=0;i<gender.length;i++){
                if(gender[i].checked){
                    valid = true;
                    break;
                }
            }

            if(valid){
                GenderError.innerHTML = '';
                return true;
            }else{
                GenderError.innerHTML = "Please select your gender !";
                return false;
            }
        }

        function validateAddress(){
            var address = document.getElementById('address').value;
            if(address.length == 0){
                $('#address').focus();
                addressError.innerHTML = "Address field is required !";
                return false;
            }
            addressError.innerHTML = '';
            return true;
        }

        function validateEmail(){
            var email = document.getElementById('email').value;
            if(email.length == 0){
                emailError.innerHTML = "Email is required !";
                return false;
            }
            if(!email.match(/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(.\w{2,3})+$/)){
                emailError.innerHTML = "Invalid email address";
                return false;
            }
            emailError.innerHTML = '';
            return true;
        }

        function validatePhone(){
            var phone = document.getElementById('phone').value;
            if(phone.length == 0){
                $('#phone').focus();
                phoneNumberError.innerHTML = "Mobile number is required !";
                return false;
            }
            if(!phone.match(/^\d{10}$/)){
                phoneNumberError.innerHTML = "Invalid mobile number";
                return false;
            }
            phoneNumberError.innerHTML = '';
            return true;
        }

        function validateQualification(){
            var qualification = document.getElementById('highest_qualification').value;
            if(qualification.length == 0){
                $('#highest_qualification').focus();
                qualificationError.innerHTML = "Highest Qualification field is required !";
                return false;
            }
            qualificationError.innerHTML = '';
            return true;
        }

        function validateStream(){
            var stream = document.getElementById('stream').value;
            if(stream.length == 0){
                $('#stream').focus();
                streamError.innerHTML = "Stream field is required !";
                return false;
            }
            streamError.innerHTML = '';
            return true;
        }

        function validateGpa(){
            var gpa = document.getElementById('gpa').value;
            if(gpa.length == 0){
                $('#gpa').focus();
                gpaError.innerHTML = "GPA or % is required !";
                return false;
            }
            gpaError.innerHTML = '';
            return true;
        }

        function validatePassout(){
            var graduateYear = document.getElementById('graduate_year').value;
            if(graduateYear.length == 0){
                $('#graduate_year').focus();
                graduateYearError.innerHTML = "Graduate year is required !";
                return false;
            }
            graduateYearError.innerHTML = '';
            return true;
        }

        function validateGap(){
            var gap = document.getElementById('gap').value;
            if(gap.length == 0){
                $('#gap').focus();
                gapError.innerHTML = "Gap field is required !";
                return false;
            }
            gapError.innerHTML = '';
            return true;
        }

        function validateCurrent(){
            var currentStatus = document.getElementById('current_status').value;
            if(currentStatus.length == 0){
                $('#current_status').focus();
                currentStatusError.innerHTML = "Current Status is required !";
                return false;
            }
            currentStatusError.innerHTML = '';
            return true;
        }

        function validateImmigrationHistory(){
            var ImmigrationHistory = document.getElementById('immigration-history').value;
            if(ImmigrationHistory.length == 0){
                $('#immigration-history').focus();
                ImmigrationHistoryError.innerHTML = "Immigration History is required !";
                return false;
            }
            ImmigrationHistoryError.innerHTML = '';
            return true;
        }

        function validateStudyField(){
            var StudyField = document.getElementById('desired-study-field').value;
            if(StudyField.length == 0){
                $('#desired-study-field').focus();
                StudyFieldError.innerHTML = "Desired Study Field is required !";
                return false;
            }
            StudyFieldError.innerHTML = '';
            return true;
        }

        var enqloaderBtn = document.getElementById('enquirybutnload');
        var enquirybtn = document.getElementById('enquirybtn');
        function submitEnquiry(){
            if(!validatefName() || !validatelName() || !validateDob() || !eCob() || !eGender() ||
            !validateAddress() || !validateEmail() || !validatePhone() || !validateQualification() ||
            !validateStream() || !validateGpa() || !validatePassout() || !validateGap() || !validateCurrent() ||
            !wExperience() || !validateImmigrationHistory() || !validateStudyField()){
                return false;
            }else{
                enqloaderBtn.classList.add('displayEnqBtn');
                enquirybtn.classList.add('buttonload')
            }
        }
    </script>
@endsection