@extends('frontend.layouts.main')

@section('content')


<style>
    #output{
        display:none;
    }
</style>

<main class="" >
    <section class="lyt-section bs-user-profile">


          
        <div class="container" >
            <div class="row">
                <div class="col-md-12">
                    <div class="user-profile-wrapper">
                       <div class="title-section">
                            <h2 class="title">Complete Your Profile</h2>
                            <p class="para">And stand out to recruiters!!!</p>
                       </div>
                       <div class="steps">
                            <span class="line active" id="form1"></span>
                            <span class="line" id="form2"></span>
                            <span class="line" id="form3"></span>
                            <span class="line" id="form4"></span>
                            <span class="line" id="form5"></span>
                            <span class="line" id="form6"></span>

                       </div>


                    <!-- resume form -->

                       <form class="bs-form typ-user-profile" id="resume" enctype="multipart/form-data" > 
                            <h4 class="title">Resume</h4>
                            <div class="mod-upload typ-user-profile-upload">                                        
                                <div class="bg-line">
                                    <input accept=".pdf,.docx,.doc" onchange="getFileName(this)" class="custom-file-input" type="file" name="resume" id="uploaded-resume" />
                                    <div class="text-center upload-icon-area">  
                                        <h3 class="uplod-note">Resume is the most important document recruiters look for. Recruiters generally do not look at profiles without resumes.</h3>                                                                      
                                        <div class="upload-btn bs-btn btn mrgB20"><span class="icon icon-upload"></span> Upload Resume</div>                                        
                                        <div class="supported-file">
                                            <span class="">Supported Formats: doc, docx, pdf upto 10 MB</span>
                                        </div>
                                        <span class="text-danger" id="uploaded-resume-error"></span>
                                    </div>
                                </div>
                                <div class="supported-file">
                                           <h4>Uploaded File</h4>
                                           <span class="" id="file-name"></span>
                                        </div>
                            </div>
                            <div class="bs-footer-btn-section typ-user-profile">
                           <div class="footer-btn">
                            <!-- <a href="#" class="bs-btn typ-back">Back</a> -->
                            <button  class="bs-btn typ-next fnt18" type="button" onclick="handleResumeNext()" >Next</button>
                            </div>
                            </div>
                       </form>
                      
                       <!-- end resume form -->


                    



        
                       <form class="bs-form typ-user-profile typ-basic-info" id="basic-info"> 
                            <h4 class="title fnt18 mrgB18">Basic Information</h4>
                            <div class="d-flex form-section">
                            <div class="mod-upload typ-photo-upload">                                        
                                <div class="photo-wrapper">
                                    <input class="custom-file-input" onchange="renderProfilePhoto(event)" accept="image/*" type="file" name="photo" id="uploaded-photo" />
                                    <div class="upload-icon-area">
                                       <div  class="photo-icon"><span class="icon icon-photo"></span></div>
                                       <h5 class="text">Upload your photo</h5>
                                    </div>
                                </div>
                                <span class="text-danger" id="uploaded-photo-error"></span>
                            </div>
                            <img class="p-2" height="150" width="150" src="" id="output" alt="">                                          

                            </div>
                            <div class="row form-section">
                                <div class="col-md-6 mrgB24">
                                    <div class="form-content ">
                                        <label for="firstName" class="form-label">First Name*</label>
                                        <input type="text" name="firstName" class="form-control" id="firstName" value="{{$student->first_name}}" placeholder="Enter your first name">
                                      </div>
                                      <span class="text-danger" id="firstName-error"></span>

                                </div>
                                <div class="col-md-6 mrgB24">
                                    <div class="form-content ">
                                        <label for="lastName" class="form-label">Last Name*</label>
                                        <input type="text" name="lastName" class="form-control" id="lastName" value="{{$student->last_name}}" placeholder="Enter your last name">
                                      </div>
                                      <span class="text-danger" id="lastName-error"></span>

                                </div>
                                <div class="col-md-12 mrgB24">
                                    <div class="form-content ">
                                        <label for="about" class="form-label">About*</label>
                                        <textarea class="form-control" name="about" id="about" rows="5" placeholder="Write here">{{$student->description}}</textarea>
                                      </div>
                                      <span class="text-danger" id="about-error"></span>

                                </div>
                                <div class="col-md-6 col-lg-4 mrgB24">
                                    <div class="form-content ">
                                        <label for="email" class="form-label">Email*</label>
                                        <input type="email" disabled name="email" class="form-control" id="email" value="{{$student->email}}" aria-describedby="emailHelp">
                                    </div>
                                    <span class="text-danger" id="email-error"></span>

                                </div>                              
                                <div class="col-md-6 col-lg-4 mrgB24">
                                    <div class="form-content ">
                                        <label for="phone" class="form-label">Phone Number*</label>
                                        <input type="text" {{$student->user->phone_number ? 'disabled' : ''}}  name="phone" class="form-control" id="phone" value="{{$student->user->phone_number}}" aria-describedby="phoneHelp">
                                    </div>
                                    <span class="text-danger" id="phone-error"></span>

                                </div>                              
                                <div class="col-md-6 col-lg-4 mrgB24">
                                    <div class="form-content ">
                                    <label for="phone" class="form-label">Gender*</label>
                                    <select class="form-select" id="gender" name="gender" value="{{$student->gender}}">
                                            <option value="male" {{$student->gender=="male" ? 'selected' : ''}} >Male</option>
                                            <option value="female" {{$student->gender=="female" ? 'selected' : ''}}>Female</option>
                                            <option value="others" {{$student->gender=="others" ? 'selected' : ''}}>Other</option>
                                        </select>
                                    </div>
                                    <span class="text-danger" id="gender-error"></span>

                                </div>                              
                               
                                <div class="col-md-6 mrgB24">
                                  <div class="form-content ">
                                      <label for="DOB"  class="form-label">Date Of Birth*</label>
                                      <input type="date" name="dob" class="form-control" id="DOB" value="{{$student->dob}}" aria-describedby="DOBHelp" placeholder="Choose DOB">
                                  </div>
                                  <span class="text-danger" id="DOB-error"></span>

                              </div>
                              <div class="col-md-6 col-lg-4 mrgB24">
                                <div class="form-content ">
                                    <label for="country" class="form-label">Country*</label>
                                    <select name="country" class="form-control form-select" id="country" aria-describedby="countryHelp">
                                      <option value="">Select Country</option>
                                    
                                      @foreach ($countries as $country)
                                          <option value="{{ $country['code'] }}"  {{$student->country ===$country['code'] ? 'selected' : ''}} >{{ $country['name'] }}</option>
                                      @endforeach
                                     </select>
                                </div>
                                <span class="text-danger" id="country-error"></span>

                              </div>                             
                              <div class="col-md-6 col-lg-4 mrgB24">
                                <div class="form-content ">
                                    <label for="city" class="form-label">City*</label>
                                    <input type="city" name="city" class="form-control" id="city" value="{{$student->city}}" aria-describedby="cityHelp" placeholder="Enter city">
                                </div>
                                <span class="text-danger" id="city-error"></span>

                              </div>                             
                              <div class="col-md-6 col-lg-4 mrgB24">
                                <div class="form-content ">
                                    <label for="pincode" class="form-label">Pincode*</label>
                                    <input type="number" id="pincode" name="pincode" class="form-control" value="{{$student->home_town_pin}}" id="pincode" aria-describedby="pincodeHelp" placeholder="Enter pincode">
                                </div>
                                <span class="text-danger" id="pincode-error"></span>

                              </div>                             
                              <div class="col-md-6  mrgB24">
                                <div class="form-content ">
                                    <label for="permanentaddress" class="form-label">Permanent Address*</label>
                                    <input type="permanentaddress" id="permanentaddress" name="permanentaddress" class="form-control" value="{{$student->a_address}}" id="permanentaddress" aria-describedby="permanentaddressHelp" placeholder="Enter address">
                                </div>
                                <span class="text-danger" id="permanentaddress-error"></span>

                              </div>                             
                              <div class="col-md-6  mrgB24">
                                <div class="form-content ">
                                    <label for="town" class="form-label">Home Town*</label>
                                    <input type="town" name="town" class="form-control" value="{{$student->home_town}}" id="town" aria-describedby="townHelp" placeholder="Enter home town">
                                </div>
                                <span class="text-danger" id="town-error"></span>

                              </div>                                                           
                                                           
                                                  
                          <div class="col-md-12">
                            <div class="form-content ">
                                <label for="addlink" class="form-label">Add your linkedIn profile here</label>
                                <input type="addlink" class="form-control" name="linked_in_link" value="{{$student->linked_in_link}}" id="linked_in_link" aria-describedby="addlinkHelp" placeholder="Add link">
                            </div>
                            <span class="text-danger" id="linked_in_link-error"></span>

                          </div>   
                          
                          <!-- <div class="col-md-12">
                            <div class="form-content ">
                                <label for="addlink" class="form-label">Add your facebook profile here</label>
                                <input type="addlink" class="form-control" name="facebook_link" value="{{$student->facebook_link}}" id="facebook_link" aria-describedby="addlinkHelp" placeholder="Add link">
                            </div>
                            <span class="text-danger" id="facebook_link-error"></span>

                          </div>

                          <div class="col-md-12">
                            <div class="form-content ">
                                <label for="addlink" class="form-label">Add your twitter profile here</label>
                                <input type="addlink" class="form-control" name="twitter_link" value="{{$student->twitter_link}}" id="twitter_link" aria-describedby="addlinkHelp" placeholder="Add link">
                            </div>
                            <span class="text-danger" id="twitter_link-error"></span>

                          </div> -->
                               
                            </div>

                            <div class="bs-footer-btn-section typ-user-profile mt-4">
                            <div class="footer-btn">
                            <button class="bs-btn typ-back" type="button" onclick="handleBasicInfoPrevious()">Previous</button>
                            <button class="bs-btn typ-next" type="button" onclick="handleBasicInfoNext()" >Next</button>
                            </div>
                            </div>
                       </form>
                     
                    
  


 
        
                       <form class="bs-form typ-user-profile typ-basic-info" id="educational-details"> 
                            <h4 class="title fnt18 mrgB18">Educational Details</h4>
                                
                            @if(count($student->student_qualifications)>=1)
                            @foreach($student->student_qualifications as $student_qualification)
                            <div class="row form-section" >
                                <div class="col-md-6 col-lg-4 mrgB24">
                                    <div class="form-content ">
                                        <label for="qualification" class="form-label">Qualification*</label>
                                        <input type="text" value="{{$student_qualification->qualification}}" name="qualification[]" class="form-control" id="qualification" placeholder="Enter qualification">
                                        <span class="text-danger" id="qualification-error"></span>
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-4 mrgB24">
                                    <div class="form-content ">
                                    <label for="phone" class="form-label">Degree Type*</label>
                                    <select class="form-select" id="degree_type" name="degree_type[]" aria-label="Default select example">
                                            <option value="" selected>Select Degree type</option>
                                            <option value="full_time" {{ $student_qualification->degree_type == 'full_time' ? 'selected' : '' }} > Full Time</option>
                                            <option value="part_time" {{ $student_qualification->degree_type == 'part_time' ? 'selected' : '' }} >Part Time</option>
                                        </select>
                                    </div>
                                    <span class="text-danger" id="degree_type-error"></span>

                                </div>
                                <div class="col-md-6 col-lg-4 mrgB24">
                                    <div class="form-content ">
                                    <label for="phone" class="form-label">Degree*</label>
                                    <select class="form-select" id="degree" name="degree[]" aria-label="Default select example">
                                            <option value="" selected>Select Degree</option>
                                            @foreach($educations as $education)
                                            <option value="{{$education->id}}" {{ $student_qualification->education_id == $education->id ? 'selected' : '' }}>{{$education->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <span class="text-danger" id="degree-error"></span>

                                </div>
                                <div class="col-6 mrgB24">
                                    <div class="form-content ">
                                        <label for="start_date" class="form-label">Start*</label>
                                        <input type="date" value="{{$student_qualification->start_date}}" name="start_date[]" class="form-control" id="start_date" placeholder="Start Year">
                                      </div>
                                      <span class="text-danger" id="start_date-error"></span>

                                </div>
                                <div class="col-6 mrgB24">
                                    <div class="form-content ">
                                        <label for="end_date" class="form-label" style="visibility: hidden;">End*</label>
                                        <input type="date" value="{{$student_qualification->end_date}}" name="end_date[]" class="form-control" id="end_date" placeholder="completion year">
                                      </div>
                                      <span class="text-danger" id="end_date-error"></span>

                                </div>
                                <div class="col-md-6 col-lg-4 mrgB24">
                                    <div class="form-content ">
                                        <label for="percentage" class="form-label">Percentage/CGPA</label>
                                        <input type="text" value="{{$student_qualification->percentage}}" name="percentage[]" class="form-control" id="percentage" placeholder="Percentage/CGPA">
                                    </div>
                                    <span class="text-danger" id="percentage-error"></span>

                                </div>                              
                                <div class="col-md-6 col-lg-4 mrgB24">
                                    <div class="form-content ">
                                        <label for="college" class="form-label">College/University</label>
                                        <input type="text" value="{{$student_qualification->university}}" name="university[]" class="form-control" id="college" placeholder="College/University">
                                    </div>
                                    <span class="text-danger" id="college-error"></span>

                                </div>                              
                               
                              <div class="col-md-6 col-lg-4 mrgB24">
                                <div class="form-content ">
                                    <label for="location" class="form-label">Location*</label>
                                    <input type="text" value="{{$student_qualification->location}}" class="form-control" name="location[]" id="location" aria-describedby="locationHelp" placeholder="Enter Location">
                                </div>
                                <span class="text-danger" id="location-error"></span>

                              </div> 
                              <div class="col-md-12 mb-3 ">
                                <div class="form-content ">
                                    <label for="about" class="form-label">Description <span class="greyLight">(optional)</span></label>
                                    <textarea class="form-control"  name="description[]" id="about" rows="5" placeholder="Write here">{{$student_qualification->description}}</textarea>
                                  </div>
                               </div>
                            </div>
                            @endforeach

                            @else
                            <div class="row form-section" >
                                <div class="col-md-6 col-lg-4 mrgB24">
                                    <div class="form-content ">
                                        <label for="qualification" class="form-label">Qualification*</label>
                                        <input type="text" name="qualification[]" class="form-control" id="qualification" placeholder="Enter qualification">
                                      </div>
                                      <span class="text-danger" id="qualification-error"></span>

                                </div>
                                <div class="col-md-6 col-lg-4 mrgB24">
                                    <div class="form-content ">
                                    <label for="phone" class="form-label">Degree Type*</label>
                                    <select class="form-select" id="degree_type" name="degree_type[]" aria-label="Default select example">
                                            <option value="" selected>Select Degree type</option>
                                            <option value="full">Full Time</option>
                                            <option value="part">Part Time</option>
                                        </select>
                                    </div>
                                    <span class="text-danger" id="degree_type-error"></span>

                                </div>
                                <div class="col-md-6 col-lg-4 mrgB24">
                                    <div class="form-content ">
                                    <label for="phone" class="form-label">Degree*</label>
                                    <select class="form-select" id="degree" name="degree[]" aria-label="Default select example">
                                            <option value="" selected>Select Degree</option>
                                            @foreach($educations as $education)
                                            <option value="{{$education->id}}">{{$education->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <span class="text-danger" id="degree-error"></span>

                                </div>
                                <div class="col-6 mrgB24">
                                    <div class="form-content ">
                                        <label for="year" class="form-label">Start*</label>
                                        <input type="date" name="start_date[]" class="form-control" id="start_date" placeholder="Start Year">
                                      </div>
                                      <span class="text-danger" id="start_date-error"></span>

                                </div>
                                <div class="col-6 mrgB24">
                                    <div class="form-content ">
                                        <label for="end_date" class="form-label" style="visibility: hidden;">End*</label>
                                        <input type="date" name="end_date[]" class="form-control" id="end_date" placeholder="completion year">
                                      </div>
                                      <span class="text-danger" id="end_date-error"></span>

                                </div>
                                <div class="col-md-6 col-lg-4 mrgB24">
                                    <div class="form-content ">
                                        <label for="percentage" class="form-label">Percentage/CGPA*</label>
                                        <input type="text" name="percentage[]" class="form-control" id="percentage" placeholder="Percentage/CGPA">
                                    </div>
                                    <span class="text-danger" id="percentage-error"></span>

                                </div>                              
                                <div class="col-md-6 col-lg-4 mrgB24">
                                    <div class="form-content ">
                                        <label for="college" class="form-label">College/University*</label>
                                        <input type="text" name="university[]" class="form-control" id="college" placeholder="College/University">
                                    </div>
                                    <span class="text-danger" id="college-error"></span>

                                </div>                              
                               
                              <div class="col-md-6 col-lg-4 mrgB24">
                                <div class="form-content ">
                                    <label for="location" class="form-label">Location*</label>
                                    <input type="text" class="form-control" name="location[]" id="location" aria-describedby="locationHelp" placeholder="Enter Location">
                                </div>
                                <span class="text-danger" id="location-error"></span>

                              </div> 
                              <div class="col-md-12 mb-3">
                                <div class="form-content ">
                                    <label for="about" class="form-label">Description <span class="greyLight">(optional)</span></label>
                                    <textarea class="form-control" name="description[]" id="about" rows="5" placeholder="Write here"></textarea>
                                  </div>
                               </div>
                            </div>
                            @endif
                            
                              <div id="added" >


                              </div>                            
                              <div class="col-md-12 mrgB24 mt-4">
                                <button class="bs-btn btn typ-education" id="addEducation" type="button">Add Education</button>
                              </div>
                              
                            <div class="bs-footer-btn-section typ-user-profile">
                            <div class="footer-btn">
                            <button type="button" class="bs-btn typ-back" onclick="handleEducationDetailsPrevious()">Previous</button>
                            <button type="button" onclick="handleEducationDetailsNext()" class="bs-btn typ-next">Next</a>
                            </div>
                          </div>
                       </form>
                       
                    



 
                       <form class="bs-form typ-user-profile typ-basic-info" id="work-experience"> 
                            <h4 class="title fnt18 mrgB18">Work Experience</h4>
                            @if(count($student->student_experiences) >=1)
                            @foreach($student->student_experiences as $student_experience)
                            <div>
                            <div class="row form-section">
                                <div class="col-md-6 col-lg-4 mrgB24">
                                    <div class="form-content ">
                                        <label for="qualification" class="form-label">Is this your current employment?*</label>
                                        <div class="bs-custom-radio typ-V3">
                                        <div class="form-check ">
                                            <input class="form-check-input" type="radio" name="current_job[]" id="current_job_yes" value="yes" {{$student_experience->current_job ? 'checked' : ''}}>
                                            <label class="form-check-label" for="inlineRadio2">Yes</label>
                                        </div>
                                        <div class="form-check ">
                                            <input class="form-check-input" type="radio" name="current_job[]" id="current_job_no" value="no" {{(!$student_experience->current_job) ? 'checked' : ''}}>
                                            <label class="form-check-label" for="inlineRadio3">No</label>
                                        </div>
                                      </div>
                                     </div>
                                </div>
                                <div class="col-md-6 col-lg-4 mrgB24">
                                    <div class="form-content ">
                                        <label for="designation" class="form-label">Designation*</label>
                                        <select class="form-select" id="designition2" name="designition[]" aria-label="Default select example">
                                            <option value="" selected>Select Designation</option>
                                            @foreach($designitions as $designition)
                                            <option value="{{$designition->id}}" {{($student_experience->designition_id==$designition->id) ? 'selected' : ''}}>{{$designition->title}}</option>
                                            @endforeach
                                        </select>    
                                    </div>
                                    <span class="text-danger" id="designition2-error"></span>

                                </div>
                                <div class="col-md-6 col-lg-4 mrgB24">
                                    <div class="form-content ">
                                    <label for="phone" class="form-label">Employment Type*</label>
                                    <select class="form-select" id="employee_type2" name="employee_type[]" aria-label="Default select example">
                                            <option value="" selected>Select Employment</option>
                                            @foreach($employee_types as $employee_type)
                                            <option value="{{$employee_type->id}}" {{($student_experience->employee_type_id==$employee_type->id) ? 'selected' : ''}}>{{$employee_type->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <span class="text-danger" id="employee_type2-error"></span>

                                </div>
                                <div class="col-md-6 mrgB24">
                                    <div class="form-content ">
                                    <label for="phone" class="form-label">Department*</label>
                                    <select class="form-select" id="department2" name="department[]" aria-label="Default select example">
                                            <option value="" selected>Select Department</option>
                                            @foreach($departments as $department)
                                            <option value="{{$department->id}}" {{($student_experience->department_id==$department->id) ? 'selected' : ''}}>{{$department->department_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <span class="text-danger" id="department2-error"></span>

                                </div>
                                <div class="col-md-6 mrgB24">
                                    <div class="form-content ">
                                        <label for="name1" class="form-label">Company name*</label>
                                        <input type="text" class="form-control" value="{{$student_experience->organization}}" name="company_name[]" id="company_name2" placeholder="Company name">
                                      </div>
                                      <span class="text-danger" id="company_name2-error"></span>

                                </div>
                                <div class="col-6 mrgB24">
                                    <div class="form-content ">
                                        <label for="year" class="form-label">Duration*</label>
                                        <input type="date" class="form-control" value="{{$student_experience->start_date}}" name="start_date[]" id="year" placeholder="Start Year">
                                      </div>
                                      <span class="text-danger" id="start_date-error"></span>

                                </div>
                                <div class="col-6 mrgB24">
                                    <div class="form-content ">
                                        <label for="year1" class="form-label" style="visibility: hidden;">Duration*</label>
                                        <input type="date" class="form-control" value="{{$student_experience->end_date}}" name="end_date[]" id="year1" placeholder="completion year">
                                      </div>
                                      <span class="text-danger" id="end_date-error"></span>

                                </div>                                                     
                                
                                  <div class="col-md-6 mrgB24">
                                    <div class="form-content ">
                                        <div class="custom-lable">
                                            <label for="location" class="form-label">Location*</label>
                                          <div class="form-check typ-small">
                                            <input type="checkbox" name="remote[]" value="yes" class="form-check-input" {{$student_experience->remote ? 'checked' : ''}} id="exampleCheck1">
                                            <label class="form-check-label" for="exampleCheck1">Remote</label>
                                          </div>
                                        </div>                                        
                                        <input type="text" class="form-control" value="{{$student_experience->location}}" name="location[]" id="location2" aria-describedby="locationHelp" placeholder="Enter Location">
                                    </div>
                                    <span class="text-danger" id="location2-error"></span>

                                  </div>   
                              <div class="col-md-12 mrgB24">
                                <div class="form-content ">
                                    <label for="about" class="form-label">Describe your experience in brief</label>
                                    <textarea class="form-control" name="description[]" id="about" rows="5" placeholder="Write here">{{$student_experience->description}}</textarea>
                                  </div>
                               </div>
                            </div>
                         </div>
                            @endforeach
                            @endif
                            @if(count($student->student_experiences)<=0)
                            <div>
                            <div class="row form-section">
                                <div class="col-md-6 col-lg-4 mrgB24">
                                    <div class="form-content ">
                                        <label for="qualification" class="form-label">Is this your current employment?*</label>
                                        <div class="bs-custom-radio typ-V3">
                                        <div class="form-check ">
                                            <input class="form-check-input" type="radio" name="current_job[]" id="current_job_yes" value="yes"checked >
                                            <label class="form-check-label" for="inlineRadio2">Yes</label>
                                        </div>
                                        <div class="form-check ">
                                            <input class="form-check-input" type="radio" name="current_job[]" id="current_job_no" value="no" >
                                            <label class="form-check-label" for="inlineRadio3">No</label>
                                        </div>
                                    </div>
                                      </div>
                                </div>
                                <div class="col-md-6 col-lg-4 mrgB24">
                                    <div class="form-content ">
                                        <label for="designation" class="form-label">Designation*</label>
                                        <select class="form-select" id="designition2" name="designition[]" aria-label="Default select example">
                                            <option value="" selected>Select Designation</option>
                                            @foreach($designitions as $designition)
                                            <option value="{{$designition->id}}">{{$designition->title}}</option>
                                            @endforeach
                                        </select>    
                                    </div>
                                    <span class="text-danger" id="designition2-error"></span>

                                </div>
                                <div class="col-md-6 col-lg-4 mrgB24">
                                    <div class="form-content ">
                                    <label for="phone" class="form-label">Employment Type*</label>
                                    <select class="form-select" id="employee_type2" name="employee_type[]" aria-label="Default select example">
                                            <option value="" selected>Select Employment</option>
                                            @foreach($employee_types as $employee_type)
                                            <option value="{{$employee_type->id}}" >{{$employee_type->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <span class="text-danger" id="employee_type2-error"></span>

                                </div>
                                <div class="col-md-6 mrgB24">
                                    <div class="form-content ">
                                    <label for="phone" class="form-label">Department*</label>
                                    <select id="department2" class="form-select" name="department[]" aria-label="Default select example">
                                            <option value="" selected>Select Department</option>
                                            @foreach($departments as $department)
                                            <option value="{{$department->id}}">{{$department->department_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <span class="text-danger" id="department2-error"></span>

                                </div>
                                <div class="col-md-6 mrgB24">
                                    <div class="form-content ">
                                        <label for="name1" class="form-label">Company name*</label>
                                        <input  type="text" class="form-control" name="company_name[]" id="company_name2" placeholder="Company name">
                                      </div>
                                      <span class="text-danger" id="company_name2-error"></span>

                                </div>
                                <div class="col-6 mrgB24">
                                    <div class="form-content ">
                                        <label for="year" class="form-label">Duration*</label>
                                        <input type="date" class="form-control" name="start_date[]" id="start_date2" placeholder="Start Year">
                                      </div>
                                      <span class="text-danger" id="start_date2-error"></span>

                                </div>
                                <div class="col-6 mrgB24" id="experience_end_date_div" style="display:none;">
                                    <div class="form-content ">
                                        <label for="year1" class="form-label" style="visibility: hidden;">Duration*</label>
                                        <input type="date" class="form-control" name="end_date[]" id="end_date2" placeholder="completion year">
                                      </div>
                                      <span class="text-danger" id="end_date2-error"></span>

                                </div>                                                     
                                
                                  <div class="col-md-6 mrgB24">
                                    <div class="form-content ">
                                        <div class="custom-lable">
                                            <label for="location" class="form-label">Location*</label>
                                          <div class="form-check typ-small">
                                            <input type="checkbox" name="remote[]" value="yes" class="form-check-input" id="exampleCheck1">
                                            <label class="form-check-label" for="exampleCheck1">Remote</label>
                                          </div>
                                        </div>                                        
                                        <input type="text" class="form-control" name="location[]" id="location2" aria-describedby="locationHelp" placeholder="Enter Location">
                                    </div>
                                    <span class="text-danger" id="location2-error"></span>

                                  </div>   
                                <div class="col-md-12 mrgB24">
                                 <div class="form-content ">
                                    <label for="about" class="form-label">Describe your experience in brief</label>
                                    <textarea class="form-control" name="description[]" id="about" rows="5" placeholder="Write here"></textarea>
                                  </div>
                              </div>
                            </div>
</div>
                            @endif

                            <div id="add_work_experience">

                            </div>

                                  <div class="col-md-12 mrgB24 mt-4">
                                    <button type="button" class="bs-btn btn typ-education " id="add_work_experience_button" >Add Work Experience</button>
                                  </div>

                            <div class="bs-footer-btn-section typ-user-profile">
                              <div class="footer-btn">
                               <button type="button" class="bs-btn typ-back fnt18" onclick="handleWorkExperiencePrevious()">Previous</button>
                               <button type="button" class="bs-btn typ-back fnt18" onclick="handleWorkExperienceSkip()">Skip</button>
                               <button class="bs-btn typ-next fnt18" type="button" onclick="handleWorkExperienceNext()">Next</button>
                             </div>
                          </div>
                       </form>
                       
            
 



                        
                       <form class="bs-form typ-user-profile typ-basic-info" id="certificates"> 
                            <h4 class="title fnt18 mrgB18">Certificates</h4>
                            @if(count($student->student_certificates) >=1)
                            @foreach($student->student_certificates as $student_certificate)
                            <div>
                            <div class="row form-section">
                                <div class="col-md-6 mrgB24">
                                    <div class="form-content ">
                                        <label for="title" class="form-label">Title of Certificate*</label>
                                        <input type="text" class="form-control" value="{{$student_certificate->title}}" name="title" id="certificate_title" placeholder="Title of Certificate">
                                    </div>
                                    <span class="text-danger" id="certificate_title-error"></span>

                                </div>
                                <div class="col-md-6 mrgB24">
                                    <div class="form-content ">
                                        <label for="organisation" class="form-label">Issuing Organisation*</label>
                                        <input type="text" class="form-control" value="{{$student_certificate->issuing_organization}}" name="organisation" id="organisation" placeholder="Organisation">
                                    </div>
                                    <span class="text-danger" id="organisation-error"></span>

                                </div>
                                <div class="col-6 mrgB24">
                                    <div class="form-content ">
                                        <label for="year" class="form-label">Duration*</label>
                                        <input type="date" class="form-control" value="{{$student_certificate->start_date}}" name="start_date" id="start_date3" placeholder="Start Year">
                                      </div>
                                      <span class="text-danger" id="start_date3-error"></span>

                                </div>
                                <div class="col-6 mrgB24">
                                    <div class="form-content ">
                                        <label for="year1" class="form-label" style="visibility: hidden;">Duration*</label>
                                        <input type="date" class="form-control" value="{{$student_certificate->end_date}}" name="end_date" id="end_date3" placeholder="completion year">
                                      </div>
                                      <span class="text-danger" id="end_date3-error"></span>

                                </div>  
                              <div class="col-md-12 mrgB24">
                                <div class="form-content ">
                                    <label for="about" class="form-label">Describe <span class="greyLight">(optional)</span></label>
                                    <textarea class="form-control" name="description" id="about" rows="5" placeholder="Write here">{{$student_certificate->description}}</textarea>
                                  </div>
                            </div>
                            <div class="col-md-12 mrgB24">
                                <div class="mod-upload add-attachment">                                        
                                    <div class="bg-line">
                                        <input class="custom-file-input" type="file" onchange="getCertificateFileName(this)" name="uploaded_file" id="upload-photo" />
                                        <div class="text-center upload-icon-area">  
                                            <div class="add-btn"><span class="icon icon-plus"></span> Add Attachment</div>
                                        </div>
                                        <span id="certificate-file-name"></span>
                                    </div>
                                </div>
                            </div>
                          </div>
                        @endforeach
                          @else
                          <div class="row form-section">
                                <div class="col-md-6 mrgB24">
                                    <div class="form-content ">
                                        <label for="title" class="form-label">Title of Certificate*</label>
                                        <input type="text" class="form-control" name="title" id="certificate_title" placeholder="Title of Certificate">
                                    </div>
                                    <span class="text-danger" id="certificate_title-error"></span>

                                </div>
                                <div class="col-md-6 mrgB24">
                                    <div class="form-content ">
                                        <label for="organisation" class="form-label">Issuing Organisation*</label>
                                        <input type="text" class="form-control" name="organisation" id="organisation" placeholder="Organisation">
                                    </div>
                                    <span class="text-danger" id="organisation-error"></span>

                                </div>
                                <div class="col-6 mrgB24">
                                    <div class="form-content ">
                                        <label for="year" class="form-label">Duration*</label>
                                        <input type="date" class="form-control" name="start_date" id="start_date3" placeholder="Start Year">
                                      </div>
                                      <span class="text-danger" id="start_date3-error"></span>

                                </div>
                                <div class="col-6 mrgB24">
                                    <div class="form-content ">
                                        <label for="year1" class="form-label" style="visibility: hidden;">Duration*</label>
                                        <input type="date" class="form-control" name="end_date" id="end_date3" placeholder="completion year">
                                      </div>
                                      <span class="text-danger" id="end_date3-error"></span>

                                </div>  
                              <div class="col-md-12 mrgB24">
                                <div class="form-content ">
                                    <label for="about" class="form-label">Describe <span class="greyLight">(optional)</span></label>
                                    <textarea class="form-control" name="description" id="about" rows="5" placeholder="Write here"></textarea>
                                  </div>
                            </div>
                            <div class="col-md-12 mrgB24">
                                <div class="mod-upload add-attachment">                                        
                                    <div class="bg-line">
                                        <input class="custom-file-input" type="file" onchange="getCertificateFileName(this)" name="uploaded_file" id="certificate-file" />
                                        <div class="text-center upload-icon-area">  
                                            <div class="add-btn"><span class="icon icon-plus"></span> Add Attachment</div>
                                        </div>
                                        <span id="certificate-file-name"></span>
                                        <span class="text-danger" id="certificate-file-error"></span>

                                    </div>
                                </div>
                            </div>
                          @endif



                            </div>
                            <div class="bs-footer-btn-section typ-user-profile mt-4">
                            <div class="footer-btn">
                            <button type="button" class="bs-btn typ-back fnt18" onclick="handleCertificatesPrevious()">Previous</button>
                            <button onclick="handleCertificatesSkip()" type="button" class="bs-btn typ-back fnt18">Skip</button>
                            <button onclick="handleCertificatesNext()" type="button" class="bs-btn typ-next fnt18">Next</button>
                         </div>
                         </div>
                       </form>
                       
                   


 
     
                       <form class="bs-form typ-user-profile typ-basic-info" id="skills-form"> 
                            <h4 class="title fnt18 mrgB18">Skills</h4>
                            <div class="row form-section">
                                <div class="col-md-12 mrgB24">
                                    <div class="form-content ">
                                    <label for="phone" class="form-label">Select Skiils</label>
                                    <select class="form-select" aria-label="Default select example" id="skillSelect">
                                            @foreach($skills as $skill)
                                            <option value="{{$skill->id}}">{{$skill->skill_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <span class="text-danger" id="skill-error"></span>

                                </div>
                                <div class="col-md-12 mrgB24">
                                    <div class="select-wrapper" id="selectContainer">
                                    </div>
                                  
                                </div>
                            </div>
                            <div class="bs-footer-btn-section typ-user-profile">
                            <div class="footer-btn">
                              <button type="button" class="bs-btn typ-next fnt18" onclick="handleSkillsNext()" >Complete Profile</button>
                          </div>
                        </div>
                       </form>
                       
                    
    </section>
  </main>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
 
  <script>
    document.getElementById('skillSelect').addEventListener('change', function() {
        var selectedOption = this.options[this.selectedIndex].text;

        var newDiv = document.createElement('div');
        newDiv.classList.add('select-wrapper');
        newDiv.innerHTML = '<div class="select-item mb-2 m-1">' + selectedOption + '<span class="icon icon-close"></span></div>';
        document.getElementById('selectContainer').appendChild(newDiv);


        var inputField = document.createElement('input');
        inputField.name="skills[]",
        inputField.hidden=true;
        inputField.value=this.value,
        inputField.id="skill_id"+this.value,
        document.getElementById('selectContainer').appendChild(inputField);

        // this.options[this.selectedIndex].style.display = "none";

        // Add event listener to the close icon of the selected item
    var closeIcon = newDiv.querySelector('.icon-close');
    closeIcon.addEventListener('click', function() {
        // Remove the <div> element containing the selected item
        newDiv.remove();
        // Remove the corresponding <input> element
        inputField.remove();
        // Show the selected option in the dropdown
        document.getElementById('skillSelect').options[document.getElementById('skillSelect').selectedIndex].style.display = "";
    });

    });
    
</script>


  <script>

    const token='{{csrf_token()}}';

    var userType = "{{ Auth::user()->user_type }}";


$(document).ready(function () {

    $('#basic-info').hide();
    $('#educational-details').hide();
    $('#work-experience').hide();
    $('#certificates').hide();
    $('#skills-form').hide();

})


//---------------upload resume function--------------------
function handleResumeNext() {
    var form = document.getElementById('resume');

    var uploadedFile = document.getElementById('uploaded-resume').files[0];
    var allowedExtensions = ['pdf', 'docx', 'doc'];

    if (!uploadedFile) {
        document.getElementById('uploaded-resume-error').innerText="Please Upload Resume"
        return;
    }
    var maxFileSize = 10 * 1024 * 1024;

    if (uploadedFile.size > maxFileSize) {
        document.getElementById('uploaded-resume-error').innerText="File size exceeds the maximum allowed (10MB)."
    return;
}
  

    var formData = new FormData(form);

    var uploadedFileInput = document.getElementById('uploaded-resume');

    if (uploadedFileInput.files.length > 0) {
    var uploadedFile = uploadedFileInput.files[0];
    var fileExtension = uploadedFile.name.split('.').pop().toLowerCase();

    if (allowedExtensions.includes(fileExtension)) {
        formData.append('resume', uploadedFile);
        formData.append('cv_file_name', uploadedFile.name);

    } else {
        document.getElementById('uploaded-resume-error').innerText="Please upload a PDF, DOCX, or DOC file.";
        return;

    }
}
    fetch('{{ route('resume.update') }}', {
        method: 'POST',
        headers: {
            'X-CSRF-Token': token
        },
        body: formData
    })
    .then(async (response) => {
        const data = await response.json();

        if(data.status===200){
        $('#resume').hide();
        $('#basic-info').show();
        var lines = document.querySelectorAll('.line');

        lines.forEach(function(item) {
            if (item.getAttribute('id') === 'form2') {
                item.className = 'line active';
            }
        });  

    }
      })
    .catch((error) => {
        console.error("error", error);
    });
}

// -------------end of resume upload-----------------


//-------------basic information function----------------

function handleBasicInfoNext() {

    var uploadedFile = document.getElementById('uploaded-photo').files[0];
    var allowedExtensions = ['jpg', 'jpeg', 'png'];

    var firstName = document.getElementById("firstName").value;
    var lastName = document.getElementById("lastName").value;
    var about = document.getElementById("about").value;
    var email = document.getElementById("email").value;
    var phone = document.getElementById("phone").value;
    var gender = document.getElementById("gender").value;
    var DOB = document.getElementById("DOB").value;
    var country = document.getElementById("country").value;
    var city = document.getElementById("city").value;
    var pincode = document.getElementById("pincode").value;
    var permanentaddress = document.getElementById("permanentaddress").value;
    var town = document.getElementById("town").value;
    var linked_in_link = document.getElementById("linked_in_link").value;
    // var facebook_link = document.getElementById("facebook_link").value;
    // var twitter_link = document.getElementById("twitter_link").value;
     var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    var nameRegex = /^[A-Za-z]+$/;

    var validated=true;

    if (uploadedFile) {
        var fileExtension = uploadedFile.name.split('.').pop().toLowerCase();

        if (!allowedExtensions.includes(fileExtension)) {
            document.getElementById('uploaded-photo-error').innerText="Invalid file"
            validated=false;
        }
          
    }

    var firstNameError = document.getElementById("firstName-error");
    if (firstName.trim() === "") {
        firstNameError.innerText = "First Name is required";
        validated=false;
    }else if (!nameRegex.test(firstName)) {
    firstNameError.innerText = "Please enter valid first name";
      validated = false;
    } else {
        firstNameError.textContent = "";
    }

    var lastNameError = document.getElementById("lastName-error");
    if (lastName.trim() === "") {
        lastNameError.textContent = "Last Name is required";
        validated=false;
    } else if (!nameRegex.test(lastName)) {
      lastNameError.innerText = "Please enter valid last name";
      validated = false;
    }else {
        lastNameError.textContent = "";
    }
    
    var aboutError = document.getElementById("about-error");
    if (about.trim() === "") {
        aboutError.textContent = "About is required";
        validated=false;
    } else {
        aboutError.textContent = "";
    }
    
    var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

    var emailError = document.getElementById("email-error");
    if (email.trim() === "") {
        emailError.textContent = "Email is required";
        validated=false;
    }else if (!emailRegex.test(email)) {
        emailError.textContent = "Please enter valid email";
        validated = false;
    } else {
        emailError.textContent = "";
    }
    
    var phoneError = document.getElementById("phone-error");
    if (phone.trim() === "") {
        phoneError.textContent = "Phone is required";
        validated=false;
    } else {
        phoneError.textContent = "";
    }
    
    var currentDate=new Date();
    var date=new Date(DOB);
    var DOBError = document.getElementById("DOB-error");
    if (DOB.trim() === "") {
        DOBError.textContent = "DOB  is required";
        validated=false;
    }else if(date>=currentDate){
        DOBError.textContent = " Invalid DOB";
        validated=false;
    } else {
        DOBError.textContent = "";
    }

    var countryrError = document.getElementById("country-error");
    if (country.trim() === "") {
        countryrError.textContent = "Country Name is required";
        validated=false;
    }else if (!nameRegex.test(country)) {
      countryrError.innerText = "Please enter valid country";
      validated = false;
   }  else {
        countryrError.textContent = "";
    }


    var cityError = document.getElementById("city-error");
    if (city.trim() === "") {
        cityError.textContent = "City Name is required";
        validated=false;
    }else if (!nameRegex.test(city)) {
      cityError.innerText = "Please enter valid city";
      validated = false;
    } else {
        cityError.textContent = "";
    }

    var pincodeError = document.getElementById("pincode-error");
    if (pincode.trim() === "") {
        pincodeError.textContent = "Pincode is required";
        validated=false;
    }else if(pincode.length!=6){
        pincodeError.textContent = "Invalid pincode";
        validated=false;
    } else {
        pincodeError.textContent = "";
    }

    var permanentaddressError = document.getElementById("permanentaddress-error");
    if (permanentaddress.trim() === "") {
        permanentaddressError.textContent = "Permanent address is required";
        validated=false;
    } else {
        permanentaddressError.textContent = "";
    }

    var townError = document.getElementById("town-error");
    if (town.trim() === "") {
        townError.textContent = "Home Town is required";
        validated=false;
    } else {
        townError.textContent = "";
    }


   

    if(validated){
    var form = document.getElementById('basic-info');
    var formData = new FormData(form);

    fetch('{{ route('basicInfo.update') }}', {
        method: 'POST',
        headers: {
            'X-CSRF-Token': token
        },
        body: formData
    })
    .then(async (response) => {
        const data = await response.json();

        if(data.status===200){
        $('#basic-info').hide();
        $('#educational-details').show();

        var lines = document.querySelectorAll('.line');

        lines.forEach(function(item) {
            if (item.getAttribute('id') === 'form3') {
                item.className = 'line active';
            }
        });  

    }
      })
    .catch((error) => {
        console.error("error", error);
    });
}
}
//-------------end basic information function----------------

//--------------education details ----------------------

function handleEducationDetailsNext(){


    var qualification = document.getElementById("qualification").value;
    var degree_type = document.getElementById("degree_type").value;
    var degree = document.getElementById("degree").value;
    var start_date = document.getElementById("start_date").value;
    var end_date = document.getElementById("end_date").value;
    var location = document.getElementById("location").value;
    var percentage = document.getElementById("percentage").value;
    var college = document.getElementById("college").value;
    var validated=true;
    var nameRegex = /^[A-Za-z]+$/;


    var qualificationError = document.getElementById("qualification-error");
    if (qualification.trim() === "") {
        qualificationError.innerText = "Qualification is required";
        validated=false;
    } else {
        qualificationError.textContent = "";
    }

    var degree_typeError = document.getElementById("degree_type-error");
    if (degree_type.trim() === "") {
        degree_typeError.innerText = "Degree type is required";
        validated=false;
    } else {
        degree_typeError.textContent = "";
    }

    var degreeError = document.getElementById("degree-error");
    if (degree.trim() === "") {
        degreeError.innerText = "Degree Name is required";
        validated=false;
    } else {
        degreeError.textContent = "";
    }

    var currentDate=new Date();
    var date=new Date(start_date);
    var start_dateError = document.getElementById("start_date-error");
    if (start_date.trim() === "") {
        start_dateError.innerText = "Start date is required";
        validated=false;
    }else if(date>=currentDate){
        start_dateError.textContent = " Invalid start date ";
        validated=false;
    } else {
        start_dateError.textContent = "";
    }

    var startDateObj = new Date(start_date);
    var endDateObj = new Date(end_date);

    var end_dateError = document.getElementById("end_date-error");
    if (end_date.trim() === "") {
        end_dateError.innerText = "End date is required";
        validated=false;
    }else if(endDateObj <= startDateObj){
        end_dateError.innerText = "End date should be greater than start date.";
        validated=false;

    }
     else {
        end_dateError.textContent = "";
    }

    var locationError = document.getElementById("location-error");
    if (location.trim() === "") {
        locationError.innerText = "Location is required";
        validated=false;
    } else {
        locationError.textContent = "";
    }

    var percentageError = document.getElementById("percentage-error");
    if (percentage.trim() === "") {
        percentageError.innerText = "Percentage  is required";
        validated=false;
    } else {
        percentageError.textContent = "";
    }

    var collegeError = document.getElementById("college-error");
    if (college.trim() === "") {
        collegeError.innerText = "College  is required";
        validated=false;
    } else {
        collegeError.textContent = "";
    }



    if(validated){
    var form=document.getElementById('educational-details');

    var formData=new FormData(form);

    fetch("{{route('education.update')}}",{
        method:'POST',
        headers:{
            'X-CSRF-Token':token
        },
        body:formData
    }).then(async(response)=>{
        const data=await response.json();
        if(data.status===200){
            $('#educational-details').hide();


    //   if(userType==="professional" || userType==="other" ){
            $('#work-experience').show();
            var lines=document.querySelectorAll('.line');
            lines.forEach(function(item){
                if(item.getAttribute('id')==='form4'){
                    item.className='line active';
                }
            });
        // }else{
        //     $('#certificates').show();

        //     var lines=document.querySelectorAll('.line');
        //     lines.forEach(function(item){
        //         if(item.getAttribute('id')==='form5'){
        //             item.className='line active';
        //         }
        //     });
        // }   




        }
    }).catch((error)=>{
        console.log(error)
    })
}
}


//--------------WORK EXPERIENCE ----------------------

function handleWorkExperienceNext(){

    var designition = document.getElementById("designition2").value;
    var employee_type = document.getElementById("employee_type2").value;
    var department = document.getElementById("department2").value;
    var start_date = document.getElementById("start_date2").value;
    var end_date = document.getElementById("end_date2").value;
    var location = document.getElementById("location2").value;
    var company_name = document.getElementById("company_name2").value;
    var current_job_yes=document.getElementById("current_job_yes");
    var validated=true;


    var company_nameError = document.getElementById("company_name2-error");
    if (company_name.trim() === "") {
        company_nameError.innerText = "Company name  is required";
        validated=false;
    } else {
        company_nameError.textContent = "";
    }
    var locationError = document.getElementById("location2-error");
    if (location.trim() === "") {
        locationError.innerText = "Location  is required";
        validated=false;
    } else {
        locationError.textContent = "";
    }

    var startDateObj = new Date(start_date);
    var endDateObj = new Date(end_date);
    var end_dateError = document.getElementById("end_date2-error");

    if(current_job_yes.checked===false){
    if (end_date.trim() === "") {
        end_dateError.innerText = "End date  is required";
        validated=false;
    }else if(endDateObj <= startDateObj){
        end_dateError.innerText = "End date should be greater than start date.";
        validated=false;

    } else {
        end_dateError.textContent = "";
    }
}else{
    end_dateError.textContent = "";

}

    var currentDate=new Date();
    var date=new Date(start_date);
    var start_dateError = document.getElementById("start_date2-error");
    if (start_date.trim() === "") {
        start_dateError.innerText = "Start date  is required";
        validated=false;
    }else if(date>=currentDate){
        start_dateError.textContent = " Invalid start date ";
        validated=false;
    } else {
        start_dateError.textContent = "";
    }

    var departmentError = document.getElementById("department2-error");
    if (department.trim() === "") {
        departmentError.innerText = "Department  is required";
        validated=false;
    } else {
        departmentError.textContent = "";
    }
    
    var employee_typeError = document.getElementById("employee_type2-error");
    if (employee_type.trim() === "") {
        employee_typeError.innerText = "Employee type  is required";
        validated=false;
    } else {
        employee_typeError.textContent = "";
    }
    var designitionError = document.getElementById("designition2-error");
    if (designition.trim() === "") {
        designitionError.innerText = "Designition  is required";
        validated=false;
    } else {
        designitionError.textContent = "";
    }

    if(validated){

var form=document.getElementById('work-experience');

    var formData=new FormData(form);

    fetch("{{route('workExperience.update')}}",{
        method:'POST',
        headers:{
            'X-CSRF-Token':token
        },
        body:formData
    }).then(async(response)=>{
        const data=await response.json();
        if(data.status===200){
            $('#work-experience').hide();
            $('#certificates').show();

            var lines=document.querySelectorAll('.line');
            lines.forEach(function(item){
                if(item.getAttribute('id')==='form5'){
                    item.className='line active';
                }
            });

        }
    }).catch((error)=>{
        console.log(error)
    })
}
}


//--------------CERIFICATES  ----------------------

function handleCertificatesNext(){

    var organization = document.getElementById("organisation").value;
    var start_date = document.getElementById("start_date3").value;
    var end_date = document.getElementById("end_date3").value;
    var certificate_title = document.getElementById("certificate_title").value;

    var validated=true;

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

    if (!uploadedFile) {
        document.getElementById('certificate-file-error').innerText="Please Upload Certificate";
        validated=false;
    }else {
        document.getElementById('certificate-file-error').innerText="";

    }

    var uploadedFileInput = document.getElementById('certificate-file');

    if (uploadedFileInput.files.length > 0) {
    var uploadedFile = uploadedFileInput.files[0];
    var fileExtension = uploadedFile.name.split('.').pop().toLowerCase();

    if (allowedExtensions.includes(fileExtension)) {
        validated=true;
    } else {
        document.getElementById('certificate-file-error').innerText="Please upload a PDF, DOCX, or DOC file.";
        validated=false;

    }
}

    var organizationError = document.getElementById("organisation-error");
    if (organization.trim() === "") {
        organizationError.innerText = "Organization  is required";
        validated=false;
    } else {
        organizationError.textContent = "";
    }
    var certificate_titleError = document.getElementById("certificate_title-error");
    if (certificate_title.trim() === "") {
        certificate_titleError.innerText = "Title  is required";
        validated=false;
    } else {
        certificate_titleError.textContent = "";
    }

    var startDateObj = new Date(start_date);
    var endDateObj = new Date(end_date);
    var end_dateError = document.getElementById("end_date3-error");
    if (end_date.trim() === "") {
        end_dateError.innerText = "End date  is required";
        validated=false;
    }else if(endDateObj <= startDateObj){
        end_dateError.innerText = "End date should be greater than start date.";
        validated=false;

    } else {
        end_dateError.textContent = "";
    }
    

    var currentDate=new Date();
    var date=new Date(start_date);
        var start_dateError = document.getElementById("start_date3-error");
        if (start_date.trim() === "") {
            start_dateError.innerText = "Start date  is required";
            validated=false;
        }if(date>=currentDate){
            start_dateError.textContent = " Invalid start date";
            validated=false;
        } else {
            start_dateError.textContent = "";
        }
    
    if(validated){

var form=document.getElementById('certificates');

    var formData=new FormData(form);

    fetch("{{route('certificates.update')}}",{
        method:'POST',
        headers:{
            'X-CSRF-Token':token
        },
        body:formData
    }).then(async(response)=>{
        const data=await response.json();
        if(data.status===200){
            $('#certificates').hide();
            $('#skills-form').show();

            var lines=document.querySelectorAll('.line');
            lines.forEach(function(item){
                if(item.getAttribute('id')==='form6'){
                    item.className='line active';
                }
            });

        }
    }).catch((error)=>{
        console.log(error)
    })
}
}
    

//--------------Skills  ----------------------
function handleSkillsNext(){

    var validated=true;

    var skills = document.getElementById("skillSelect").value;
    var skillError = document.getElementById("skill-error");
    if (skills.trim() === "null") {
        skillError.innerText = "Skill  is required";
        validated=false;
    } else {
        skillError.textContent = "";
    }

    if(validated){
var form=document.getElementById('skills-form');

    var formData=new FormData(form);

    fetch("{{route('student.skills.update')}}",{
        method:'POST',
        headers:{
            'X-CSRF-Token':token
        },
        body:formData
    }).then(async(response)=>{
        const data=await response.json();
        if(data.status===200){
            window.location.href="{{route('user.dashboard')}}";

        }
    }).catch((error)=>{
        console.log(error)
    })
}
}
    


function handleBasicInfoPrevious(){
    $('#basic-info').hide();
    $('#resume').show();
}

function handleEducationDetailsPrevious(){
    $('#basic-info').show();
    $('#educational-details').hide();

}

function handleWorkExperiencePrevious(){
    $('#work-experience').hide();
    $('#educational-details').show();
   

}

function handleCertificatesPrevious(){
    $('#certificates').hide();
    // if(userType=="professional" || userType=="other" ){
     $('#work-experience').show();
    // }else{
    //     $('#educational-details').show();
    // }
  
}

function handleWorkExperienceSkip(){
    $('#work-experience').hide();
    $('#certificates').show();
    var lines=document.querySelectorAll('.line');
            lines.forEach(function(item){
                if(item.getAttribute('id')==='form4'){
                    item.className='line active';
                }
            });

}

function handleCertificatesSkip(){
    $('#certificates').hide();
    $('#skills-form').show();

    var lines=document.querySelectorAll('.line');
            lines.forEach(function(item){
                if(item.getAttribute('id')==='form5'){
                    item.className='line active';
                }
            });

}

function getFileName(input) {
        var file = input.files[0];

    var fileNameWithExtension = file.name;

    var file_uploaded =document.getElementById('file-name');
    file_uploaded.innerText=fileNameWithExtension;
    document.getElementById('uploaded-resume-error').innerText="";

}

function getCertificateFileName(input) {
        var file = input.files[0];

    var fileNameWithExtension = file.name;

    var file_uploaded =document.getElementById('certificate-file-name');
    file_uploaded.innerText=fileNameWithExtension;

}

    var renderProfilePhoto = function(event) {
         var reader = new FileReader();
         reader.onload = function() {
             var output = document.getElementById('output');
             output.style.display='block';
             output.src = reader.result;
        $('#photo-icon').hide();

         };
         reader.readAsDataURL(event.target.files[0]);
     };

// -----------add more education form-----------------
$(document).ready(function(){

    var i=0;

    $('#addEducation').click(function(){
        i++;
       
        $('#added').append(
    '<div id="row' + i + '" class="row form-section">' +
        '<div class="col-md-6 col-lg-4 mrgB24">' +
            '<div class="form-content ">' +
                '<label for="qualification" class="form-label">Qualification*</label>' +
                '<input type="text" name="qualification[]" class="form-control" id="qualification" placeholder="Enter qualification">' +
            '</div>' +
            '<span class="text-danger" id="qualification-error"></span>' +
        '</div>' +
        '<div class="col-md-6 col-lg-4 mrgB24">' +
            '<div class="form-content ">' +
                '<label for="phone" class="form-label">Degree Type*</label>' +
                '<select id="degree_type" name="degree_type[]" class="form-select" aria-label="Default select example">' +
                    '<option value="" selected>Select Degree type</option>' +
                    '<option value="full">Full Time</option>' +
                    '<option value="part">Part Time</option>' +
                '</select>' +
            '</div>' +
            '<span class="text-danger" id="degree_type-error"></span>' +
        '</div>' +
        '<div class="col-md-6 col-lg-4 mrgB24">' +
            '<div class="form-content ">' +
                '<label for="phone" class="form-label">Degree*</label>' +
                '<select id="degree" class="form-select" name="degree[]" aria-label="Default select example">' +
                    '<option value="" selected>Select Degree</option>' +
                    '@foreach($educations as $education)' +
                        '<option value="{{$education->id}}">{{$education->name}}</option>' +
                    '@endforeach' +
                '</select>' +
            '</div>' +
            '<span class="text-danger" id="degree-error"></span>' +
        '</div>' +
        '<div class="col-6 mrgB24">' +
            '<div class="form-content ">' +
                '<label for="start_date" class="form-label">Duration*</label>' +
                '<input type="date" name="start_date[]" class="form-control" id="start_date" placeholder="Start Year">' +
            '</div>' +
            '<span class="text-danger" id="start_date-error"></span>' +
        '</div>' +
        '<div class="col-6 mrgB24">' +
            '<div class="form-content ">' +
                '<label for="end_date" class="form-label" style="visibility: hidden;">Duration*</label>' +
                '<input type="date" name="end_date[]" class="form-control" id="end_date" placeholder="completion year">' +
            '</div>' +
            '<span class="text-danger" id="end_date-error"></span>' +
        '</div>' +
        '<div class="col-md-6 col-lg-4 mrgB24">' +
            '<div class="form-content ">' +
                '<label for="percentage" class="form-label">Percentage/CGPA</label>' +
                '<input type="text" name="percentage[]" class="form-control" id="percentage" placeholder="Percentage/CGPA">' +
            '</div>' +
            '<span class="text-danger" id="percentage-error"></span>' +
        '</div>' +
        '<div class="col-md-6 col-lg-4 mrgB24">' +
            '<div class="form-content ">' +
                '<label for="college" class="form-label">College/University</label>' +
                '<input type="text" name="university[]" class="form-control" id="college" placeholder="College/University">' +
            '</div>' +
            '<span class="text-danger" id="college-error"></span>' +
        '</div>' +
        '<div class="col-md-6 col-lg-4 mrgB24">' +
            '<div class="form-content ">' +
                '<label for="location" class="form-label">Location*</label>' +
                '<input type="text" class="form-control" name="location[]" id="location" aria-describedby="locationHelp" placeholder="Enter Location">' +
            '</div>' +
            '<span class="text-danger" id="location-error"></span>' +
        '</div>' +
        '<div class="col-md-12">' +
            '<div class="form-content">' +
                '<label for="about" class="form-label">Description <span class="greyLight">(optional)</span></label>' +
                '<textarea class="form-control" name="description[]" id="about" rows="5" placeholder="Write here"></textarea>' +
            '</div>' +
        '</div>' +
        '<div class="col-md-12 mrgB24">' +
            '<button class="bs-btn btn typ-education remove-button m-3" id="' + i + '" type="button">Remove</button>' +
        '</div>' +
    '</div>'
);

})

        $(document).on('click','.remove-button',function(){
            var button_id=$(this).attr("id");
             $('#row'+button_id+'').remove();   
        })

})
// -----------end add more education form-----------------



// -----------add more work experience form-----------------
$(document).ready(function(){

var i=0;

$('#add_work_experience_button').click(function(){
    i++;

$('#add_work_experience').append('<div class="row form-section" id="work_exp'+i+'">'+
                                 '<div class="col-md-6 col-lg-4 mrgB24">' +
                                   '<div class="form-content ">' +
                                       ' <label for="qualification" class="form-label">Is this your current employment?*</label>' +
                                        '<div class="bs-custom-radio typ-V3">' +
                                        '<div class="form-check ">' +
                                            '<input class="form-check-input" type="radio" name="current_job[]" id="inlineRadio2" value="yes" checked="">' +
                                            '<label class="form-check-label" for="inlineRadio2">Yes</label>' +
                                        '</div>' +
                                        '<div class="form-check ">' +
                                            '<input class="form-check-input" type="radio" name="current_job[]" id="inlineRadio3" value="no">' +
                                            '<label class="form-check-label" for="inlineRadio3">No</label>' +
                                        '</div>' +
                                    '</div>' +
                                      '</div>' +
                                '</div>' +
                                '<div class="col-md-6 col-lg-4 mrgB24">' +
                                    '<div class="form-content ">' +
                                        '<label for="designation" class="form-label">Designation*</label>' +
                                        '<select class="form-select" name="designition[]" aria-label="Default select example">' +
                                            '<option selected>Select Designation</option>' +
                                            '@foreach($designitions as $designition)' +
                                            '<option value="{{$designition->id}}">{{$designition->title}}</option>' +
                                            '@endforeach' +
                                        '</select>    ' +
                                    '</div>' +
                                '</div>' +
                                '<div class="col-md-6 col-lg-4 mrgB24">' +
                                    '<div class="form-content ">' +
                                    '<label for="phone" class="form-label">Employment Type*</label>' +
                                    '<select class="form-select" name="employee_type[]" aria-label="Default select example">' +
                                            '<option selected>Select Employment</option>' +
                                            '@foreach($employee_types as $employee_type)' +
                                            '<option value="{{$employee_type->id}}">{{$employee_type->name}}</option>' +
                                            '@endforeach' +
                                        '</select>' +
                                    '</div>' +
                                '</div>' +
                                '<div class="col-md-6 mrgB24">' +
                                    '<div class="form-content ">' +
                                    '<label for="phone" class="form-label">Department*</label>' +
                                    '<select class="form-select" name="department[]" aria-label="Default select example">' +
                                            '<option selected>Select Department</option>' +
                                            '@foreach($departments as $department)' +
                                            '<option value="{{$department->id}}">{{$department->department_name}}</option>' +
                                            '@endforeach' +
                                        '</select>' +
                                    '</div>' +
                                '</div>' +
                                '<div class="col-md-6 mrgB24">' +
                                    '<div class="form-content ">' +
                                        '<label for="name1" class="form-label">Company name*</label>' +
                                        '<input type="text" class="form-control" name="company_name[]" id="name1" placeholder="Company name">' +
                                      '</div>' +
                                '</div>' +
                                '<div class="col-6 mrgB24">' +
                                    '<div class="form-content ">' +
                                        '<label for="year" class="form-label">Duration*</label>' +
                                        '<input type="date" class="form-control" name="start_date[]" id="year" placeholder="Start Year">' +
                                      '</div>' +
                                '</div>' +
                                '<div class="col-6 mrgB24">' +
                                    '<div class="form-content ">' +
                                        '<label for="year1" class="form-label" style="visibility: hidden;">Duration*</label>' +
                                        '<input type="date" class="form-control" name="end_date[]" id="year1" placeholder="completion year">' +
                                      '</div>' +
                                '</div>  ' +                                                   
                                
                                  '<div class="col-md-6 mrgB24">' +
                                    '<div class="form-content ">' +
                                        '<div class="custom-lable">' +
                                            '<label for="location" class="form-label">Location*</label>' +
                                          '<div class="form-check typ-small">' +
                                            '<input type="checkbox" name="remote[]" value="yes" class="form-check-input" id="exampleCheck1">' +
                                            '<label class="form-check-label" for="exampleCheck1">Remote</label>' +
                                          '</div>' +
                                        '</div> ' +                                       
                                        '<input type="text" class="form-control" name="location" id="location" aria-describedby="locationHelp" placeholder="Enter Location">' +
                                    '</div>' +
                                  '</div>   ' +
                              '<div class="col-md-12 mrgB24">' +
                                '<div class="form-content ">' +
                                    '<label for="about" class="form-label">Describe your experience in brief</label>' +
                                    '<textarea class="form-control" name="description[]" id="about" rows="5" placeholder="Write here"></textarea>' +
                                  '</div>' +
                            '</div>' +
                            '<div class="col-md-12 mrgB24">'+
                            '<button class="bs-btn btn typ-education remove-work-exp-button m-3" id="'+i+'"type="button">Remove</button>'+
                            '</div> ' +
                            '</div> ' 

);
})

    $(document).on('click','.remove-work-exp-button',function(){
        var button_id=$(this).attr("id");
         $('#work_exp'+button_id+'').remove();   
    })

})


document.addEventListener("DOMContentLoaded", function() {
        var currentJobYes = document.getElementById("current_job_yes");
        var endDateField = document.getElementById("experience_end_date_div");

        function toggleEndDateField() {
            if (currentJobYes.checked) {
                endDateField.style.display = "none";
            } else {
                endDateField.style.display = "block";
            }
        }

        currentJobYes.addEventListener("change", toggleEndDateField);

        var currentJobNo = document.getElementById("current_job_no");
        currentJobNo.addEventListener("change", toggleEndDateField);
    });

// -----------end add more education form-----------------

  </script>




@endsection