@extends('fronted.layout.main')
@section('adcontent')
<link rel="stylesheet" href="{{asset('assets/css/registrationForm.css')}}">

<div class="container-fluid mb-5">
    <a class="btn btn-warning btn-sm mb-1" href="{{route('employees.show')}}">Employee List</a>
    <h5 class="text-center fw-normal fs-6 p-1 text-white bg-info text-uppercase">Employee Registration Form</h5>
    <div class="">
        <form id="EmployeRegisterForm" class="needs-validation" action="{{ route('StoreEmp') }}" method="post" enctype="multipart/form-data" autocomplete="off" novalidate>
            @csrf
            <div class="row g-1">
                <div class="col-12">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <div class="">
                            <div class="input-group" style="flex-basis: content">
                                <span class="input-group-text" for="formNo">Form No<span class="text-danger text-center">*</span></span>
                                <input type="number" name="formno" id="formNo" value="{{ $formno }}" class="form-control" readonly>
                            </div>
                         
                        </div>
                        <div class="">
                            <span class="input-group" style="flex-basis: content">
                                <label class="input-group-text" for="regDate">Date<span class="text-danger text-center">*</span></label>
                                <input type="date" name="regdate" id="regDate" value="{{ !old('regdate') ? now()->format('Y-m-d') : old('regdate') }}" class="form-control dateRequired" required>
                            </span>
                         
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <h5 class="sub-heading text-start fw-normal p-1 text-white bg-info text-uppercase">Personal Details</h5>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="input-group">
                        <label class="input-group-text" for="empName">Full Name<span class="text-danger text-center">*</span></label>
                        <input class="form-control" type="text" id="empName" value="{{ old('empName') }}" name="empName" oninput="ValidationTextFiled(this)" required>
                    </div>
            
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="input-group">
                        <label class="input-group-text" for="addEmpEmail">Email<span class="text-danger text-center">*</span></label>
                        <input class="form-control" type="email" id="addUserEmail" value="{{ old('userEmail') }}" name="userEmail" required>
                    </div>
                 
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="input-group">
                        <label class="input-group-text" for="addEmpMobile">Mobile<span class="text-danger text-center">*</span></label>
                        <input class="form-control" type="text" id="addUserMobile" value="{{ old('userMobile') }}" name="userMobile" maxlength="10" minlength="10" oninput="Validation(this,10)" required>
                    </div>
             
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="input-group">
                        <label class="input-group-text" for="userDob">Date Of Birth<span class="text-danger text-center">*</span></label>
                        <input class="form-control dateRequired" type="date" id="userDob" value="{{ old('userDob') }}" name="userDob" required>
                    </div>
                  
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="input-group">
                        <label class="input-group-text" for="addAdhrMobile">Aadhar No<span class="text-danger text-center">*</span></label>
                        <input class="form-control" type="text" id="addAdhrMobile" min="1" value="{{ old('userAadhar') }}" name="userAadhar" maxlength="12" minlength="12" oninput="Validation(this,12)" onchange="CheckReview(this.value)" required>
                        <button class="btn d-none btn-success ReviewCheck" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#candidateReview">
                            Check Review
                        </button>
                    </div>
                
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="input-group">
                        <label class="input-group-text" for="bloodGroup">Select Blood Group<span class="text-danger text-center">*</span>:</label>
                        <select class="form-select" id="bloodGroup" name="bloodGroup" required>
                            <option selected value="">Select</option>
                            <option value="A+">A+</option>
                            <option value="A-">A-</option>
                            <option value="B+">B+</option>
                            <option value="B-">B-</option>
                            <option value="AB+">AB+</option>
                            <option value="AB-">AB-</option>
                            <option value="O+">O+</option>
                            <option value="O-">O-</option>
                        </select>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="input-group">
                        <span class="input-group-text" for="healthDesc">Any Health Issue<span class="text-danger text-center">*</span></span>
                        <div class="input-group-text">
                            <input class="form-check-input mt-0" type="radio" name="healthCheck" id="healthNo" value="No" onclick="toggleHiddenInput(this,'#healthDesc')" data-bs-toggle="tooltip" title="No" checked>
                        </div>
                        <div class="input-group-text">
                            <input class="form-check-input" type="radio" name="healthCheck" value="Yes" onclick="toggleHiddenInput(this,'#healthDesc')" id="healthYes" data-bs-toggle="tooltip" title="Yes">
                        </div>
                        <input type="text" class="form-control" id="healthDesc" value="{{ old('healthDesc') }}" name="healthDesc" style="display:none;">
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="input-group">
                        <label class="input-group-text" for="maritalStatus">Marital Status<span class="text-danger text-center">*</span></label>
                        <select class="form-select" name="maritalStatus" id="maritalStatus">
                            <option value="Married">Married</option>
                            <option value="UnMarried" selected>UnMarried</option>
                        </select>
                    </div>
              
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="input-group">
                        <span class="input-group-text" for="VehicalNo">Vehical No<span class="text-danger text-center">*</span></span>
                        <div class="input-group-text">
                            <input class="form-check-input" type="radio" name="vehicalCheck" id="vehicalNo" value="No" onclick="toggleHiddenInput(this,'#VehicalNo')" data-bs-toggle="tooltip" title="No" checked>
                        </div>
                        <div class="input-group-text">
                            <input class="form-check-input" type="radio" name="vehicalCheck" value="Yes" id="vehicalYes" onclick="toggleHiddenInput(this,'#VehicalNo')" data-bs-toggle="tooltip" title="Yes">
                        </div>
                        <input type="text" class="form-control" id="VehicalNo" value="{{ old('vehicalNo') }}" name="vehicalNo" style="display:none;">
                    </div>
                    @error('vehicalNo')
                    <span class="ValidationText text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="input-group">
                        <label for="userFatherName" class="input-group-text"><span id="setFatherSpouseName">Father Name</span><span class="text-danger text-center">*</span></label>
                        <input type="text" class="form-control" id="userFatherName" name="userFatherName" value="{{ old('userFatherName') }}" oninput="ValidationTextFiled(this)" required>
                    </div>
                    @error('userFatherName')
                    <span class="ValidationText text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <hr>
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <h6 class="bg-white text-black p-1">Address Details</h6>
                    <div class="row g-1 ">
                        <div class="col-3">
                            <div class="input-group">
                                <label class="input-group-text" for="userCurrentPin">Pincode<span class="text-danger text-center">*</span></label>
                                <input type="text" name="currentPin" class="form-control numberRequired" id="userCurrentPin" maxlength="6" minlength="6" required>
                            </div>
                            @error('currentPin')
                            <span class="ValidationText text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-3 currentAddressInputs" style="display:none">
                            <div class="input-group flex-nowrap">
                                <label for="currentCountry" class="input-group-text">Country</label>
                                <input type="text" name="currentCountry" list="currentCountryList" id="currentCountry" class="form-control" required>
                            </div>
                            <datalist id="currentCountryList"></datalist>
                        </div>
                        <div class="col-3 currentAddressInputs" style="display:none">
                            <div class="input-group flex-nowrap">
                                <label for="currentState" class="input-group-text">State</label>
                                <input type="text" name="currentState" list="currentStateList" id="currentState" class="form-control" required>
                            </div>
                            <datalist id="currentStateList"></datalist>
                        </div>
                        <div class="col-3 currentAddressInputs" style="display:none">
                            <div class="input-group flex-nowrap">
                                <label for="currentDistrict" class="input-group-text">District</label>
                                <input type="text" name="currentDistrict" list="currentDistrictList" id="currentDistrict" class="form-control" required>
                            </div>
                            <datalist id="currentDistrictList"></datalist>
                        </div>
                        <div class="col-12 currentAddressInputs" style="display:none">
                            <div class="input-group">
                                <label class="input-group-text" for="userCurrentHno">Current Address<span class="text-danger text-center">*</span></label>
                                <input type="text" name="currentAddress" class="form-control" id="userCurrentHno" value="{{ old('currentAddress') }}" required>
                            </div>
                            @error('currentAddress')
                            <span class="ValidationText text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="addreshCheck">
                        <label class="form-check-label text-capitalize" for="addreshCheck">current address is same as permanent address?</label>
                    </div>
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <div class="row g-1">
                        <div class="col-3">
                            <div class="input-group">
                                <label class="input-group-text" for="userPin">Pincode<span class="text-danger text-center">*</span></label>
                                <input type="text" name="parmanaetPin" class="form-control numberRequired" id="userPermanentPin" value="{{ old('permanentPin') }}" required>
                            </div>
                        </div>
                        <div class="col-3 parmanetAddressInputs" style="display:none">
                            <div class="input-group flex-nowrap">
                                <label for="permanentCountry" class="input-group-text">Country</label>
                                <input type="text" name="permanentCountry" list="permanentCountryList" id="permanentCountry" class="form-control" required>
                            </div>
                            <datalist id="permanentCountryList"></datalist>
                        </div>
                        <div class="col-3 parmanetAddressInputs" style="display:none">
                            <div class="input-group flex-nowrap">
                                <label for="parmanentState" class="input-group-text">State</label>
                                <input type="text" name="parmanaetState" list="parmanentStateList" id="parmanentState" class="form-control" required>
                            </div>
                            <datalist id="parmanentStateList"></datalist>
                        </div>
                        <div class="col-3 parmanetAddressInputs" style="display:none">
                            <div class="input-group flex-nowrap">
                                <label for="permanentDistrict" class="input-group-text">District</label>
                                <input type="text" name="permanentDistrict" list="permanentDistrictList" id="permanentDistrict" class="form-control" required>
                            </div>
                            <datalist id="permanentDistrictList"></datalist>
                        </div>
                        <div class="col-12 parmanetAddressInputs" style="display:none">
                            <div class="input-group">
                                <label class="input-group-text" for="userPermanentHno">Permanent Address<span class="text-danger text-center">*</span></label>
                                <input type="text" name="parmanaetAddress" class="form-control" id="userPermanentHno" value="{{ old('permanentAddress') }}" required>
                            </div>
                        
                        </div>
                    </div>
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <h5 class="sub-heading text-start fw-normal p-1 text-white bg-info text-uppercase mt-2">Work Experience Details</h5>
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <div id="experienceContainer"></div>
                    <div class="d-flex justify-content-end">
                        <button class="btn me-2" id="addExperience" type="button" data-bs-toggle="tooltip" title="Add Experience"><i class="fa-regular fa-square-plus fa-lg" style="color: #FFD43B;"></i></button>
                    </div>
                </div>

                <div class="col-12">
                    <h5 class="sub-heading text-start fw-normal p-1 text-white bg-info text-uppercase mt-2">Bank Details</h5>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="input-group">
                        <label class="input-group-text" for="userBankName">Bank Name<span class="text-danger text-center">*</span></label>
                        <input type="text" class="form-control" id="userBankName" name="userBankName" oninput="ValidationTextFiled(this)" value="{{ old('userBankName') }}" required>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="input-group">
                        <label class="input-group-text" for="userBranchName">Account Holder Name<span class="text-danger text-center">*</span></label>
                        <input type="text" class="form-control" id="userBranchName" name="holderName" oninput="ValidationTextFiled(this)" value="{{ old('holderName') }}" required>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="input-group">
                        <label class="input-group-text" for="ifscCode">IFSC Code<span class="text-danger text-center">*</span></label>
                        <input type="text" class="form-control" id="ifscCode" name="ifscCode" value="{{ old('ifscCode') }}" required>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="input-group">
                        <label class="input-group-text" for="BankAccount">Bank Account No<span class="text-danger text-center">*</span></label>
                        <input type="number" class="form-control" id="BankAccount" name="BankAccount" oninput="Validation(this,24,10)" value="{{ old('BankAccount') }}" required>
                    </div>
                </div>
                <div class="col-12">
                    <h5 class="sub-heading text-start fw-normal p-1 text-white bg-info text-uppercase">
                        Upload Documents
                    </h5>
                    <div class="row g-2">
                        <div class="col-md-3 col-lg-6 col-sm-6">
                            <div class="input-group">
                                <label for="Aadhar Front" class="input-group-text">
                                    Aadhar Front
                                </label>
                                <input type="file" id="uploadaadharfront" data-img="uploadaadharfront" class="form-control" accept="image/png, image/jpg, image/jpeg" required>
                                <button class="btn btn-success showImageBtn" type="button" id="showUploadaadharfrontImg" data-imgsrc="uploadaadharfront" data-docname="Aadhar Front">View</button>
                            </div>
                        </div>
                        <div class="col-md-3 col-lg-6 col-sm-6">
                            <div class="input-group">
                                <label for="Aadhar Back" class="input-group-text">
                                    Aadhar Back
                                </label>
                                <input type="file" data-img="uploadaadharback" id="uploadaadharback" class="form-control" accept="image/png, image/jpg, image/jpeg" required>
                                <button class="btn btn-success showImageBtn" type="button" id="showUploadAadharBackImg" data-imgsrc="uploadaadharback" data-docname="Aadhar Back">View</button>
                            </div>
                        </div>
                        <div class="col-md-3 col-lg-6 col-sm-6">
                            <div class="input-group">
                                <label for="Aadhar Back" class="input-group-text">
                                    Signature
                                </label>
                                <input type="file" id="candidatesign" data-img="candidatesign" class="form-control" accept="image/png, image/jpg, image/jpeg" required>
                                <button class="btn btn-success showImageBtn" type="button" id="showUploadEmployeeSignatureImg" data-imgsrc="candidatesign" data-docname="Signature">View</button>
                            </div>
                        </div>
                        <div class="col-md-3 col-lg-6 col-sm-6">
                            <div class="input-group">
                                <label for="Aadhar" class="input-group-text">
                                    Image
                                </label>
                                <input type="file" id="candidateImage" data-img="candidateImage" class="form-control" accept="image/png, image/jpg, image/jpeg" required>
                                <button class="btn btn-success showImageBtn" type="button" id="showUploadEmployeeImg" data-imgsrc="candidateImage" data-docname="Candidate Image">View</button>
                            </div>
                        </div>
                        <div class="col-md-3 col-lg-4 col-sm-6">
                            <div class="input-group">
                                <label for="experienceLatter" class="input-group-text">Experience Letter</label>
                                <input type="file" class="form-control" accept=".pdf" name="experienceLatter" id="experienceLatter" onchange="checkDocuments(this)">
                                <button class="btn btn-success" type="button" data-imgsrc="#experienceLatter" data-docname="Experiece latter" onclick="showPdfModal(this)">View</button>
                            </div>
                        </div>
                        <div class="col-md-3 col-lg-4 col-sm-6">
                            <div class="input-group">
                                <label for="bankDetailPdf" class="input-group-text">Bank Detail</label>
                                <input type="file" class="form-control" accept=".pdf" name="bankDetailPdf" id="bankDetailPdf" onchange="checkDocuments(this)">
                                <button class="btn btn-success" type="button" data-imgsrc="#bankDetailPdf" data-docname="Bank Detail" onclick="showPdfModal(this)">View</button>
                            </div>
                        </div>
                        <div class="col-md-3 col-lg-4 col-sm-6">
                            <div class="input-group">
                                <label for="otherDocumets" class="input-group-text">Other</label>
                                <input type="file" class="form-control" accept=".pdf" name="otherDocumets" id="otherDocumets" onchange="checkDocuments(this)">
                                <button class="btn btn-success" type="button" data-imgsrc="#otherDocumets" data-docname="Other Documents" onclick="showPdfModal(this)">View</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <h5 class="sub-heading text-start fw-normal p-1 text-white bg-info text-uppercase mt-2">Designation Details</h5>
                </div>
                <div class="col-lg-4 col-sm-12 col-md-6">
                    <div class="input-group">
                        <label for="designationTitel" class="input-group-text">Designation</label>
                        <input type="text" class="form-control" id="designation" name="Designation" value="{{old('Designation')}}" required>
                    </div>
                    @error('Designation')
                    <span class="ValidationText text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="col-lg-4 col-sm-12 col-md-4">
                    <div class="input-group">
                        <label for="currentDepartment" class="input-group-text">Department</label>
                        <input type="text" class="form-control" id="currentDepartment" name="currentDepartment" value="{{old('currentDepartment')}}" required>
                    </div>
                    @error('currentDepartment')
                    <span class="ValidationText text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="col-lg-4 col-sm-12 col-md-4">
                    <div class="input-group">
                        <label for="salaryPerMonth" class="input-group-text">Salary(per month)</label>
                        <input type="number" min="1" class="form-control" id="salaryPerMonth" name="salaryPerMonth" value="{{old('salaryPerMonth')}}" required>
                    </div>
                    @error('salaryPerMonth')
                    <span class="ValidationText text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="col-12">
                    <h5 class="sub-heading text-start fw-normal p-1 text-white bg-info text-uppercase">
                        Disclaimer
                    </h5>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="checked" id="EmpTermAccept" checked>
                        <label class="form-check-label text-lowercase text-capitalize" for="flexCheckDefault" style="font-size:0.8rem">
                            I DECLARE THAT THE INFORMATION GIVEN ABOVE IS TRUE TO THE BEST OF MY KNOWLEDGE. I AGREE THAT IF ANY INFORMATION FURNISHED ABOVE FOUND INCORRECT MY ADMISSION IS LIABLE TO BE CANCELLED. I HAVE READ AND ACCEPTED ALL TERMS & CONDITIONS.
                        </label>
                    </div>
                </div>
                <div class="col-12">
                    <div class="d-grid">
                        <button class="btn btn-sm btn-dark d-block p-0" type="button" id="rulesShow" data-bs-toggle="tooltip" title="Terms and Conditions"><i class="fa-solid fa-angle-down fa-xs" style="color:orange"></i></button>
                    </div>
                    <div id="rules" class="bg-white rounded container" style="display:none;">
                        <div id="pdf-container" class="d-flex flex-column justify-content-center align-items-center" style="width:100%"></div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="d-flex justify-content-center align-items-center mt-2">
                        <button class="btn btn-warning btn-sm" id="EmployeeRegisterBtn" type="submit">Register Employee</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- add experience template -->
<div id="experienceTemplate" class="input-group d-none">
    <div class="col-lg-6 col-md-6 col-sm-12">
        <div class="input-group">
            <label class="input-group-text" for="firstCompanyName">Company Name</label>
            <input type="text" name="companyName[]" class="form-control" id="firstCompanyName" value="" oninput="ValidationTextFiled(this)">
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-12">
        <div class="input-group">
            <label class="input-group-text" for="firstCompanyMobile">Contact No</label>
            <input type="number" name="companyMobileNo[]" class="form-control" id="firstCompanyMobile" value="" oninput="Validation(this,10)">
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-12">
        <div class="input-group">
            <label class="input-group-text" for="userDesignation">Designation</label>
            <input type="text" name="designation[]" class="form-control" id="userDesignation" value="">
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-12">
        <div class="input-group">
            <label class="input-group-text" for="startDate">Start Date</label>
            <input type="date" name="startDate[]" class="form-control start-date dateRequired" id="startDate" value="">
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-12">
        <div class="input-group">
            <label class="input-group-text" for="endDate">End Date</label>
            <input type="date" name="endDate[]" class="form-control end-date dateRequired" id="endDate" value="">
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-12">
        <div class="d-flex justify-content-end align-items-center">
            <button class="removeContainer btn" type="button" data-bs-toggle="tooltip" title="Remove Experice"><i class="fa-solid fa-trash-can fa-lg" style="color: #e91b0c;"></i></button>
        </div>
    </div>
</div>

<div class="modal fade" id="documentsImgShowModal" tabindex="-1" aria-labelledby="documentsImgShowModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="documentsImgShowModalLabel"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="d-flex justify-content-center align-items-center">
                    <img id="documentsImgShow" class="img-fluid" style="display:none">
                </div>
                <embed id="pdfViewer" type="application/pdf" width="100%" height="600px" style="display: none;" />
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="candidateReview" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Employes Reviews</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="card border-0 p-0" style="width: 100%;">
                    <div class="card-body shadow">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-6">
                                <p class="text-show">Name:</p>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6">
                                <p class="TextValueShow text-show" id="NameShow"></p>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6">
                                <p class="text-show">Mobile: </p>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6">
                                <p class="TextValueShow text-show" id="MobileShow"></p>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6">
                                <p class="text-show text-lowercase">Email:</p>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6">
                                <p class="TextValueShow text-show" id="EmailShow"></p>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6">
                                <p class="text-show">Aadhaar:</p>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6">
                                <p class="text-show TextValueShow" id="AadhareShow"></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="Ratingdata"></div>
            </div>
        </div>
        <div class="modal-footer"></div>
    </div>
</div>

<!-- croper modal -->
<div class="modal fade" id="ImgCropModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="ImgCropModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Image Croper</h5>
            </div>
            <div class="modal-body">
                <button id="modalLoader" class="btn border-0 m-auto" type="button" disabled style="display:block">
                    <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                    <span class="">Loading...</span>
                </button>
                <div class="container w-100 object-fit-contain" style="max-height:500px">
                    <div class="result w-100" style="max-height:400px"></div>
                </div>
            </div>
            <div class="container modal-footer options hide">
                <input type="hidden" class="img-w" value="150" min="100" max="200" readonly />
                <button type="button" class="btn btn-sm btn-warning save hide">Save</button>
            </div>
        </div>
    </div>
</div>

<!-- Image Preview Modal -->
<div class="modal fade" id="imagePreviewModal" tabindex="-1" aria-labelledby="imagePreviewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="imagePreviewModalLabel">Image Preview</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <img id="imagePreview" src="" class="w-100" alt="Preview">
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const url = "{{$filePath}}";
        if(!url){
            return;
        }
        const loadingTask = pdfjsLib.getDocument(url);

        loadingTask.promise.then(function(pdf) {
            const container = document.getElementById("pdf-container");
            const totalPages = pdf.numPages;

            function renderPage(pageNumber) {
                pdf.getPage(pageNumber).then(function(page) {
                    const scale = 1.5;
                    const viewport = page.getViewport({
                        scale
                    });

                    const canvas = document.createElement("canvas");
                    const context = canvas.getContext("2d");
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;

                    const renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };

                    page.render(renderContext).promise.then(function() {
                        container.appendChild(canvas);
                        canvas.classList.add("pdf-page");

                        if (pageNumber < totalPages) {
                            renderPage(pageNumber + 1);
                        } else {
                            adjustContainerHeight();
                        }
                    });
                });
            }

            renderPage(1);
        });

        function adjustContainerHeight() {
            const pdfPages = document.getElementsByClassName("pdf-page");
            let totalHeight = 0;

            for (let i = 0; i < pdfPages.length; i++) {
                totalHeight += pdfPages[i].offsetHeight;
            }

            document.getElementById("pdf-container").style.height = totalHeight + "%";
        }
    });
</script>
<script>
    function showImgErrorModal(error) {
        Swal.fire({
            icon: 'error',
            text: error,
            timer: 3000,
            showConfirmButton: false,
            timerProgressBar: true
        });
    }

    function showImgModal(btn) {
        const imgShowModal = $("#documentsImgShowModal");
        const documentsImgShowModalLabel = $("#documentsImgShowModalLabel");
        let docName = $(btn).data('docname');
        let docUrl = $(btn).data('imgsrc');
        let documentsImgShow = $("#documentsImgShow");
        documentsImgShow.show();
        let cropImgData = $(docUrl).val();
        if (cropImgData === '') {
            showImgErrorModal(`${docName} is not uploaded yet.`);
            return; // No need for the extra return here
        }
        imgShowModal.on('show.bs.modal', function() {
            documentsImgShowModalLabel.text(docName);
            documentsImgShow.attr('src', cropImgData);
        }).modal('show');
    }

    // Function to display the PDF in the modal
    function showPdfModal(btn) {
        const imgShowModal = $("#documentsImgShowModal");
        const documentsImgShowModalLabel = $("#documentsImgShowModalLabel");
        let docName = $(btn).data('docname');
        let docUrl = $(btn).data('imgsrc');
        const fileInput = $(docUrl);
        documentsImgShowModalLabel.text(docName);
        if (fileInput[0].files.length > 0) {
            // Get the selected file
            const file = fileInput[0].files[0];
            if (file.type === 'application/pdf') {
                const reader = new FileReader();

                reader.onload = function(e) {
                    // Set the PDF source to the modal
                    const pdfViewer = $('#pdfViewer');
                    pdfViewer.show();
                    pdfViewer.attr('src', e.target.result);

                    // Show the modal
                    imgShowModal.modal('show');
                };

                // Read the selected file as Data URL
                reader.readAsDataURL(file);
            } else {
                fileInput.val('');
                showImgErrorModal('Please select a PDF file');
            }
        } else {
            showImgErrorModal(`${docName} is not uploaded yet.`);
        }
    }

    function checkDocuments(fileInput) {
        if (fileInput && fileInput.files && fileInput.files.length > 0) {
            const file = fileInput.files[0];
            if (file.type != 'application/pdf') {
                fileInput.value = ''; // Clear the file input
                showImgErrorModal('File type must be .PDF');
            }
        } else {
            showImgErrorModal('No document uploaded');
        }
    }

    $(document).ready(function() {

        $("#documentsImgShowModal").on('hidden.bs.modal', function() {
            $("#pdfViewer").hide();
            $("#documentsImgShow").hide();
        });

        $("#rulesShow").click(() => {
            $("#rules").toggle();
        });

        $("#maritalStatus").on("change", function() {
            let maritalStatus = $("#maritalStatus").val();
            let changeLabel = $("#setFatherSpouseName");
            if (maritalStatus === "Married") {
                changeLabel.text("Spouse Name");
            } else {
                changeLabel.text("Father Name");
            }
        });

        $(document).on('change', '.start-date', function() {
            var startDate = $(this).val();
            var startDateId = $(this).attr('id');
            var num = parseInt(startDateId.split('-')[1]);
            var endDateInput = $('#endDate-' + num);
            endDateInput.attr('min', startDate);
        });
    });

    function Validation(input, maxlength ,minlength=0) {
        var inputVal = input.value.replace(/[^0-9]/g, "");
        $(input).val(inputVal);
        if(minlength > 0 && inputVal.length > minlength){
            input.value = inputVal.substring(0, maxlength);
            $(input).addClass('is-valid').removeClass('is-invalid');
        }else if (inputVal.length > maxlength) {
            input.value = inputVal.substring(0, maxlength);
        }else if($(input).val().length === maxlength){
            $(input).addClass('is-valid').removeClass('is-invalid');
        }else{
            $(input).addClass('is-invalid').removeClass('is-valid');
        }
    }

    function ValidationTextFiled(input) {

        var inputValue = input.value;
        var cleanedValue = inputValue.replace(/[^A-Za-z\s]/g, '');
        cleanedValue = cleanedValue.replace(/\s{2,}/g, ' ');
        input.value = cleanedValue;
        if(!$(input).val()){
            $(input).addClass('is-invalid').removeClass('is-valid');
        }else{
            $(input).removeClass('is-invalid').addClass('is-valid');
        }
    }

    function toggleHiddenInput(input, hiddenInput) {
        if ($(input).is(':checked') && $(input).val() === "Yes") {
            $(hiddenInput).show();
            $(hiddenInput).attr('required', true);
        } else {
            $(hiddenInput).hide();
            $(hiddenInput).removeAttr('required');
        }
    }

    function CheckReview(value) {
        // check user have permission to get the review 
        if (!checkPermission('verification.employe verification')) {
            return;
        }
        if (!value) {
            return;
        }
        $.ajax({
            url: "{{route('condidate.reviews')}}",
            method: "get",
            data: {
                "aadharValue": value,
            },
            success: function(response) {
                // Open the modal after successful AJAX request
                showReviewModal(response.personalInfo);
                showRatingData(response.reviewInfo);
                $(".ReviewCheck").removeClass("d-none");
            },
            error: function(response) {
                $(".ReviewCheck").addClass("d-none");
            }
        });
    }

    function showReviewModal(data) {
        $("#NameShow").text(data.name);
        $("#MobileShow").text(data.mobile);
        $("#EmailShow").text(data.email);
        $("#AadhareShow").text(data.aadhaar);
        $("#PaymentTerms").html(getStarRating(data.payment_terms));
        $("#TenantBehavior").html(getStarRating(data.tenant_behavior));
        $("#Responsibilities").html(getStarRating(data.responsibilities));
        if (data.additional !== null) {
            $("#AdditionalComment").text(data.additional);
        }
        $('#CandidateReview').modal('show');
    }

    function showRatingData(data) {
        var ratingDataDiv = $('.Ratingdata');
        ratingDataDiv.empty();
        $.each(data, function(index, review) {
            var cardHtml = `
         <div class="card border-0 mt-1 p-0" style="width: 100%;">
            <div class="card-body shadow-sm">
               <div class="row">
                  <h1 class="text-center">${review.hostelname}</h1>
                  <div class="col-lg-12 col-md-12 col-sm-12">
                     <p class="text-show">Payment Terms: <span class="RatingValueShow">${getStarRating(review.payment_terms)}</span></p>
                     <p class="text-show">Tenant Behavior: <span class="RatingValueShow">${getStarRating(review.tenant_behavior)}</span> </p>
                     <p class="text-show">Responsibilities: <span class="RatingValueShow">${getStarRating(review.responsibilities)}</span> </p>
                  </div>
                  <div class="col-lg-12 col-md-12 col-sm-12">
                     <p class="text-show">${review.additional}</p>
                  </div>
               </div>
            </div>
         </div>`;
            ratingDataDiv.append(cardHtml);
        });
    }

    function getStarRating(rating) {
        var stars = '';
        for (var i = 1; i <= 5; i++) {
            if (i <= rating) {
                stars += '<span class="golden-star">&#9733;</span>';
            } else {
                stars += '<span class="empty-star">&#9734;</span>';
            }
        }
        return stars;
    }
</script>
<script>
    $(document).ready(function() {
        const userCurrentPin = $("#userCurrentPin");
        const currentAddressInputs = $(".currentAddressInputs");
        const currentCountry = $("#currentCountry");
        const currentState = $("#currentState");
        const currentDistrict = $("#currentDistrict");
        const currentCountryList = $("#currentCountryList");
        const currentStateList = $("#currentStateList");
        const currentDistrictList = $("#currentDistrictList");
        const currentAddress = $("#userCurrentHno");

        const userPermanentPin = $("#userPermanentPin");
        const parmanetAddressInputs = $(".parmanetAddressInputs");
        const permanentCountry = $("#permanentCountry");
        const parmanentState = $("#parmanentState");
        const permanentDistrict = $("#permanentDistrict");
        const permanentCountryList = $("#permanentCountryList");
        const parmanentStateList = $("#parmanentStateList");
        const permanentDistrictList = $("#permanentDistrictList");
        const addreshCheckBox = $("#addreshCheck");
        const permanantAddress = $("#userPermanentHno");
        const showImageBtn = $(".showImageBtn");
        let croppedImages = {};
        let uploadedImages = {};
        let wantToUploadAddressDetail = false;

        var today = new Date().toISOString().split('T')[0];
        $('.dateRequired').attr('max', today);

        function enforceNumberInput(element, maxLength = 0) {
            let value = $(element).val();

            // Check for numberRequired class (only numbers allowed)
            if ($(element).hasClass('numberRequired')) {
                value = value.replace(/[^0-9]/g, ''); // Allow only numbers
            }

            // Check for characterRequired class (only A-Z, a-z, and spaces allowed)
            if ($(element).hasClass('characterRequired')) {
                value = value.replace(/[^A-Za-z\s]/g, ''); // Allow only letters and spaces
                value = value.replace(/\s{2,}/g, ' '); // Replace multiple spaces with a single space
            }

            // Enforce max length
            if (maxLength > 0 && value.length > maxLength) {
                value = value.slice(0, maxLength);
            }

            $(element).val(value);
        }

        function handleInputValidationWithDebounce(selector, maxLength, errorMessage, delay = 300) {
            $(selector).on('input', function() {
                // Call enforceNumberInput before debouncing
                enforceNumberInput(selector, maxLength);

                // Apply debouncing logic
                debounce(function() {
                    const inputField = $(this);
                    // Find or create the invalid-feedback div
                    let feedbackDiv = inputField.closest('.input-group').next('.invalid-feedback');
                    if (feedbackDiv.length === 0) {
                        feedbackDiv = $('<span class="invalid-feedback" style="font-size:0.6rem"></span>').insertAfter(inputField.closest('.input-group'));
                    }

                    // Validate input length
                    const inputLength = inputField.val().length;

                    if (inputLength === 0) {
                        inputField.removeClass('is-invalid is-valid'); // Remove invalid state
                        feedbackDiv.hide(); // Hide error message
                    } else if (maxLength !== 0 && inputLength !== maxLength) {
                        inputField.addClass('is-invalid'); // Mark input as invalid
                        feedbackDiv.text(errorMessage); // Set custom error message
                        feedbackDiv.show(); // Show error message
                    } else {
                        inputField.removeClass('is-invalid').addClass('is-valid'); // Mark input as valid
                        feedbackDiv.hide(); // Hide error message
                    }
                }.bind(this), delay)(); // Immediately invoke the debounced function
            });
        }

        function messageShow(title, message) {
            Swal.fire({
                icon: title,
                text: message,
                timer: 2000,
                timerProgressBar: true,
                showConfirmButton: false,
            });
        }

        function debounce(fn, delay) {
            let timer;
            return function(...args) {
                clearTimeout(timer);
                timer = setTimeout(() => {
                    fn.apply(this, args);
                }, delay);
            };
        }

        function errorHandler(error) {
            let errorMessage = '';

            // Check for network error (if no response available)
            if (error.status === 0) {
                errorMessage = 'Network error: Please check your internet connection.';
            } else {
                // Check if the error has a response and status code
                const status = error.status || null;
                const response = error.responseJSON || {};
                const statusText = response.message || error.statusText || 'Unknown error';

                // Handle client-side and server-side errors
                if (status >= 400 && status < 500) {
                    errorMessage = `Client error ${status}: ${statusText}`;
                } else if (status >= 500) {
                    errorMessage = `Server error ${status}: ${statusText}`;
                } else {
                    errorMessage = `Unexpected error: ${statusText}`;
                }
            }
            // Display the error message
            messageShow('error', errorMessage);
        }

        function fetchData(url, data = null) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    type: "get",
                    dataType: "json",
                    url: url,
                    data: data,
                    success: function(response) {
                        resolve(response);
                    },
                    error: function(xhr, status, error) {
                        reject(error);
                    }
                });
            });
        }

        function storData(url, data = null) {
            return new Promise((resolve, reject) => {
                // Detect if the data is FormData
                let isFormData = data instanceof FormData;
                activeModel();
                $.ajax({
                    type: "post",
                    url: url,
                    data: data,
                    processData: !isFormData, // Automatically handle for non-FormData
                    contentType: isFormData ? false : 'application/x-www-form-urlencoded; charset=UTF-8',
                    dataType: "json",
                    success: function(response) {
                        hideLoaderModal();
                        resolve(response);
                    },
                    error: function(error) {
                        hideLoaderModal();
                        reject(error);
                    }
                });
            });
        }

        function deleteData(url, data = null) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    type: "delete",
                    url: url,
                    data: data,
                    success: function(response) {
                        resolve(response);
                    },
                    error: function(xhr, status, error) {
                        reject(error);
                    }
                });

            })
        }

        function initializeCropper(inputId, inputName, event) {
            const result = $('.result');
            const save = $('.save');
            const Cropermodal = $('#ImgCropModal');
            const modalLoader = $('#modalLoader');

            let cropper;

            modalLoader.show();
            result.hide();
            save.attr('disabled', true);

            if (event.target.files.length) {
                const file = event.target.files[0];
                const reader = new FileReader();

                reader.onload = function(e) {
                    Cropermodal.modal("show");
                    setTimeout(function() {
                        if (e.target.result) {
                            const img = new Image();
                            img.id = 'cropperImgShow';
                            img.src = e.target.result;

                            img.onload = function() {
                                result.empty();
                                result.append(img);

                                save.removeClass('hide');
                                if (cropper) {
                                    cropper.destroy();
                                    cropper = null;
                                }
                                if (inputName === "uploadaadharfront" || inputName === "uploadaadharback") {
                                    cropper = new Cropper(img, {
                                        aspectRatio: 4.5 / 3.5,
                                        viewMode: 1,
                                        dragMode: 'move',
                                        autoCropArea: 1,
                                        cropBoxResizable: false,
                                    });
                                } else if (inputName == "candidatesign") {
                                    cropper = new Cropper(img, {
                                        aspectRatio: 4 / 1,
                                        viewMode: 1,
                                        dragMode: 'move',
                                        autoCropArea: 1,
                                        cropBoxResizable: false,
                                    });
                                } else {
                                    cropper = new Cropper(img, {
                                        aspectRatio: 1,
                                        viewMode: 1,
                                        dragMode: 'move',
                                        autoCropArea: 1,
                                        cropBoxResizable: false,
                                    });
                                }
                                // Hide loader and show the result container
                                modalLoader.hide();
                                result.show();
                                save.attr('disabled', false);

                            };
                        }
                    }, 2000);
                };
                reader.readAsDataURL(file);
            }

            // Unbind any previous click events to prevent multiple bindings
            save.off('click');

            // Save button event
            let isDeletingImage = false;

            save.on('click', function(e) {
                e.preventDefault();
                handleSave(e);
            });

            function handleSave(e) {
                e.preventDefault();
                $('#ImgCropModal').modal('hide');
                // Get the cropped image as a Blob
                cropper.getCroppedCanvas().toBlob(function(blob) {
                    resizeImage(blob, inputId, cropper, function(file) {
                        // Assign the final file (resized or not) to croppedImages
                        croppedImages[inputName] = file;
                        // Check if this input already has an uploaded image
                        if (uploadedImages[inputName] && !isDeletingImage) {
                            isDeletingImage = true; // Set the flag to true to prevent duplicate calls

                            // Delete the previous image before uploading a new one
                            deletePreviousImage(uploadedImages[inputName], function() {
                                delete uploadedImages[inputName]; // Remove the previous image entry
                                uploadImage(inputName, file, inputId);
                                isDeletingImage = false; // Reset the flag after the process is complete
                            });
                        } else if (!isDeletingImage) {
                            // No previous image, directly upload the new image
                            uploadImage(inputName, file, inputId);

                        }
                    });
                }, 'image/jpeg', 0.8); // Adjust quality here (0.8 is 80% quality)
            }
        }

        function resizeImage(blob, inputId, cropper, callback) {
            let quality = 1; // Default quality
            const maxSizeInMB = 1; // Target size in MB (1MB)
            const sizeInMB = blob.size / (1024 * 1024); // Convert size to MB

            // Adjust quality based on file size
            if (sizeInMB > 10) {
                quality = 0.1; // 10% quality for images larger than 10MB
            } else if (sizeInMB > 5) {
                quality = 0.3; // 30% quality for images larger than 5MB
            } else if (sizeInMB > 2) {
                quality = 0.4; // 40% quality for images larger than 2MB
            } else {
                quality = 0.5; // Default to 50% quality
            }

            const canvas = cropper.getCroppedCanvas();

            // Function to resize dimensions if needed
            function resizeDimensions() {
                const ratio = Math.sqrt(maxSizeInMB / sizeInMB); // Calculate resize ratio
                const newWidth = canvas.width * ratio;
                const newHeight = canvas.height * ratio;
                const resizedCanvas = document.createElement('canvas');
                resizedCanvas.width = newWidth;
                resizedCanvas.height = newHeight;
                const ctx = resizedCanvas.getContext('2d');
                ctx.drawImage(canvas, 0, 0, newWidth, newHeight);
                return resizedCanvas;
            }

            // Resize and compress the image to ensure it's below 1MB
            function compressAndResizeImage(currentCanvas, currentQuality) {
                currentCanvas.toBlob(function(resizedBlob) {
                    const newSizeInMB = resizedBlob.size / (1024 * 1024); // Size after compression
                    // If the compressed image is still larger than 1MB, resize the dimensions further
                    if (newSizeInMB > maxSizeInMB) {
                        const resizedCanvas = resizeDimensions(); // Resize dimensions
                        compressAndResizeImage(resizedCanvas, currentQuality * 0.8); // Further reduce quality if needed
                    } else {
                        const resizedFile = new File([resizedBlob], `${inputId}.jpg`, {
                            type: 'image/jpeg'
                        });
                        callback(resizedFile); // Return the resized and compressed image
                    }
                }, 'image/jpeg', currentQuality);
            }

            // Start the resizing and compression process
            compressAndResizeImage(canvas, quality);
        }
        // AJAX Function to Upload the Image
        async function uploadImage(inputName, file, inputId) {
            const formData = new FormData();
            formData.append('image', file);
            formData.append('_token', "{{ csrf_token() }}");
            try {
                const url = "{{ route('upload.image') }}";
                const response = await storData(url, formData);
                uploadedImages[inputName] = response.fileName;
                $(inputId).addClass('is-valid').removeClass('is-invalid');
            } catch (error) {
                $(inputId).removeClass('is-valid').addClass('is-invalid');
                errorHandler(error);
            }
        }

        // AJAX Function to Delete the Previous Image
        async function deletePreviousImage(imagePath, callback) {
            try {
                const url = "{{ route('delete.image') }}";
                const data = {
                    imageName: imagePath,
                    _token: "{{ csrf_token() }}"
                };
                const response = await deleteData(url, data);
                if (response.status) {
                    callback(); // Ensure callback is executed only once
                }
            } catch (error) {
                errorHandler(error);
            }
        }

        $('#candidateImage').on('change', function(e) {
            initializeCropper('#candidateImage', 'candidateImage', e);
        });

        $('#candidatesign').on('change', function(e) {
            initializeCropper('#candidatesign', 'candidatesign', e);
        });

        $('#uploadaadharfront').on('change', function(e) {
            initializeCropper('#uploadaadharfront', 'uploadaadharfront', e);
        });

        $('#uploadaadharback').on('change', function(e) {
            initializeCropper('#uploadaadharback', 'uploadaadharback', e);
        });
        userCurrentPin.on('input', async function() {
            handleInputValidationWithDebounce(userCurrentPin, 6, 'Invalid Pincode');
            const pincode = $(this).val();
            currentAddressInputs.fadeOut(300);
            currentDistrict.val("");
            currentState.val("");
            currentCountry.val("");
            if (pincode.length === 6 && !isNaN(pincode)) {
                currentAddressInputs.fadeIn(300);
                try {
                    const url = "{{route('address.detail.by.pincode')}}";
                    const data = {
                        pincode: pincode
                    };
                    const response = await fetchData(url, data);
                    const responseData = response.data;
                    if (response.status) {
                        currentAddressInputs.fadeIn(300);
                        currentDistrict.val(responseData.district);
                        currentState.val(responseData.state);
                        currentCountry.val(responseData.country);
                        currentCountry.attr('readonly', true);
                        currentState.attr('readonly', true);
                    } else {
                        // $(this).removeClass('is-valid').addClass('is-invalid');
                        currentCountry.removeAttr('readonly');
                        currentState.removeAttr('readonly');
                        wantToUploadAddressDetail = true;
                        currentCountryList.empty();
                        responseData.uniqueCountries.forEach(function(country) {
                            currentCountryList.append(`<option value="${country}"></option>`);
                        });
                    }
                } catch (error) {
                    errorHandler(error);
                }
            }
        });

        currentCountry.on('input', debounce(async function() {
            const countryName = $(this).val().trim();
            if (!countryName) return; // Avoid empty requests

            const url = "{{route('address.details.data.list')}}";
            const data = {
                countryName: countryName
            };

            try {
                const statesResponse = await fetchData(url, data);
                const statesData = statesResponse.data.uniqueStates;
                currentStateList.empty();
                statesData.forEach(function(state) {
                    currentStateList.append(`<option value='${state}'></option>`);
                });
            } catch (error) {
                console.error(error);
            }
        }, 300));

        currentState.on('input', debounce(async function() {
            const countryName = currentCountry.val().trim();
            const stateName = $(this).val().trim();
            if (!countryName || !stateName) return; // Avoid empty requests

            const url = "{{route('address.details.data.list')}}";
            const data = {
                countryName: countryName,
                stateName: stateName
            };

            try {
                const districtsResponse = await fetchData(url, data);
                const districtsData = districtsResponse.data.uniqueDistricts;
                currentDistrictList.empty();
                districtsData.forEach(function(district) {
                    currentDistrictList.append(`<option value='${district}'></option>`);
                });
            } catch (error) {
                console.error(error);
            }
        }, 300));

        currentDistrict.focusout(debounce(async function() {
            const country = currentCountry.val();
            const state = currentState.val();
            const district = $(this).val();
            const pincode = userCurrentPin.val();
            if (!wantToUploadAddressDetail || !country || !state || !district || district.length < 4 || !pincode || pincode.length !== 6) return;
            try {
                const url = "{{route('store.address.details')}}";
                const data = {
                    country: country,
                    state: state,
                    district: district,
                    pincode: pincode
                }
                const storeResponse = storData(url, data);
                wantToUploadAddressDetail = false;

            } catch (error) {
                console.error(error);
            }
        }, 200))

        userPermanentPin.on('input', async function() {
            handleInputValidationWithDebounce(userPermanentPin, 6, 'Invalid Pincode');
            const pincode = $(this).val();
            parmanetAddressInputs.fadeOut(300);
            permanentDistrict.val("");
            parmanentState.val("");
            permanentCountry.val("");
            if (pincode.length === 6 && !isNaN(pincode)) {
                parmanetAddressInputs.fadeIn(300);
                try {
                    const url = "{{route('address.detail.by.pincode')}}";
                    const data = {
                        pincode: pincode
                    };
                    const response = await fetchData(url, data);
                    const responseData = response.data;
                    if (response.status) {
                        parmanetAddressInputs.fadeIn(300);
                        permanentDistrict.val(responseData.district);
                        parmanentState.val(responseData.state);
                        permanentCountry.val(responseData.country);
                        permanentCountry.attr('readonly', true);
                        parmanentState.attr('readonly', true);
                    } else {
                        // $(this).removeClass('is-valid').addClass('is-invalid');
                        permanentCountry.removeAttr('readonly');
                        parmanentState.removeAttr('readonly');
                        wantToUploadAddressDetail = true;
                        permanentCountryList.empty();
                        responseData.uniqueCountries.forEach(function(country) {
                            permanentCountryList.append(`<option value="${country}"></option>`);
                        });
                    }
                } catch (error) {
                    errorHandler(error);
                }
            }
        });

        permanentCountry.on('input', debounce(async function() {
            const countryName = $(this).val().trim();
            if (!countryName) return; // Avoid empty requests

            const url = "{{route('address.details.data.list')}}";
            const data = {
                countryName: countryName
            };

            try {
                const statesResponse = await fetchData(url, data);
                const statesData = statesResponse.data.uniqueStates;
                parmanentStateList.empty();
                statesData.forEach(function(state) {
                    parmanentStateList.append(`<option value='${state}'></option>`);
                });
            } catch (error) {
                console.error(error);
            }
        }, 300));

        parmanentState.on('input', debounce(async function() {
            const countryName = permanentCountry.val().trim();
            const stateName = $(this).val().trim();
            if (!countryName || !stateName) return; // Avoid empty requests

            const url = "{{route('address.details.data.list')}}";
            const data = {
                countryName: countryName,
                stateName: stateName
            };

            try {
                const districtsResponse = await fetchData(url, data);
                const districtsData = districtsResponse.data.uniqueDistricts;
                permanentDistrictList.empty();
                districtsData.forEach(function(district) {
                    permanentDistrictList.append(`<option value='${district}'></option>`);
                });
            } catch (error) {
                console.error(error);
            }
        }, 300));

        permanentDistrict.focusout(debounce(async function() {
            const country = permanentCountry.val();
            const state = parmanentState.val();
            const district = $(this).val();
            const pincode = userPermanentPin.val();
            if (!wantToUploadAddressDetail || !country || !state || !district || district.length < 4 || !pincode || pincode.length !== 6) return;
            try {
                const url = "{{route('store.address.details')}}";
                const data = {
                    country: country,
                    state: state,
                    district: district,
                    pincode: pincode
                }
                const storeResponse = storData(url, data);
                wantToUploadAddressDetail = false;

            } catch (error) {
                console.error(error);
            }
        }, 200))

        addreshCheckBox.on('change', function() {
            if ($(this).is(':checked')) {
                parmanetAddressInputs.fadeIn(300);
                userPermanentPin.val(userCurrentPin.val());
                permanentCountry.val(currentCountry.val());
                parmanentState.val(currentState.val());
                permanentDistrict.val(currentDistrict.val());
                permanantAddress.val(currentAddress.val());
            }
        });

        showImageBtn.on('click', function() {
            const inputId = $(this).data('imgsrc'); // Get the input ID from the this's data attribute
            const docname = $(this).data('docname'); // Get the document name

            // Check if the cropped image exists
            if (croppedImages[inputId]) {
                const imgSrc = URL.createObjectURL(croppedImages[inputId]); // Get the blob URL

                // Set the image src in the preview modal
                $('#imagePreview').attr('src', imgSrc);

                // Open the image preview modal
                $('#imagePreviewModal').modal('show');
            } else {
                messageShow('error', "No image has been cropped yet. Please select and crop an image first.");
            }
        });

        $("#EmployeRegisterForm").on('submit', async function(e) {
            e.preventDefault();
            let isValid = true;
            // Validate the form fields
            $(this).find('input,select,textarea').each(function() {
                if ($(this).is(':required') && !$(this).val()) {
                    $(this).addClass('is-invalid');
                    isValid = false; // Form is invalid if any required field is empty
                } else {
                    $(this).removeClass('is-invalid');
                }
            });

            // If form is valid, proceed with submission
            if (isValid) {
                let formData = new FormData(this);
                for (let inputName in uploadedImages) {
                    if (uploadedImages.hasOwnProperty(inputName)) {
                        formData.append(inputName, uploadedImages[inputName]); // Append uploaded images
                    }
                }
                const url = $(this).attr('action');
                try {
                    const response = await storData(url, formData);
                    if (response.statusCode === 201) {
                        messageShow('success', response.message);
                        // reload the page
                        setTimeout(function() {
                            window.location.reload();
                        }, 2000)
                    } else {
                        throw new Error(`Unexpected status code: ${response.status}`);
                    }
                } catch (error) {
                    if (error.responseJSON && error.responseJSON.statusCode) {
                        switch (error.responseJSON.statusCode) {
                            case 422:
                                const errors = error.responseJSON.error; // Assuming errors are in response.data.error
                                $(this).find('.is-invalid-feedback').remove();
                                $(this).find('.is-invalid').removeClass('is-invalid');

                                for (const [field, messages] of Object.entries(errors)) {
                                    const input = $(this).find(`[name="${field}"]`);
                                    input.addClass('is-invalid');
                                    let errorContainer = $('<span class="invalid-feedback" style="font-size:0.6rem"></span>').insertAfter(input.closest('.input-group'));
                                    errorContainer.text(messages.join('<br>'));
                                    errorContainer.show();
                                }
                                break;
                            case 404:
                                messageShow('error', 'Resource not found. Please check the URL and try again.');
                                break;
                            case 500:
                                messageShow('error', 'Server error. Please try again later.');
                                break;
                            default:
                                messageShow('error', 'An unexpected error occurred. Please try again later.');
                        }
                    } else {
                        messageShow('error', 'An unexpected error occurred. Please try again later.');
                    }
                }
            }
        });
    });
</script>
<script>
    $(document).ready(function() {
        let experienceCount = 0;
        // Function to clone and append an experience input group
        function addExperienceInputGroup() {
            experienceCount++; // Increment the counter
            const newInputGroup = $('#experienceTemplate').clone(); // Clone the template
            newInputGroup.attr('id', `experience${experienceCount}`).addClass('row g-1'); // Update ID
            newInputGroup.find('.input-group-text').each(function() {
                const labelText = $(this).text();
                $(this).attr('for', `${$(this).attr('for')}-${experienceCount}`).text(`${labelText}`);
            });
            newInputGroup.find('.form-control').each(function() {
                const inputId = $(this).attr('id');
                $(this).attr('id', `${inputId}-${experienceCount}`)
            });
            newInputGroup.find('.form-control').val('');
            newInputGroup.find('.removeContainer').data('containerid', `experience${experienceCount}`)
            newInputGroup.find('.removeContainer').data('containerid', )
            $('#experienceContainer').append(newInputGroup.removeClass('d-none'));
        }

        // Event handler for adding experience when button is clicked
        $('#addExperience').on('click', function() {
            addExperienceInputGroup();
        });

        // Initial call to add one experience section on page load
        addExperienceInputGroup();
        // Delete click event handler, removes parent .row from DOM
        $(document).on('click', '.removeContainer', function() {
            const containerId = $(this).data('containerid')
            $(`#${containerId}`).remove();
        });

        function CheckReview(value) {
            $.ajax({
                url: "ReviewChack",
                method: "get",
                data: {
                    "aadharValue": value,
                },
                success: function(response) {
                    // Open the modal after successful AJAX request
                    showReviewModal(response.personalInfo);
                    showRatingData(response.reviewInfo);
                    $(".ReviewCheck").removeClass("d-none");
                },
                error: function(response) {
                    $(".ReviewCheck").addClass("d-none");
                }
            });
        }

        function showReviewModal(data) {
            $("#NameShow").text(data.name);
            $("#MobileShow").text(data.mobile);
            $("#EmailShow").text(data.email);
            $("#AadhareShow").text(data.aadhaar);
            $("#PaymentTerms").html(getStarRating(data.payment_terms));
            $("#TenantBehavior").html(getStarRating(data.tenant_behavior));
            $("#Responsibilities").html(getStarRating(data.responsibilities));
            if (data.additional !== null) {
                $("#AdditionalComment").text(data.additional);
            }
            $('#CandidateReview').modal('show');
        }

        function showRatingData(data) {
            var ratingDataDiv = $('.Ratingdata');
            ratingDataDiv.empty();
            $.each(data, function(index, review) {
                var cardHtml = `
         <div class="card border-0 mt-1 p-0" style="width: 100%;">
            <div class="card-body shadow-sm">
               <div class="row">
                  <h1 class="text-center">${review.hostelname}</h1>
                  <div class="col-lg-12 col-md-12 col-sm-12">
                     <p class="text-show">Payment Terms: <span class="RatingValueShow">${getStarRating(review.payment_terms)}</span></p>
                     <p class="text-show">Tenant Behavior: <span class="RatingValueShow">${getStarRating(review.tenant_behavior)}</span> </p>
                     <p class="text-show">Responsibilities: <span class="RatingValueShow">${getStarRating(review.responsibilities)}</span> </p>
                  </div>
                  <div class="col-lg-12 col-md-12 col-sm-12">
                     <p class="text-show">${review.additional}</p>
                  </div>
               </div>
            </div>
         </div>`;
                ratingDataDiv.append(cardHtml);
            });
        }

        function getStarRating(rating) {
            var stars = '';
            for (var i = 1; i <= 5; i++) {
                if (i <= rating) {
                    stars += '<span class="golden-star">&#9733;</span>';
                } else {
                    stars += '<span class="empty-star">&#9734;</span>';
                }
            }
            return stars;
        }
    });
</script>
@endsection