@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;
    position: relative;
    box-shadow: none;
}
.logo-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
 
.header-card {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.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_jobfair_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:0px;">
        <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_fair_id" value="{{$jobfair->sno ?? ''}}">
    <div class="content">
        <div style="margin-top:40px;padding: 10px 20px;margin-bottom: 10px;">
            <h4 class="fw-semibold text-dark mb-2">
                Job Registration
            </h4>

            <p class="text-muted mb-3" style="font-size:14px;">
             Please complete your details to be considered for available career opportunities.
            </p>
        </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>
                Candidate Information
            </h2>
            <div style="margin-bottom: 20px; text-align: left;padding: 0 0px;margin-top: 20px;">
                <div class="row">
                    <div class="col-lg-6 mb-2">
                        <label class="fw-semibold fs-6 text-black">Full Name<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="fullName" name="fullName" placeholder="Enter your 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-black">Gender<span class="text-danger">*</span></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-black">Mobile Number<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" placeholder="10-digit 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-black">Email Id<span class="text-danger">*</span></label>
                        <input type="text" class="form-control"  id="email" name="email" placeholder="yourname@example.com" oninput="this.value=this.value.toLowerCase();"/>
                        <div class="text-danger" id="email_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;" class="text-nowrap">
                <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 0px;margin-top: 20px;">
                <div class="row">
                    <div class="col-lg-6 mb-2">
                        <label class="fw-semibold fs-6 text-black">Qualification<span class="text-danger">*</span></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="4">HSC</option>
                            <option value="5">SSLC</option>
                            <option value="6">Below SSLC</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" >
                            <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-black">Fresher / Experience<span class="text-danger">*</span></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-black">Experience<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="exper_count" name="exper_count" placeholder="e.g. 2" 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 0px;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 class="w-100 d-flex justify-content-center">
            <button type="button" class="apply-btn" style="width: 300px; " id="submitBtn"  onclick="validation_func()">
                <span id="yesBtnText">Submit Registration</span>
                <span id="yesBtnLoader" style="display: none;" role="status" aria-hidden="true">
                    <span class="spinner-border spinner-border-sm"></span>
                    <span class="ms-2">Submitting...</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'){
                        submitBtn.disabled = true;
                         submitBtn.innerText = 'Submitted'
                        submitBtnText.style.display = "inline-block"; // Show "Yes" again
                        submitBtnLoader.style.display = "none"; // Hide loader
                        const newTab = window.open(response.redirect, "_blank");
                        if (newTab) {
                            newTab.focus();
                            setTimeout(() => {
                                window.open('', '_self');
                                window.close();
                            }, 500);
                        } else {
                            window.location.href = response.redirect;
                        }
                        
                    } 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 ($('#major_div').is(':visible') && !$('#candidate_major').val()) {
        $('#major_err').text('Major is required.');
        err = true;
    } else {
        $('#major_err').text('');
    }
    // if (!$('#candidate_major').val()) {
    //     $('#major_err').text('Major is required.');
    //     err = true;
    // } else {
    //      $('#major_err').text('');
    //     // 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 || isNaN(experCount) || experCount <= 0) {
            $('#exper_count_err').text('Enter valid years of experience.');
            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 maxSize = 5 * 1024 * 1024; // 2MB

        if (file.size > maxSize) {
            resumeErr.textContent = 'File size must be less than 2MB.';
            fileInput.value = '';
            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();
       let hideMajorFor = ['4', '5', '6', 'Others'];

        if (hideMajorFor.includes(qualification_id)) {
            $('#major_div').hide();
            $('#candidate_major').val("").trigger("change");
            return; // stop ajax call
        } else {
            $('#major_div').show();
        }

        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