@extends('layouts/blankLayout')

@section('title', 'Apply Job - Welcome')

@section('vendor-style')
    @vite([
        'resources/assets/vendor/libs/dropzone/dropzone.scss',
        'resources/assets/vendor/libs/select2/select2.scss',
        ])
@endsection

@section('vendor-script')
    @vite([
        'resources/assets/vendor/libs/dropzone/dropzone.js',
        'resources/assets/vendor/libs/select2/select2.js',
        ])
@endsection

@section('page-script')
    @vite('resources/assets/js/forms-file-upload.js')
@endsection

@section('content')

<style>
.content-wrapper {
    width: 100%;
    max-width: 210mm;
    /* margin: 0 auto; */
    box-sizing: border-box;
    /* min-height: 297mm;  */
    display: block;
    text-align: left;
}

.apply-btn {
    background: #AB2B22;
    color: #fff;
    border: none;
    padding: 10px 25px;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
}

.apply-btn:hover {
    background: rgba(255, 60, 0, 1);
    color: #fff;
}

/* Card styling */
.card {
    background: transparent;
    box-shadow: none;
}
.logo-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.header-card{
    position:absolute; 
    top:75%; 
    right:380px; 
    transform: translateY(-50%);
}


@media (min-width: 320px){
    .header-card{
        position: absolute;
        top:85%;
        right:110px
    }
}

@media (min-width: 380px){
    .header-card{
        position: absolute;
        top:85%;
        right:150px
    }
}

@media (min-width: 425px){
    .header-card{
        position: absolute;
        top:85%;
        right:180px
    }
}

@media (min-width: 768px){
    .header-card{
        position: absolute;
        top:85%;
        right:340px;
    }
}

.resume-dropzone {
    border: 2px dashed #ab2b22;
    border-radius: 10px;
    padding: 5px 15px;
    text-align: center;
    cursor: pointer;
    background: #fdf6f2ff;
    transition: all 0.3s ease;
}

.resume-dropzone:hover {
    background: #fdf6f2ff;
    border-color: #ab2b22;
}

.resume-dropzone.dragover {
    background: #fdf6f2ff;
    border-color: #ab2b22;
}

.file-name {
    /* margin-top: 15px; */
    padding: 5px;
    background: #ea7e7421;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #ab2b22;
}
</style>
<center>
<form method="POST" action="{{ route('submit_job_application') }}" enctype="multipart/form-data" autocomplete="off" id="jobApplyForm">
@csrf
<div class="content-wrapper bg-white" style="border-top-right-radius: 5px;border-top-left-radius: 5px;padding-bottom: 50px !important;">
    <div class="card bg-primary" style="padding:20px; position:relative; height:80px; overflow: visible;border-top-left-radius: 0px; border-top-right-radius:none;">
        <div style="" class="header-card">
            <div class="logo-circle bg-white border border-5 border-primary d-inline-flex align-items-center justify-content-center">
                <img src="{{ asset('assets/common/logo_small.png') }}"
                    width="60"
                    alt="EGC Logo">
            </div>
        </div>
    </div>
    <input type="hidden" name="job_request_id" value="{{$jobRequest->sno ?? ''}}">
    <input type="hidden" name="job_role_id" value="{{$jobRequest->job_role_id ?? ''}}">
    <div class="content">
        <div style="margin-top:40px;padding: 10px 20px;margin-bottom: 10px;">
            <h4 style="margin-bottom:0.75rem;color: #000;">We're Hiring | {{$jobRequest->job_role_name ?? ''}}
                <span class="fs-6 text-dark d-block mt-4 mb-4">Apply now — We’re excited to see how your skills can make an impact. Join our team and become a valued part of our family!</span>
            </h4>
            <div style="display:flex; align-items:center; justify-content:start;gap:20px;flex-wrap:wrap;">
                <label style="margin-bottom: 10px;display:flex; align-items:center; justify-content:start;gap:2px;flex-wrap:wrap;">
                    <span class="py-2 bg-gray-300 rounded" style="padding-right: 0.45rem !important;padding-left: 0.5rem !important;">
                        <i class="mdi mdi-lightbulb-night-outline fs-4 text-black"></i>
                    </span>
                    <span style="margin-left:4px;">{{$jobRequest->experience > 0 ? '0 -' . $jobRequest->experience . ' Years' : 'Fresher'}}</span>
                </label>
                <label style="margin-bottom: 10px;display:flex; align-items:center; justify-content:start;gap:2px;flex-wrap:wrap;">
                    <span class="py-2 bg-gray-300 rounded" style="padding-right: 0.5rem !important;padding-left: 0.5rem !important;">
                        <i class="mdi mdi-calendar-month-outline fs-4 text-black    "></i>
                    </span>
                    <span style="margin-left:4px;">{{$jobRequest->last_apply_date ? date('d-M-Y', strtotime($jobRequest->last_apply_date)) :'-' }}</span>
                </label>
            </div>
        </div>
        <div style="margin:10px 20px; text-align: left;padding: 10px 20px;border-radius:10px;background: rgba(240, 240, 240, 0.54)">
            <h2 style="font-size: 18px; color: #333;">
                <i class="mdi mdi-account-outline fs-4 text-black"></i>
                Personal Information
            </h2>
            <div style="margin-bottom: 20px; text-align: left;padding: 0 20px;margin-top: 20px;">
                <div class="row">
                    <div class="col-lg-6 mb-2">
                        <label class="fw-semibold fs-6 text-back">Full Name</label>
                        <input type="text" class="form-control" id="fullName" name="fullName" placeholder="Enter Full Name" oninput="this.value=this.value.replace(/^\w/, txt=>txt.toUpperCase());"/>
                        <div class="text-danger" id="fullName_err"></div>
                    </div>
                    <div class="col-lg-6 mb-2">
                        <label class="fw-semibold fs-6 text-back">Gender</label>
                        <select id="gender" name="gender" class="select3 form-select">
                            <option value="">Select Gender</option>
                            <option value="1" selected>Male</option>
                            <option value="2" >Female</option>
                            <option value="3">Others</option>
                        </select>
                        <div class="text-danger" id="gender_err"></div>
                    </div>
                    <div class="col-lg-6 mb-2">
                        <label class="fw-semibold fs-6 text-back">Mobile Number</label>
                        <input type="text" class="form-control" placeholder="Enter Mobile Number" id="mobile" name="mobile" maxLength="10" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');"/>
                        <div class="text-danger" id="mobile_err"></div>
                    </div>
                    <div class="col-lg-6 mb-2">
                        <label class="fw-semibold fs-6 text-back">Email Id</label>
                        <input type="text" class="form-control"  id="email" name="email" placeholder="Enter Email Id" oninput="this.value=this.value.toLowerCase();"/>
                        <div class="text-danger" id="email_err"></div>
                    </div>
                    <div class="col-lg-6 mb-2">
                        <label class="fw-semibold fs-6 text-back">Marital Status</label>
                        <select id="marital_status" name="marital_status" class="select3 form-select">
                            <option value="">Select Marital Status</option>
                            <option value="1">Married</option>
                            <option value="2">Single</option>
                        </select>
                        <div class="text-danger" id="marital_status_err"></div>
                    </div>
                </div>
            </div>
        </div>
        <div style="margin:10px 20px; text-align: left;padding: 10px 20px;border-radius:10px;background: rgba(240, 240, 240, 0.54)">
            <h2 style="font-size: 18px; color: #333;">
                <i class="mdi mdi-briefcase-variant-outline fs-4 text-black"></i>
                Education & Qualification
            </h2>
            <div style="margin-bottom: 20px; text-align: left;padding: 0 20px;margin-top: 20px;">
                <div class="row">
                    <div class="col-lg-6 mb-2">
                        <label class="fw-semibold fs-6 text-back">Qualification</label>
                        <select id="qualification" name="qualification" class="select3 form-select" onchange="qualification_change()">
                            <option value="">Select Qualification</option>
                            <option value="1">UG</option>
                            <option value="2" >PG</option>
                            <option value="3" >Doctorate</option>
                            <option value="Others" >Others</option>
                        </select>
                        <div class="text-danger" id="qualification_err"></div>
                    </div>
                    <div class="col-lg-6 mb-2" id="major_div">
                        <label class="text-black mb-1 fs-6 fw-semibold">Major<span class="text-danger">*</span></label>
                        <select id="candidate_major" name="major" class="select3 form-select" onchange="major_change_func()">
                            <option value="">Select Major</option>
                            
                        </select>
                        <div class="text-danger" id="major_err"></div>
                    </div>
                    <div class="col-lg-6 mb-2" id="candidate_other_qualify_div">
                        <label class="text-black mb-1 fs-6 fw-semibold">Others<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" placeholder="Enter Other Qualification" id="candidate_other_qualify" name="candidate_other_qualify" oninput="this.value=this.value.replace(/^\w/, txt=>txt.toUpperCase());"/>
                        <div class="text-danger" id="candidate_other_qualify_err"></div>
                    </div>
                    <div class="col-lg-6 mb-2">
                        <label class="fw-semibold fs-6 text-back">Fresher / Experience</label>
                        <select id="exper_type" name="exper_type" class="select3 form-select" onchange="toggleExperience()">
                            <option value="">Select Fresher / Experience</option>
                            <option value="1" selected>Fresher</option>
                            <option value="2" >Experience</option>
                        </select>
                        <div class="text-danger" id="exper_type_err"></div>
                    </div>
                    <div class="col-lg-6 mb-2" id="experience_div" style="display:none;">
                        <label class="fw-semibold fs-6 text-back">Experience</label>
                        <input type="text" class="form-control" id="exper_count" name="exper_count" placeholder="Enter Experience" maxlength="3" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');"/>
                        <div class="text-danger" id="exper_count_err"></div>
                    </div>
                </div>
            </div>
        </div>
        <div style="margin:10px 20px; text-align: left;padding: 10px 20px;border-radius:10px;background: rgba(240, 240, 240, 0.54);">
            <h2 style="font-size: 18px; color: #333;">
                <i class="mdi mdi-tray-arrow-up fs-4 text-black"></i>
                Resume Upload
            </h2>
            <div style="margin-bottom: 20px; text-align: left;padding: 0 20px;margin-top: 20px;">
                <div class="row">
                    <div class="col-lg-12 mb-2">
                       <div id="resume-dropzone" class="resume-dropzone">
                                <input type="file"
                                    id="resume"
                                    name="resume"
                                    accept=".pdf,.doc,.docx"
                                    hidden
                                    required>

                                <div class="dropzone-content">
                                    <div class="text-center text-black me-3 mb-2">Drop files here or click
                                    to upload</div>
                                    <span class="d-flex gap-1 align-item-center justify-content-center" id="browse-file-text">
                                        <i class="mdi mdi-upload fs-8 text-primary"></i>
                                        <p class="fw-semibold text-primary">Browse Resume</p>
                                    </span>
                                    
                                </div>

                                <div id="file-name" class="file-name d-none"></div>
                            </div>

                            
                    </div>
                    <div class="text-danger" id="resume_err"></div>
                </div>
            </div>
        </div>
        <div style="margin:10px 20px; text-align: left;padding: 10px 20px;border-radius:10px;background: rgba(240, 240, 240, 0.54);">
            <div style="margin-bottom: 20px; text-align: left;padding: 0 20px;margin-top: 20px;">
                <div class="row">
                    <div class="col-lg-12 mb-2">
                        <label class="fw-semibold fs-6 text-back">How do you know about us?</label>
                        <select id="source" name="source" class="select3 form-select">
                            <option value="">Select Source</option>
                            @foreach($source_list as $source)
                                        <option value="{{ $source->sno }}" data-detail="{{$source->detail_check ?? 0}}" >{{ $source->source_name }}</option>
                            @endforeach
                        </select>
                        <div class="text-danger" id="source_err"></div>
                    </div>
                    <div class="col-lg-12 mb-2">
                        <label class="fw-semibold fs-6 text-back">Tell us about yourself</label>
                        <textarea rows="3" class="form-control" id="about" name="about" placeholder="Tell us about yourself..."></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div style="margin: 20px;padding: 10px;text-align:center;">
            <button type="button" class="apply-btn" style="width: 300px; " id="submitBtn"  onclick="validation_func()">
                <span id="yesBtnText">Submit Application</span>
                <span id="yesBtnLoader" style="display: none;" role="status" aria-hidden="true">
                    <span class="spinner-border spinner-border-sm"></span>
                    <span class="ms-2">Applying...</span>
                </span>
            </button>
        </div>
    </div>
</div>
</form>
</center>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">

    <!-- Toastr JavaScript from CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <style>
        /* Customize Toastr notification */
        .toast-success {
            background-color: green;
        }

        /* Customize Toastr notification */
        .toast-error {
            background-color: red;
        }
    </style>
<script>
   

    function toggleExperience() {
        var experType = document.getElementById('exper_type').value;
        var experienceDiv = document.getElementById('experience_div');

        if (experType === '2') { // Experience selected
            experienceDiv.style.display = 'block';
        } else {
            experienceDiv.style.display = 'none';
            document.getElementById('exper_count').value = ''; // Clear experience input
        }
    }
</script>
<script>
    function submit_form() {
        const form = document.getElementById("jobApplyForm");
        const submitBtn = document.getElementById("submitBtn");
        const submitBtnText = document.getElementById("yesBtnText");
        const submitBtnLoader = document.getElementById("yesBtnLoader");

        if (!isOnline()) {
            toastr.error(
                'No internet connection. Please reconnect and try again.',
                'Connection Lost'
            );
            return; 
        }

        if (form) {
            // Disable the button to prevent duplicate submission
            submitBtn.disabled = true;
            submitBtnText.style.display = "none"; // Hide "Yes"
            submitBtnLoader.style.display = "inline-block"; // Show loader

            // Create FormData manually
            const formData = new FormData(form);

            // Dropzone.instances.forEach((dz, index) => {
            //     dz.files.forEach((file, i) => {
            //         formData.append(`attachment`, file);
            //     });
            // });

            // Send via AJAX (so files are sent correctly)
            $.ajax({
                url: form.action,
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    console.log("Success:", response);
                    if(response.status == '200'){
                        window.location.href = '/application_submitted/' + response.application_id;

                        submitBtn.disabled = false;
                        submitBtnText.style.display = "inline-block"; // Show "Yes" again
                        submitBtnLoader.style.display = "none"; // Hide loader
                    } else {
                        toastr.error(response.message);
                        // Re-enable the button and reset the text
                        submitBtn.disabled = false;
                        submitBtnText.style.display = "inline-block"; // Show "Yes" again
                        submitBtnLoader.style.display = "none"; // Hide loader
                    }
                },
                error: function(err) {
                    console.error("Error:", err);
                    toastr.error(err.responseJSON.message || 'An error occurred while submitting the form.');
                    // In case of an error, re-enable the button and reset the text
                    submitBtn.disabled = false;
                    submitBtnText.style.display = "inline-block"; // Show "Yes" again
                    submitBtnLoader.style.display = "none"; // Hide loader
                }
            });
        }
    }
</script>

<script>
function validation_func() {
    let err = false; 

    // Full Name
    if (!$('#fullName').val().trim()) {
        $('#fullName_err').text('Full Name is required.');
        err = true;
    } else {
        $('#fullName_err').text('');
    }

    // Gender
    if (!$('#gender').val()) {
        $('#gender_err').text('Gender is required.');
        err = true;
    } else {
        $('#gender_err').text('');
    }

    // Mobile Number (must be exactly 10 digits)
    const mobile = $('#mobile').val().trim();
    const mobilePattern = /^[0-9]{10}$/;

    if (!mobile) {
        $('#mobile_err').text('Mobile Number is required.');
        err = true;
    } else if (!mobilePattern.test(mobile)) {
        $('#mobile_err').text('Mobile Number must be exactly 10 digits.');
        err = true;
    } else {
        $('#mobile_err').text('');
    }

    // Email
    const email = $('#email').val().trim();
    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

    if (!email) {
        $('#email_err').text('Email ID is required.');
        err = true;
    } else if (!emailPattern.test(email)) {
        $('#email_err').text('Enter a valid Email ID.');
        err = true;
    } else {
        $('#email_err').text('');
    }

    // Marital Status
    if (!$('#marital_status').val()) {
        $('#marital_status_err').text('Marital Status is required.');
        err = true;
    } else {
        $('#marital_status_err').text('');
    }

    // Qualification
    if (!$('#qualification').val()) {
        $('#qualification_err').text('Qualification is required.');
        err = true;
    } else {
        $('#qualification_err').text('');
    }
    if (!$('#candidate_major').val()) {
        $('#major_err').text('Major is required.');
        err = true;
    } else {
        if($('#candidate_major').val() =='Others'){
            if (!$('#candidate_other_qualify').val()) {
                $('#candidate_other_qualify_err').text('Qualification is required.');
                err = true;
            } else {
                $('#candidate_other_qualify_err').text('');
            }
        }else{
            $('#major_err').text('');
        }
       
    }

    // Experience Type
    const experType = $('#exper_type').val();
    if (!experType) {
        $('#exper_type_err').text('Please select Fresher or Experience.');
        err = true;
    } else {
        $('#exper_type_err').text('');
    }

    // Experience Count (only if Experience selected)
    if (experType === '2') {
        const experCount = $('#exper_count').val().trim();
        if (!experCount) {
            $('#exper_count_err').text('Experience is required.');
            err = true;
        } else {
            $('#exper_count_err').text('');
        }
    } else {
        $('#exper_count_err').text('');
    }

    // Resume
    if (!$('#resume').val()) {
        $('#resume_err').text('Resume is required.');
        err = true;
    } else {
        $('#resume_err').text('');
    }

    // Source
    if (!$('#source').val()) {
        $('#source_err').text('Source is required.');
        err = true;
    } else {
        $('#source_err').text('');
    }

    // Submit if no errors
    if (!err) {
        submit_form();
    }
}
</script>


<script>
    const dropzone = document.getElementById('resume-dropzone');
    const fileInput = document.getElementById('resume');
    const fileName = document.getElementById('file-name');
    const browseFileName = document.getElementById('browse-file-text');
    const resumeErr = document.getElementById('resume_err');

    const allowedExtensions = ['pdf', 'doc', 'docx'];

    function validateResume(file) {
        resumeErr.textContent = '';

        if (!file) return false;

        const ext = file.name.split('.').pop().toLowerCase();

        if (!allowedExtensions.includes(ext)) {
            resumeErr.textContent = 'Only PDF, DOC, and DOCX files are allowed.';
            fileInput.value = '';
            fileName.classList.add('d-none');
            browseFileName.classList.remove('d-none');
            return false;
        }

        return true;
    }

    // Click to open file browser
    dropzone.addEventListener('click', () => {
        fileInput.click();
    });

    // File select
    fileInput.addEventListener('change', () => {
        const file = fileInput.files[0];

        if (!validateResume(file)) return;

        fileName.textContent = "Selected File: " + file.name;
        fileName.classList.remove('d-none');
        browseFileName.classList.add('d-none');
    });

    // Drag over
    dropzone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropzone.classList.add('dragover');
    });

    // Drag leave
    dropzone.addEventListener('dragleave', () => {
        dropzone.classList.remove('dragover');
    });

    // Drop file
    dropzone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropzone.classList.remove('dragover');

        const file = e.dataTransfer.files[0];

        if (!validateResume(file)) return;

        fileInput.files = e.dataTransfer.files;
        fileName.textContent = "Selected File: " + file.name;
        fileName.classList.remove('d-none');
        browseFileName.classList.add('d-none');
    });

    function isOnline() {
        return navigator.onLine;
    }

        window.addEventListener('load', () => {
            if (!isOnline()) {
                toastr.error('You are currently offline. Please check your internet connection.');
            }
        });

        window.addEventListener('offline', () => {
            toastr.error('You have lost internet connection. Please check your connection.');
        });

        window.addEventListener('online', () => {
            toastr.success('You are back online.');
        });
</script>



<script>
     function qualification_change(){
       var qualification_id= $('#qualification').val();

        var majorDropdown = $('#candidate_major');
        majorDropdown.empty().append('<option value="">Select Major</option>');

        if (qualification_id) {
            $.ajax({
                url: "{{ route('major_list_by_qualification') }}",
                type: "GET",
                data: {
                    qualification_id: qualification_id
                },
                success: function(response) {
                    if (response.status === 200 && response.data) {
                        response.data.forEach(function(state) {
                            majorDropdown.append($('<option></option>').attr(
                                'value', state.sno).text(state
                                .major_name));
                        });
                         majorDropdown.append('<option value="Others">Others</option>');
                         
                    }
                },
                error: function(error) {
                    console.error('Error fetching major:', error);
                }
            });

        }
    }
     major_change_func()
    function major_change_func(){
            var candidate_major =$('#candidate_major').val();
            if(candidate_major == 'Others'){
                $('#candidate_other_qualify_div').show();
            }else{
                $('#candidate_other_qualify_div').hide();
            }
       
        }
</script>

@endsection