@extends('frontend.layouts.main')

@section('content')
    <main class="home ">

      <!-- Toast -->
      <div class="bs-toast d-none " id="popupSuccess" style="position: fixed; top: 50px; left: 0; right: 10px; z-index: 9999;">
                        <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
                            <div class="toast-header">
                                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                                <div class="img">
                                    <img src="{{asset('assets/images/toastersvg.svg')}}" alt="toastersvg">
                                </div>
                                <div class="txt-wrapper" style="display: block;">
                                    <h5 class="me-auto">Successful</h5>
                                    <p id="vwep-message"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Toaster end -->


        <!-- Banner section -->
        <section class="lyt-section typ-profile-dash">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="bs-banner typ-profile-dashboard">
                            <div class="bs-profile-details">
                                <div class="profile-photo">
                                    <div class="avatar-upload">
                                        <div class="avatar-edit">
                                            <input onchange="handleProfileImage()" type='file' id="imageUpload" accept=".png, .jpg, .jpeg" />
                                            <label for="imageUpload"></label>
                                        </div>
                                        <div class="avatar-preview">
                                            <div id="imagePreview"
                                            style="background-image: url('{{ $student->profile_image ? url($student->profile_image) : url('assets/images/user-profile/upload-photo.png') }}');">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="profile-details">
                                    <h2 class="name" id="username">{{Auth::user()->username}}</h2>
                                    <h3 class="update-history">Profile last updated - <span id="updatedDate">{{$student->cv_last_updated ? $student->cv_last_updated->format('d-m-Y') : ''}}</span>
                                    </h3>
                                    <div class="other-details">
                                        <div class="location-details">
                                            <div class="location-list">
                                                <sapn class="icon icon-map-icon" ></sapn><span id="studentCity">{{$student->city}}</span>
                                            </div>
                                            <div class="location-list">
                                                <sapn class="icon icon-fresher-bag"></sapn> {{count($student->student_experiences)>0 ? 'Experienced' : 'Fresher'}}
                                            </div>
                                        </div>
                                        <div class="email-details">
                                            <a  class="location-list">
                                                <sapn class="icon icon-call" ></sapn><span id="userPhone"> {{Auth::user()->phone_number}}</span>
                                            </a>
                                            <a  class="location-list">
                                                <sapn class="icon icon-email" ></sapn><span id="userEmail"> {{Auth::user()->email}}</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Banner section -->
        <!-- tabs section -->
        <section class="lyt-section typ-user-dashboard">
            <div class="container">
                <div class="row">
                    <div class="col-md-3 custom-col-3">
                        <div class="bs-tab">
                            <div class="tab-wrapper">
                                <h2 class="title">Candidate Dashboard</h2>
                                 @php
                                    $updatedBasicInfo=false;        

                                 if(Auth::user()->student){
                                      $user=Auth::user();

                                     if($user->student->email && $user->phone_number && $user->student->dob && $user->student->gender && 
                                     $user->student->country && $user->student->city && $user->student->home_town_pin && $user->student->p_address && $user->student->home_town){
                                        $updatedBasicInfo=true;
                                      }
                                    
                                    }
                                 
                                 @endphp

                                <div class="nav flex-column nav-pills tab-btns" id="v-pills-tab" role="tablist"
                                    aria-orientation="vertical">
                                    <button class="nav-link active" id="v-pills-resume-tab" data-bs-toggle="pill"
                                        data-bs-target="#v-pills-resume" type="button" role="tab"
                                        aria-controls="v-pills-resume" aria-selected="true">Resume <span class="text-danger">*</span> <span
                                            class="icon-white-check dashboartick-icon {{$student->cv ? '' : 'd-none'}}" id="resumeTick"></span></button>
                                    <button class="nav-link" id="v-pills-basic-info-tab" data-bs-toggle="pill"
                                        data-bs-target="#v-pills-basic-info" type="button" role="tab"
                                        aria-controls="v-pills-basic-info" aria-selected="false">Basic
                                        Information<span class="text-danger">*</span><span
                                        class="icon-white-check dashboartick-icon {{ $updatedBasicInfo ? '' : 'd-none'}}" id="basicInfoTick"></span></button>
                                    <button class="nav-link" id="v-pills-skills-tab" data-bs-toggle="pill"
                                        data-bs-target="#v-pills-skills" type="button" role="tab"
                                        aria-controls="v-pills-skills" aria-selected="false">Skills </button>
                                    <button class="nav-link" id="v-pills-educational-tab" data-bs-toggle="pill"
                                        data-bs-target="#v-pills-educational" type="button" role="tab"
                                        aria-controls="v-pills-educational" aria-selected="false">Education <span class="text-danger">*</span><span
                                        class="icon-white-check dashboartick-icon {{ count($student->student_qualifications) > 0 ? '' : 'd-none'}}" id="educationTick"></span></button>
                                    <button class="nav-link" id="v-pills-exprience-tab" data-bs-toggle="pill"
                                        data-bs-target="#v-pills-exprience" type="button" role="tab"
                                        aria-controls="v-pills-exprience" aria-selected="false">Work Experience</button>
                                    <button class="nav-link" id="v-pills-certificates-tab" data-bs-toggle="pill"
                                        data-bs-target="#v-pills-certificates" type="button" role="tab"
                                        aria-controls="v-pills-certificates" aria-selected="false">Certificates</button>
                                    <!-- <button class="nav-link" id="v-pills-projects-tab" data-bs-toggle="pill"
                                        data-bs-target="#v-pills-projects" type="button" role="tab"
                                        aria-controls="v-pills-projects" aria-selected="false">Projects</button> -->
                                
                                        <!-- <button class="nav-link" id="v-pills-projects-tab" data-bs-toggle="pill"
                                        data-bs-target="#v-pills-social-media" type="button" role="tab"
                                        aria-controls="v-pills-projects" aria-selected="false">Social Media</button> -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9 custom-col-9">
                        <div class="bs-tab">
                            <div class="tab-content-wrapper">
                                <div class="tab-content" id="v-pills-tabContent">
                                    <div class="tab-pane fade show active" id="v-pills-resume" role="tabpanel"
                                        aria-labelledby="v-pills-resume-tab" tabindex="0">
                                        <div class="content-wrapper">
                                            <div class="detail-items">
                                                <div class="title-section">
                                                    <h5 class="title">Resume*</h5>
                                                    <span class="text-success" id="uploaded-resume-name1">{{$student->cv_file_name}}</span>
                                                   <a href="{{$student->cv}}" target="_blank" id="download_link"> <span class="icon-section"><span
                                                            class="icon icon-download"></span></span></a>
                                                </div>
                                                <form id="resume">
                                                <div class="mod-upload typ-user-profile-upload typ-height132">
                                                    <div class="bg-line">
                                                        <input class="custom-file-input" onchange="handleResumeNext()" type="file" name="resume"
                                                            id="uploaded-resume" />
                                                        <div class="text-center upload-icon-area">
                                                            <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, rtf, pdf,
                                                                    upto 10 MB</span>
                                                            </div>
                                                            <span class="text-danger" id="uploaded-resume-error"></span>
                                                            <span class="text-success" id="uploaded-resume-name"></span>
                                                            <span class="text-success" id="uploaded-resume-success"></span>

                                                        </div>
                                                    </div>
                                                </div>
                                                </form>
                                            </div>
                                            <!-- <div class="detail-items">
                                                <div class="title-section">
                                                    <h5 class="title">About*</h5>
                                                    <span class="icon-section"><span class="icon icon-edit"
                                                            data-bs-toggle="modal" href="#aboutModal"></span></span>
                                                </div>
                                                <div class="box-wrapper">
                                                    <p class="para-text" id="aboutData">{{$student->description}}</p>
                                                </div>
                                            </div> -->

                                            <!-- <div class="detail-items">
                                                <div class="title-section">
                                                    <h5 class="title">Add Skills*</h5>
                                                    <span class="icon-section" data-bs-toggle="modal"
                                                        href="#skill"><span class="icon icon-edit"></span></span>
                                                </div>
                                                <div class="box-wrapper">
                                                    <div class="btn-group-section" id="skillsContainer">
                                                        @foreach($student->student_skills as $skills)
                                                        <span class="skill-btn" onclick="deleteUserSkill({{$skills->id}})">{{$skills->skill->skill_name}}</span>
                                                        @endforeach
                                                       

                                                    </div>
                                                </div>
                                            </div> -->



                                            <!-- <div class="detail-items">
                                                <div class="title-section">
                                                    <h5 class="title">Education*</h5>
                                                    <div class="plus-edit">
                                                        <span class="icon-section"><span class="icon icon-plus"
                                                                data-bs-toggle="modal" href="#eduacation"></span></span>
                                                        <span class="icon-section"><span
                                                                class="icon icon-edit"></span></span>
                                                    </div>
                                                </div>
                                                
                                            </div>

                                            <div id="educationContainer">
                                            @foreach($student->student_qualifications as $education)
                                            <div class="detail-items">
                                                <div class="box-wrapper">
                                                <h3 class="name">{{$education->qualification}}</h3>

                                                <div class="box-parent">
                                                        <div class="box-wrap">
                                                            <div class="selected-item">
                                                                <span class="icon icon-degree1"></span>
                                                                <span class="icon-name">{{$education->university}}</span>
                                                            </div>
                                                            <div class="selected-item">
                                                                <span class="icon icon-map-icon"></span>
                                                                <span class="icon icon-name">{{$education->location}}</span>
                                                            </div>
                                                        </div>
                                                        <div class="icons">
                                                            <span class="icon-section" onclick="getStudentQualification({{$education->id}})"><span
                                                                    class="icon icon-edit"></span></span>
                                                            <span class="icon-section" onclick="deleteUserQualification({{$education->id}})"><span
                                                                    class="icon icon-delete-button"></span></span>
                                                        </div>
                                                    </div>

                                                   
                                                </div>
                                            </div>
                                            @endforeach
                                        </div> -->
                                            

                                            <!-- <div class="detail-items">
                                                <div class="title-section">
                                                    <h5 class="title"> Work Experience*</h5>
                                                    <div class="plus-edit">
                                                        <span class="icon-section"><span class="icon icon-plus"
                                                                data-bs-toggle="modal" href="#experience"></span></span>
                                                        <span class="icon-section"><span
                                                                class="icon icon-edit"></span></span>
                                                    </div>
                                                </div>

                                                <div id="experienceContainer">
                                                @foreach($student->student_experiences as $experience)
                                                
                                                <div class="detail-items">
                                                <div class="box-wrapper">
                                                <h3 class="name">{{$experience->designition->title}}</h3>

                                                <div class="box-parent">
                                                        <div class="box-wrap">
                                                            <div class="selected-item">
                                                                <span class="icon icon-degree1"></span>
                                                                <span class="icon-name">{{$experience->department->department_name}}</span>
                                                            </div>
                                                            <div class="selected-item">
                                                                <span class="icon icon-map-icon"></span>
                                                                <span class="icon icon-name">{{$experience->location}}</span>
                                                            </div>
                                                        </div>
                                                        <div class="icons">
                                                            <span class="icon-section" onclick="getStudentExperience({{$experience->id}})"><span
                                                                    class="icon icon-edit"></span></span>
                                                            <span class="icon-section" onclick="deleteUserExperience({{$experience->id}})"><span
                                                                    class="icon icon-delete-button"></span></span>
                                                        </div>
                                                    </div>    
                                                   </div>
                                               </div>

                                                @endforeach
                                                </div>
                                            </div> -->

                                            <!-- <div class="detail-items">
                                                <div class="title-section">
                                                    <h5 class="title">Certificates*</h5>
                                                    <span class="icon-section"><span class="icon icon-plus"
                                                            data-bs-toggle="modal" href="#certification"></span></span>
                                                </div>
                                                <div class="box-wrapper" id="certificateContainer">
                                                @foreach($student->student_certificates as $student_certificates)
                                                
                                                <div class="detail-items">
                                                <div class="box-wrapper">
                                                <h3 class="name">{{$student_certificates->title}}</h3>

                                                <div class="box-parent">
                                                        <div class="box-wrap">
                                                            <div class="selected-item">
                                                                <span class="icon icon-degree1"></span>
                                                                <span class="icon-name">{{$student_certificates->issuing_organization}}</span>
                                                            </div>
                                                            <div class="selected-item">
                                                                <span class="icon icon-map-icon"></span>
                                                                <span class="icon icon-name">File : <a href="{{$student_certificates->uploaded_file}}" target="_blank">Download</a> </span>
                                                            </div>
                                                        </div>
                                                        <div class="icons">
                                                            <span class="icon-section" onclick="getStudentCertificate({{$student_certificates->id}})"><span
                                                                    class="icon icon-edit"></span></span>
                                                            <span class="icon-section" onclick="deleteUserCertificate({{$student_certificates->id}})"><span
                                                                    class="icon icon-delete-button"></span></span>
                                                        </div>
                                                    </div>    
                                                   </div>
                                               </div>

                                                @endforeach
                                                </div>
                                            </div> -->

                                            
                                            <!-- <div class="detail-items" id="projectsDiv">
                                                <div class="title-section">
                                                    <h5 class="title">Projects*</h5>
                                                    <span class="icon-section" data-bs-toggle="modal"
                                                        href="#projects"><span class="icon icon-plus"></span></span>
                                                </div>
                                                <div class="box-wrapper" id="projectsContainer">
                                                @foreach($student->student_projects as $student_project)
                                               
                                                <div class="detail-items">
                                                <div class="box-wrapper">
                                                <h3 class="name">{{$student_project->project_title}}</h3>

                                                <div class="box-parent">
                                                        <div class="box-wrap">
                                                            <div class="selected-item">
                                                                <span class="icon icon-degree1"></span>
                                                                <span class="icon-name">{{$student_project->project_with}}</span>
                                                            </div>
                                                            <div class="selected-item">
                                                                <span class="icon icon-map-icon"></span>
                                                                <span class="icon icon-name">{{$student_project->project_status}} </span>
                                                            </div>
                                                        </div>
                                                        <div class="icons">
                                                            <span class="icon-section" onclick="getStudentProject({{$student_project->id}})"><span
                                                                    class="icon icon-edit"></span></span>
                                                            <span class="icon-section" onclick="deleteUserProject({{$student_project->id}})"><span
                                                                    class="icon icon-delete-button"></span></span>
                                                        </div>
                                                    </div>    
                                                   </div>
                                               </div>
                                                @endforeach
                                                </div>
                                            </div> -->

                                            <!-- <div class="detail-items mrgB32">
                                                <div class="title-section">
                                                    <h5 class="title">Social links</h5>
                                                    <div class="plus-edit">
                                                        <span class="icon-section"><span class="icon icon-plus"
                                                                data-bs-toggle="modal" href="#media"></span></span>
                                                        
                                                    </div>
                                                </div>
                                                <div class="social-icon">
                                                    <ul class="icon-listdashobard" id="socialContainer">
                                                        @foreach($student->student_social_medias as $student_social_media)
                                                         
                                                        <li>{{$student_social_media->social_media_name}} : <a href="{{$student_social_media->social_media_url}}"></a>
                                                            <div class="plus-edit">
                                                                <span class="icon-section"><span class="icon icon-delete-button"
                                                                        data-bs-toggle="modal"
                                                                        href="#media"></span></span>
                                                                <span class="icon-section" onclick="deleteUserSocialLinks({{$student_social_media->id}})"><span
                                                                        class="icon icon-edit"></span></span>
                                                            </div>
                                                        </li>
                                                        @endforeach
                                                       
                                                    </ul>
                                                </div>
                                            </div> -->
                                           

                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="v-pills-basic-info" role="tabpanel"
                                        aria-labelledby="v-pills-basic-info-tab" tabindex="0"> 
                                        <div class="content-wrapper">
                                           
                                            <div class="detail-items">
                                                <!-- <div class="title-section">
                                                    <h5 class="title">About*</h5>
                                                    <span class="icon-section"><span class="icon icon-edit"
                                                            data-bs-toggle="modal" href="#aboutModal"></span></span>
                                                </div>
                                                <div class="box-wrapper">
                                                    <p class="para-text" id="aboutData">{{$student->description}}</p>
                                                </div> -->

                        <form class="bs-form typ-user-profile typ-basic-info" id="basic-info"> 
                            <h4 class="title fnt18 mrgB18">Basic Information*</h4>
                          
                            <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->p_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>
                            <div class="bs-footer-btn-section typ-user-profile mt-4">
                            <div class="footer-btn">
                            <button class="bs-btn typ-next" type="button" onclick="handleBasicInfoNext()" >Save</button>
                            </div>
                            </div>
                       </form>


                                            </div>
                                            
                                           

                                           
                                       </div>
                                 </div>
                                 <!-- <div class="tab-pane fade" id="v-pills-skills" role="tabpanel"
    aria-labelledby="v-pills-skills-tab" tabindex="0">
    <div class="content-wrapper">
        <div class="detail-items">
            <div class="title-section">
                <h5 class="title">Add Skills</h5>
                <span class="icon-section" data-bs-toggle="modal" href="#skill">
                    <span class="icon icon-edit"></span>
                </span>
            </div>
            <div class="box-wrapper">
                <div class="btn-group-section" id="skillsContainer">
                    @foreach($student->student_skills as $StudentSkill)
                        @if($StudentSkill->Skill) 
                            <span class="skill-btn" onclick="deleteUserSkill({{ $StudentSkill->id }})">
                                {{ $StudentSkill->Skill->skill_name }}
                            </span>
                        @endif
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div> -->
                                     <div class="tab-pane fade" id="v-pills-skills" role="tabpanel"
                                        aria-labelledby="v-pills-skills-tab" tabindex="0">
                                        <div class="content-wrapper">
                                           
                                           <div class="detail-items">
                                                <div class="title-section">
                                                    <h5 class="title">Add Skills</h5>
                                                    <span class="icon-section" data-bs-toggle="modal"
                                                        href="#skill"><span class="icon icon-edit"></span></span>
                                                </div>
                                                <div class="box-wrapper">
                                                    <div class="btn-group-section" id="skillsContainer">
                                                       
                                                       @foreach($student->student_skills as $StudentSkill)
                        @if($StudentSkill->Skill) <!-- Check if the skill exists -->
                            <span class="skill-btn" onclick="deleteUserSkill({{ $StudentSkill->id }})">
                                {{ $StudentSkill->Skill->skill_name }}
                            </span>
                        @endif
                    @endforeach

                                                    </div>
                                                </div>
                                            </div>
                                           
                                          

                                          
                                      </div>
                                     
                                    </div>
                                    <div class="tab-pane fade" id="v-pills-educational" role="tabpanel"
                                        aria-labelledby="v-pills-educational-tab" tabindex="0">
                                    
                                        <div class="content-wrapper">
                                           
                                        <div class="detail-items">
                                                <div class="title-section">
                                                    <h5 class="title">Education*</h5>
                                                    <div class="plus-edit">
                                                        <span class="icon-section"><span class="icon icon-plus"
                                                                data-bs-toggle="modal" href="#eduacation"></span></span>
                                                        
                                                    </div>
                                                </div>
                                                
                                            </div>

                                            <div id="educationContainer">
                                            @foreach($student->student_qualifications as $education)
                                            <div class="detail-items">
                                                <div class="box-wrapper">
                                                <h3 class="name">{{$education->qualification}}</h3>

                                                <div class="box-parent">
                                                        <div class="box-wrap">
                                                            <div class="selected-item">
                                                                <span class="icon icon-degree1"></span>
                                                                <span class="icon-name">{{$education->education->name}}</span>
                                                            </div>
                                                            <div class="selected-item">
                                                                <span class="icon icon-map-icon"></span>
                                                                <span class="icon icon-name">{{$education->location}}</span>
                                                            </div>
                                                        </div>
                                                        <div class="icons">
                                                            <span class="icon-section" onclick="getStudentQualification({{$education->id}})"><span
                                                                    class="icon icon-edit"></span></span>
                                                            <span class="icon-section" onclick="deleteUserQualification({{$education->id}})"><span
                                                                    class="icon icon-delete-button"></span></span>
                                                        </div>
                                                    </div>

                                                   
                                                </div>
                                            </div>
                                            @endforeach
                                        </div>
                                           

                                           
                                       </div>
                                    
                                    </div>
                                    <div class="tab-pane fade" id="v-pills-exprience" role="tabpanel"
                                        aria-labelledby="v-pills-exprience-tab" tabindex="0">
                                    

                                        <div class="content-wrapper">

                                        <div class="detail-items">
                                                <div class="title-section">
                                                    <h5 class="title"> Work Experience</h5>
                                                    <div class="plus-edit">
                                                        <span class="icon-section"><span class="icon icon-plus"
                                                                data-bs-toggle="modal" href="#experience"></span></span>
                                                        
                                                    </div>
                                                </div>

                                                <div id="experienceContainer">
                                                @foreach($student->student_experiences as $experience)
                                                
                                                <div class="detail-items">
                                                <div class="box-wrapper">
                                                <h3 class="name">{{$experience->designition->title}}</h3>

                                                <div class="box-parent">
                                                        <div class="box-wrap">
                                                            <div class="selected-item">
                                                                <span class="icon icon-building1"></span>
                                                                <span class="icon-name">{{$experience->department->department_name}}</span>
                                                            </div>
                                                            <div class="selected-item">
                                                                <span class="icon icon-map-icon"></span>
                                                                <span class="icon icon-name">{{$experience->location}}</span>
                                                            </div>
                                                        </div>
                                                        <div class="icons">
                                                            <span class="icon-section" onclick="getStudentExperience({{$experience->id}})"><span
                                                                    class="icon icon-edit"></span></span>
                                                            <span class="icon-section" onclick="deleteUserExperience({{$experience->id}})"><span
                                                                    class="icon icon-delete-button"></span></span>
                                                        </div>
                                                    </div>    
                                                   </div>
                                               </div>

                                                @endforeach
                                                </div>
                                            </div>

                                        </div>

                                    
                                    </div>
                                    <div class="tab-pane fade" id="v-pills-certificates" role="tabpanel"
                                        aria-labelledby="v-pills-certificates-tab" tabindex="0">
                                    
                                        <div class="content-wrapper">
                                        <div class="detail-items">
                                                <div class="title-section">
                                                    <h5 class="title">Certificates</h5>
                                                    <span class="icon-section"><span class="icon icon-plus"
                                                            data-bs-toggle="modal" href="#certification"></span></span>
                                                </div>
                                                <div class="box-wrapper" id="certificateContainer">
                                                @foreach($student->student_certificates as $student_certificates)
                                                
                                                <div class="detail-items">
                                                <div class="box-wrapper">
                                                <h3 class="name">{{$student_certificates->title}}</h3>

                                                <div class="box-parent">
                                                        <div class="box-wrap">
                                                            <div class="selected-item">
                                                                <span class="icon icon-building1"></span>
                                                                <span class="icon-name">{{$student_certificates->issuing_organization}}</span>
                                                            </div>
                                                            <div class="selected-item">
                                                                <span class="icon icon-download"></span>
                                                                <span class="icon icon-name">File : <a href="{{$student_certificates->uploaded_file}}" target="_blank">Download</a> </span>
                                                            </div>
                                                        </div>
                                                        <div class="icons">
                                                            <span class="icon-section" onclick="getStudentCertificate({{$student_certificates->id}})"><span
                                                                    class="icon icon-edit"></span></span>
                                                            <span class="icon-section" onclick="deleteUserCertificate({{$student_certificates->id}})"><span
                                                                    class="icon icon-delete-button"></span></span>
                                                        </div>
                                                    </div>    
                                                   </div>
                                               </div>

                                                @endforeach
                                                </div>
                                            </div>
                                   </div>
                                    </div>
                                    <div class="tab-pane fade" id="v-pills-projects"   role="tabpanel"
                                        aria-labelledby="v-pills-projects-tab" tabindex="0">
                                        <div class="content-wrapper">

                                        <div class="detail-items" id="projectsDiv">
                                                <div class="title-section">
                                                    <h5 class="title">Projects*</h5>
                                                    <span class="icon-section" data-bs-toggle="modal"
                                                        href="#projects"><span class="icon icon-plus"></span></span>
                                                </div>
                                                <div class="box-wrapper" id="projectsContainer">
                                                @foreach($student->student_projects as $student_project)
                                               
                                                <div class="detail-items">
                                                <div class="box-wrapper">
                                                <h3 class="name">{{$student_project->project_title}}</h3>

                                                <div class="box-parent">
                                                        <div class="box-wrap">
                                                            <div class="selected-item">
                                                                <span class="icon "></span>
                                                                <span class="icon-name">{{$student_project->project_with}}</span>
                                                            </div>
                                                            <div class="selected-item">
                                                                <span class="icon "></span>
                                                                <span class="icon icon-name">{{$student_project->project_status}} </span>
                                                            </div>
                                                        </div>
                                                        <div class="icons">
                                                            <span class="icon-section" onclick="getStudentProject({{$student_project->id}})"><span
                                                                    class="icon icon-edit"></span></span>
                                                            <span class="icon-section" onclick="deleteUserProject({{$student_project->id}})"><span
                                                                    class="icon icon-delete-button"></span></span>
                                                        </div>
                                                    </div>    
                                                   </div>
                                               </div>
                                                @endforeach
                                                </div>
                                            </div>
                                        </div>

                                    
                                    </div>


                                    <div class="tab-pane fade" id="v-pills-social-media"   role="tabpanel"
                                        aria-labelledby="v-pills-projects-tab" tabindex="0">
                                        <div class="content-wrapper">

                                       
                                        <div class="detail-items mrgB32">
                                                <div class="title-section">
                                                    <h5 class="title">Social links</h5>
                                                    <div class="plus-edit">
                                                        <span class="icon-section"><span class="icon icon-plus"
                                                                data-bs-toggle="modal" href="#media"></span></span>
                                                        
                                                    </div>
                                                </div>
                                                <div class="social-icon">
                                                    <ul class="icon-listdashobard" id="socialContainer">
                                                        @foreach($student->student_social_medias as $student_social_media)
                                                         
                                                        <li>{{$student_social_media->social_media_name}} : <a href="{{$student_social_media->social_media_url}}">{{$student_social_media->social_media_url}}</a>
                                                            <div class="plus-edit">
                                                                <span class="icon-section" onclick="getStudentSocialMedia({{$student_social_media->id}})"><span class="icon icon-edit"
                                                                        data-bs-toggle="modal"
                                                                        href="#media"></span></span>
                                                                <span class="icon-section" onclick="deleteUserSocialLinks({{$student_social_media->id}})"><span
                                                                        class="icon icon-delete-button "></span></span>
                                                            </div>
                                                        </li>
                                                        @endforeach
                                                       
                                                    </ul>
                                                </div>
                                            </div>
                                    
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- tabs section end-->

        </main>




        <div class="bs-modal typ-userdashboard" >
            <div class="modal fade"  id="aboutModal" aria-hidden="true" aria-labelledby="aboutLabel" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" id="aboutLabel">About</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <!-- <form action="" id="aboutForm">
                        <div class="modal-body">
                            <p class="content-para"></p>

                            <textarea class="form-control" placeholder="Type here...." id="user_about" name="about"
                                rows="3" style="height: 148px;">{{$student->description}}</textarea>

                              <span class="text-danger" id="aboutError"></span>      
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="bs-btn user-dashboard-btncancel" data-bs-dismiss="modal">Cancel</button>
                            <button type="button" onclick="handleAboutForm()" class="bs-btn user-dashboard-btnsave">Save</button>
                        </div>
                        </form> -->

                       



                    </div>
                </div>
            </div>
        </div>
        <div class="bs-modal typ-userdashboard">
            <div class="modal fade" id="skill" aria-hidden="true" aria-labelledby="skillLabel" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header mrgb-24">
                            <h1 class="modal-title" id="skillLabel">Add Skills</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                       
                        <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"> Skills</label>
                                    <input type="text" class="form-control" name="new_skill" id="skillInput" placeholder="Enter skill">
                                </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 user-dashboard-btncancel" data-bs-dismiss="modal">Cancel</button>

                              <button type="button" class="bs-btn typ-next fnt18" onclick="handleSkillsNext()" >Save</button>
                          </div>
                        </div>
                       </form>
                    </div>
                </div>
            </div>
        </div>


       
        <div class="bs-modal typ-userdashboardeucation">
            <div class="modal fade" id="eduacation" aria-hidden="true" aria-labelledby="eduacationLabel" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header mrgb-24">
                            <h1 class="modal-title" id="eduacationLabel">Add Education</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form class="row" id="educational-details">

                                <input type="number" hidden name="qualification_id" id="qualification_id">

                                <div class="col-md-12">
                                    <div class="form-field">
                                        <label for="exampleFormControlInput1" class="form-label">Qualification*</label>
                                        <input type="text" name="qualification[]" class="form-control input-fieds" id="qualification"
                                            placeholder="Select Qualification">
                                            <span class="text-danger" id="qualification-error"></span>
                                    </div>

                                </div>
                                <div class="col-md-12">
                                    <div class="form-content  mb-2">
                                        <label class="form-label">Degree Type*</label>
                                        <select class="form-select" id="degree_type" name="degree_type[]">
                                             <option value="" selected>Select Degree type</option>
                                            <option value="full">Full Time</option>
                                            <option value="part">Part Time</option>
                                        </select>
                                        <span class="text-danger" id="degree_type-error"></span>
                                    </div>

                                </div>
                                <div class="col-md-12">
                                    <div class="form-content mb-2 ">
                                        <label class="form-label">Degree* </label>
                                        <select class="form-select" id="degree" name="degree[]">
                                           <option value="" selected>Select Degree</option>
                                            @foreach($educations as $education)
                                            <option value="{{$education->id}}">{{$education->name}}</option>
                                            @endforeach
                                        </select>
                                        <span class="text-danger" id="degree-error"></span>
                                    </div>

                                </div>


                                <div class="col-6">
                                    <div class="form-content mb-2 ">
                                        <label class="form-label">Duration*</label>
                                        <div class="input-wrapper">
                                            <input type="date" id="education_start_date" name="start_date[]" autocomplete="off" class="form-control"
                                                placeholder="mm-dd-yyyy">
                                          
                                                <span class="text-danger" id="education_start_date-error"></span>
                                        </div>

                                    </div>

                                </div>
                                <div class="col-6 ">
                                    <div class="form-content mb-2">
                                        <label class="form-label" style="visibility: hidden;">Duration*</label>
                                        <!-- <input type="date" class="form-control" id="year1"> -->
                                        <div class="input-wrapper">
                                            <input type="date"  id="education_end_date" name="end_date[]" autocomplete="off"
                                                class="form-control" placeholder="mm-dd-yyyy">
                                           
                                                <span class="text-danger" id="education_end_date-error"></span>
                                        </div>
                                    </div>

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

                                </div>
                                <div class="col-md-6 ">
                                    <div class="form-field mb-2">
                                        <label for="exampleFormControlInput1" class="form-label">Percentage/CGPA*</label>
                                        <input type="number" id="percentage" name="percentage[]" class="form-control input-fieds" 
                                            placeholder="Percentage/CGPA">
                                            <span class="text-danger" id="percentage-error"></span>
                                    </div>

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

                                </div>
                               
                                <div class="col-md-12">
                                    <div class="form-field">
                                        <label class="form-label">Description (optional)</label>
                                        <textarea class="form-control" name="description[]" id="educationDescription"  rows="3"
                                            style="height: 109px;"></textarea>
                                    </div>
                                </div>

                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="bs-btn user-dashboard-btncancel" data-bs-dismiss="modal">Cancel</button>
                            <button type="button" class="bs-btn user-dashboard-btnsave" onclick="handleEducationDetailsNext()">Save</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bs-modal typ-userdashboardeucation">
            <div class="modal fade" id="experience" aria-hidden="true" aria-labelledby="experienceLabel" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header mrgb-24">
                            <h1 class="modal-title" id="experienceLabel">Work Experience</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form class="row" id="work-experience">

                            <input type="number" hidden name="experience_id" id="experience_id">


                                <h2 class="bs-heading experiancehead">Is this your current employment?*</h2>
                                <div class="bs-custom-radio typ-corpRadio mrgb-32">
                                    <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 class="col-md-12">
                                    <div class="form-content mb-2">
                                        <label for="designation" class="form-label">Designation*</label>
                                        <select class="form-select" id="work_designition" 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>    
                                        <span class="text-danger" id="work_designition-error"></span>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                <div class="form-content mb-2">
                                    <label for="phone" class="form-label">Employment Type*</label>
                                    <select class="form-select" id="work_employee_type" 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>
                                        <span class="text-danger" id="work_employee_type-error"></span>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-content mb-2">
                                    <label for="phone" class="form-label">Department*</label>
                                    <select id="work_department" 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>
                                        <span class="text-danger" id="work_department-error"></span>
                                    </div>
                                </div>


                                <div class="col-md-12">
                                    <div class="form-field mb-2">
                                        <label for="exampleFormControlInput1" class="form-label">Company name*</label>
                                        <input type="text" class="form-control input-fieds" name="company_name[]" id="work_company_name"
                                            placeholder="Company name">
                                            <span class="text-danger" id="work_company_name-error"></span>
                                    </div>

                                </div>
                               
                                <div class="col-6 mrgB24">
                                    <div class="form-content mb-2 ">
                                        <label for="year" class="form-label">Start*</label>
                                        <input type="date" class="form-control" name="start_date[]" id="work_start_date" placeholder="Start Year">
                                        <span class="text-danger" id="work_start_date-error"></span>
                                      </div>
                                </div>
                                <div class="col-6 mrgB24" style="display: none;">
                                    <div class="form-content mb-2 ">
                                    <label for="year" class="form-label">End*</label>
                                        <input type="date" class="form-control" name="end_date[]" id="work_end_date" placeholder="completion year">
                                        <span class="text-danger" id="work_end_date-error"></span>
                                      </div>
                                </div> 

                               <div class="col-md-12 mrgB24">
                                    <div class="form-content mb-2 ">
                                        <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="work_remote">
                                            <label class="form-check-label" for="exampleCheck1">Remote</label>
                                          </div>
                                        </div>                                        
                                        <input type="text" class="form-control col-md-12" name="location[]" id="work_location" aria-describedby="locationHelp" placeholder="Enter Location">
                                        <span class="text-danger" id="work_location-error"></span>
                                    </div>

                                  </div>
                                <div class="col-md-12">
                                    <div class="form-field">
                                        <label class="form-label">Describe your experience in brief</label>
                                        <textarea class="form-control" id="work_description" name="description[]" rows="3"
                                            style="height: 109px;"></textarea>
                                    </div>
                                </div>

                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="bs-btn user-dashboard-btncancel" data-bs-dismiss="modal">Cancel</button>
                            <button type="button" class="bs-btn user-dashboard-btnsave" onclick="handleWorkExperienceNext()" >Save</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bs-modal typ-userdashboardeucation">
            <div class="modal fade" id="certification" aria-hidden="true" aria-labelledby="certificationLabel"
                tabindex="-1">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header mrgb-24">
                            <h1 class="modal-title" id="certificationLabel">Certificates</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form class="row" id="certificates">
                            <input type="number" hidden name="certificate_id" id="certificate_id">

                                <div class="col-md-12">
                                    <div class="form-content mb-2 ">
                                        <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">
                                        <span class="text-danger" id="certificate_title-error"></span>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-content mb-2 ">
                                        <label for="organisation" class="form-label">Issuing Organisation*</label>
                                        <input type="text" class="form-control" name="organisation" id="organisation" placeholder="Organisation">
                                        <span class="text-danger" id="organisation-error"></span>
                                    </div>
                                </div>
                                <div class="col-6">
                                      <div class="form-content mb-2">
                                        <label for="year" class="form-label">Start*</label>
                                        <input type="date" class="form-control" name="start_date" id="certificate_start_date" placeholder="Start Year">
                                        <span class="text-danger" id="start_date3-error"></span>
                                      </div>
                                </div>
                                <div class="col-6 ">
                                     <div class="form-content mb-2">
                                        <label for="year1" class="form-label" style="visibility: hidden;">End*</label>
                                        <input type="date" class="form-control" name="end_date" id="certificate_end_date" placeholder="completion year">
                                        <span class="text-danger" id="end_date3-error"></span>
                                      </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-field">
                                        <label class="form-label">Description (optional)</label>
                                        <textarea class="form-control" id="certificate_description" name="description" rows="3"
                                            style="height: 109px;"></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>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button class="bs-btn user-dashboard-btncancel" data-bs-dismiss="modal">Cancel</button>
                            <button type="button" class="bs-btn user-dashboard-btnsave" onclick="handleCertificatesNext()">Save</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="bs-modal typ-userdashboardeucation">
            <div class="modal fade" id="projects" aria-hidden="true" aria-labelledby="projectsLabel" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header mrgb-24">
                            <h1 class="modal-title" id="projectsLabel">Projects</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form class="row" id="profile_form">

                            <input type="number" hidden name="project_id" id="project_id">

                                <div class="col-md-12">
                                    <div class="form-field">
                                        <label for="exampleFormControlInput1" class="form-label">Project Title*</label>
                                        <input type="text" name="project_title" class="form-control input-fieds" id="project_title"
                                            placeholder="Title of Project">
                                    </div>
                                    <span class="text-danger" id="project_title-error"></span>

                                </div>
                                <div class="col-md-12">
                                    <div class="form-field">
                                        <label for="exampleFormControlInput1" class="form-label">Project with your
                                            employment/education*</label>
                                        <input type="text" name="project_with" class="form-control input-fieds" id="project_with"
                                            placeholder="Select employment/education">
                                    </div>
                                    <span class="text-danger" id="project_with-error"></span>

                                </div>
                                <div class="col-md-12">
                                    <div class="form-field">
                                        <label for="exampleFormControlInput1" class="form-label">Client*</label>
                                        <input type="text" name="client_name" class="form-control input-fieds" id="client_name"
                                            placeholder="Enter client name">
                                    </div>
                                    <span class="text-danger" id="client_name-error"></span>

                                </div>


                                <h2 class="bs-heading experiancehead">Project status</h2>
                                <div class="bs-custom-radio typ-corpRadio mrgb-32">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="project_status"
                                            id="INPROGRESS" value="INPROGRESS" checked="">
                                        <label class="form-check-label" for="inlineRadio2">In Progress</label>
                                    </div>
                                    <div class="form-check ">
                                        <input class="form-check-input" type="radio" name="project_status"
                                            id="FINISHED" value="FINISHED">
                                        <label class="form-check-label" for="inlineRadio3">Finished</label>
                                    </div>
                                </div>

                                <div class="col-6">
                                    <div class="form-content ">
                                        <label class="form-label">Duration*</label>
                                        <div class="input-wrapper">
                                           <input type="date" name="start_date" class="form-control" id="project_start_date" placeholder="Start Year">
                                        </div>
                                         <span class="text-danger" id="project_start_date-error"></span>
                                    </div>
                                </div>
                                <div class="col-6 " id="project_end_date_div" style="display:none;">
                                    <div class="form-content ">
                                        <label class="form-label" style="visibility: hidden;">Duration*</label>
                                        <!-- <input type="date" class="form-control" id="year1"> -->
                                          <div class="input-wrapper">
                                            <input type="date" name="end_date" class="form-control" id="project_end_date" placeholder="Start Year">
                                           </div>
                                           <span class="text-danger" id="project_end_date-error"></span>
                                    </div>
                                </div>


                                <div class="col-md-12">
                                    <div class="form-field">
                                        <label class="form-label">Details of project</label>
                                        <textarea class="form-control" id="project_description" name="project_details" rows="3"
                                            style="height: 109px;"></textarea>
                                    </div>
                                </div>

                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="bs-btn user-dashboard-btncancel" data-bs-dismiss="modal">Cancel</button>
                            <button type="button" class="bs-btn user-dashboard-btnsave" onclick="submitStudentProjects()">Save</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="bs-modal typ-userdashboardeucation">
            <div class="modal fade" id="media" aria-hidden="true" aria-labelledby="mediaLabel" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header mrgb-24">
                            <h1 class="modal-title" id="mediaLabel">Social Media</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form class="row" id="social_form">
                            <input type="number" hidden name="social_media_id" id="social_media_id">

                                <div class="col-md-12">
                                    <div class="form-field">
                                        <label for="exampleFormControlInput1" class="form-label">Social Media*</label>
                                        <input type="text" class="form-control input-fieds" name="social_media_name" id="social_media_name"
                                            placeholder="Enter social profile name">
                                    </div>
                                    <span class="text-danger" id="social_media_name-error"></span>

                                </div>

                                <div class="col-md-12">
                                    <div class="form-field">
                                        <label for="exampleFormControlInput1" class="form-label">Social Media Url*</label>
                                        <input type="text" class="form-control input-fieds" name="social_media_url" id="social_media_url"
                                            placeholder="Enter social profile url">
                                    </div>
                                    <span class="text-danger" id="social_media_url-error"></span>

                                </div>
                              
                               
                               

                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="bs-btn user-dashboard-btncancel" data-bs-dismiss="modal">Cancel</button>
                            <button type="button" class="bs-btn user-dashboard-btnsave" onclick="submitStudentSocialMedia()">Save</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>



    <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 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 studentQualifications = @json($student->student_qualifications);
            var studentExperiences = @json($student->student_experiences);
            var studentCertificates = @json($student->student_certificates);
            var studentProjects = @json($student->student_projects);
            var studentSocialLinks = @json($student->student_social_medias);

            var skills=@json($student->student_skills);


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

    var fileNameWithExtension = file.name;

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

}


//---------------upload profile image function--------------------
function handleProfileImage() {

    var uploadedFile = document.getElementById('imageUpload').files[0];

    var allowedExtensions = ['jpg', 'jpeg', 'png'];

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

    

    var formData = new FormData();

    if (!uploadedFile) {
        return;
    }else{

        if (allowedExtensions.includes(fileExtension)) {
        
            formData.append('photo', uploadedFile);
         }else{
            return;
         }

    }

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

        if(data.status===200){
            updateUserProgress();

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


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

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

    if (!uploadedFile) {
        document.getElementById('uploaded-resume-error').innerText="Please Upload Resume";
        document.getElementById('uploaded-resume-success').innerText="";
        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();


    var maxFileSize = 10 * 1024 * 1024;

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

        return;
    }
    if (allowedExtensions.includes(fileExtension)) {
        formData.append('resume', uploadedFile);
        formData.append('cv_file_name', uploadedFile.name);
        document.getElementById('uploaded-resume-error').innerText="";
        document.getElementById('uploaded-resume-name').innerText=uploadedFile.name;
        document.getElementById('uploaded-resume-name1').innerText=uploadedFile.name;


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

        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){
            updateUserProgress();
            
            document.getElementById('uploaded-resume-success').innerText="Upload success";
            document.getElementById('download_link').href=data.resume;
            updateUserProgress();

                     var resumeTick=document.getElementById('resumeTick');
                     resumeTick.classList.remove('d-none');
    }
      })
    .catch((error) => {
        console.error("error", error);
    });
}


 // =========================Submit about form=======================
        function handleAboutForm(){

            var about = document.getElementById("user_about").value;
          var aboutError = document.getElementById('aboutError');
         var validated = true;

          if (about.trim() === "") {
             aboutError.textContent = "Field is required";
              validated = false;
              } else {
            aboutError.textContent = "";
            }

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

            fetch("{{route('userAbout.update')}}",{
                method:'POST',
                headers:{
                 'X-CSRF-Token':token
                },
                 body:formData
            }).then((response)=>response.json())
            .then((data)=>{

                if(data.status===200){
                    document.getElementById('aboutData').innerHTML=about;
             }
                
            }).catch((error)=>{
                console.log(error);
            })
            $('#aboutModal').modal('hide');
          }
        }
// =========================End Submit about form=======================

// =========================Submit about form=======================

        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("education_start_date").value;
        var end_date = document.getElementById("education_end_date").value;
        var location = document.getElementById("educationLocation").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("education_start_date-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 = "";
        }

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

        var end_dateError = document.getElementById("education_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("education_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){
            
                var container =$("#educationContainer");
                container.empty();
            
                $('#eduacation').modal('hide');
                studentQualifications=data.data;
                console.log("20",studentQualifications)
                data.data.forEach(function (item) {
                    var studentQualification=item;
                
                    var cardHtml = ('<div class="detail-items">'+
                                                '<div class="box-wrapper">'+
                                                '<h3 class="name">'+item.qualification+' </h3>'+
                                                '<div class="box-parent">'+
                                                        '<div class="box-wrap">'+
                                                            '<div class="selected-item">'+
                                                                '<span class="icon icon-degree1"></span>'+
                                                                '<span class="icon-name">'+item.university+'</span>'+
                                                           '</div>'+
                                                            '<div class="selected-item">'+
                                                                '<span class="icon icon-map-icon"></span>'+
                                                                '<span class="icon icon-name">'+item.location+'</span>'+
                                                            '</div>'+
                                                       '</div>'+
                                                        '<div class="icons">'+
                                                            '<span class="icon-section" onclick="getStudentQualification('+item.id+')"><span class="icon icon-edit"></span></span>'+
                                                            '<span class="icon-section" onclick="deleteUserQualification('+item.id+')"><span class="icon icon-delete-button"></span></span>'+
                                                        '</div>'+
                                                    '</div>'+
                                                '</div>'+
                                            '</div>');
                  container.append(cardHtml);
                });
                updateUserProgress();
                if(studentQualifications.length>0){
                     var educationTick=document.getElementById('educationTick');
                     educationTick.classList.remove('d-none');
                  }else{
                     var educationTick=document.getElementById('educationTick');
                       educationTick.classList.add('d-none');
                  }
            }
        }).catch((error)=>{
            console.log(error)
        })
        }
        }
// =========================End Submit Education form=======================


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

function handleWorkExperienceNext(){

var designition = document.getElementById("work_designition").value;
var employee_type = document.getElementById("work_employee_type").value;
var department = document.getElementById("work_department").value;
var start_date = document.getElementById("work_start_date").value;
var end_date = document.getElementById("work_end_date").value;
var location = document.getElementById("work_location").value;
var company_name = document.getElementById("work_company_name").value;
var current_job_yes = document.getElementById("current_job_yes");

var validated=true;


var company_nameError = document.getElementById("work_company_name-error");
if (company_name.trim() === "") {
    company_nameError.innerText = "Company name  is required";
    validated=false;
} else {
    company_nameError.textContent = "";
}
var locationError = document.getElementById("work_location-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("work_end_date-error");

if(current_job_yes.checked ===false){
if (end_date.trim() === "" && current_job_yes) {
    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("work_start_date-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 = "";
}

var departmentError = document.getElementById("work_department-error");
if (department.trim() === "") {
    departmentError.innerText = "Department  is required";
    validated=false;
} else {
    departmentError.textContent = "";
}

var employee_typeError = document.getElementById("work_employee_type-error");
if (employee_type.trim() === "") {
    employee_typeError.innerText = "Employee type  is required";
    validated=false;
} else {
    employee_typeError.textContent = "";
}
var designitionError = document.getElementById("work_designition-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){

        var container =$("#experienceContainer");
                container.empty();
            
                $('#experience').modal('hide');
                studentExperiences=data.data;
                data.data.forEach(function (item) {
                
                  var cardHtml = ('<div class="detail-items">'+
                                                '<div class="box-wrapper">'+
                                                '<h3 class="name">'+item.title+' </h3>'+
                                                '<div class="box-parent">'+
                                                        '<div class="box-wrap">'+
                                                            '<div class="selected-item">'+
                                                                '<span class="icon icon-building1"></span>'+
                                                                '<span class="icon-name">'+item.department_name+'</span>'+
                                                           '</div>'+
                                                            '<div class="selected-item">'+
                                                                '<span class="icon icon-map-icon"></span>'+
                                                                '<span class="icon icon-name">'+item.location+'</span>'+
                                                            '</div>'+
                                                       '</div>'+
                                                        '<div class="icons">'+
                                                            '<span class="icon-section" onclick="getStudentExperience('+item.id+')"><span class="icon icon-edit"></span></span>'+
                                                            '<span class="icon-section" onclick="deleteUserExperience('+item.id+')"><span class="icon icon-delete-button"></span></span>'+
                                                        '</div>'+
                                                    '</div>'+
                                                '</div>'+
                                            '</div>');
                  container.append(cardHtml);

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


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

function handleCertificatesNext(){

var organization = document.getElementById("organisation").value;
var start_date = document.getElementById("certificate_start_date").value;
var end_date = document.getElementById("certificate_end_date").value;
var certificate_title = document.getElementById("certificate_title").value;
var certificate_id = document.getElementById("certificate_id").value;

var validated=true;

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

if(!certificate_id){
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){
        document.getElementById('certificate-file').value = '';
        document.getElementById('certificate-file-name').value='';
        var container =$("#certificateContainer");
                container.empty();
            
                $('#certification').modal('hide');
                studentCertificates=data.data;
                data.data.forEach(function (item) {
                
                  var cardHtml = ('<div class="detail-items">'+
                                                '<div class="box-wrapper">'+
                                                '<h3 class="name">'+item.title+' </h3>'+
                                                '<div class="box-parent">'+
                                                        '<div class="box-wrap">'+
                                                            '<div class="selected-item">'+
                                                                '<span class="icon icon-building1"></span>'+
                                                                '<span class="icon-name">'+item.issuing_organization+'</span>'+
                                                           '</div>'+
                                                            '<div class="selected-item">'+
                                                                '<span class="icon icon-download"></span>'+
                                                                '<span class="icon icon-name">File : <a href="'+item.uploaded_file+'" target="_blank">Download</a> </span>'+
                                                            '</div>'+
                                                       '</div>'+
                                                        '<div class="icons">'+
                                                            '<span class="icon-section" onclick="getStudentCertificate('+item.id+')"><span class="icon icon-edit"></span></span>'+
                                                            '<span class="icon-section" onclick="deleteUserCertificate('+item.id+')"><span class="icon icon-delete-button"></span></span>'+
                                                        '</div>'+
                                                    '</div>'+
                                                '</div>'+
                                            '</div>');
                  container.append(cardHtml);
                });
                updateUserProgress();
    }
}).catch((error)=>{
    console.log(error)
})
}
}



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

function submitStudentProjects(){

var project_title = document.getElementById("project_title").value;
var project_with = document.getElementById("project_with").value;
var client_name = document.getElementById("client_name").value;
var start_date = document.getElementById("project_start_date").value;
var end_date = document.getElementById("project_end_date").value;
var finished=document.getElementById("FINISHED");
var validated=true;




var project_titleError = document.getElementById("project_title-error");
if (project_title.trim() === "") {
    project_titleError.innerText = "Title  is required";
    validated=false;
} else {
    project_titleError.textContent = "";
}

var project_withError = document.getElementById("project_with-error");
if (project_with.trim() === "") {
    project_withError.innerText = "Project with  is required";
    validated=false;
} else {
    project_withError.textContent = "";
}


var client_nameError = document.getElementById("client_name-error");
if (client_name.trim() === "") {
    client_nameError.innerText = "Client name  is required";
    validated=false;
} else {
    client_nameError.textContent = "";
}

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

if(finished.checked===true){
var end_dateError = document.getElementById("project_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 start_dateError = document.getElementById("project_start_date-error");
if (start_date.trim() === "") {
    start_dateError.innerText = "Start date  is required";
    validated=false;
} else {
    start_dateError.textContent = "";
}


if(validated){

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

var formData=new FormData(form);

fetch("{{route('userProject.store')}}",{
    method:'POST',
    headers:{
        'X-CSRF-Token':token
    },
    body:formData
}).then(async(response)=>{
    const data=await response.json();
    if(data.status===200){
        var container =$("#projectsContainer");
                container.empty();
            
                $('#projects').modal('hide');
                studentProjects=data.data;
                data.data.forEach(function (item) {
                
                  var cardHtml = ('<div class="detail-items">'+
                                                '<div class="box-wrapper">'+
                                                '<h3 class="name">'+item.project_title+' </h3>'+
                                                '<div class="box-parent">'+
                                                        '<div class="box-wrap">'+
                                                            '<div class="selected-item">'+
                                                                '<span class="icon "></span>'+
                                                                '<span class="icon-name">'+item.project_with+'</span>'+
                                                           '</div>'+
                                                            '<div class="selected-item">'+
                                                                '<span class="icon "></span>'+
                                                                '<span class="icon icon-name">'+item.project_status+'</span>'+
                                                            '</div>'+
                                                       '</div>'+
                                                        '<div class="icons">'+
                                                            '<span class="icon-section" onclick="getStudentProject('+item.id+')"><span class="icon icon-edit"></span></span>'+
                                                            '<span class="icon-section" onclick="deleteUserProject('+item.id+')"><span class="icon icon-delete-button"></span></span>'+
                                                        '</div>'+
                                                    '</div>'+
                                                '</div>'+
                                            '</div>');
                  container.append(cardHtml);
                });
                updateUserProgress();
    }
}).catch((error)=>{
    console.log(error)
})
}
}


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

var validated=true;

var skills = document.getElementById("skillInput").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){
        var container =$("#skillsContainer");
                container.empty();
            
                $('#skill').modal('hide');
                skills=data.data;
                data.data.forEach(function (item) {
                
                  var cardHtml = ('<span class="skill-btn" onclick="deleteUserSkill('+item.id+')">'+item.skill_name+'</span>');
                  container.append(cardHtml);
                });

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


//--------------Social media  ----------------------

function submitStudentSocialMedia(){

var social_media_name = document.getElementById("social_media_name").value;
var social_media_url = document.getElementById("social_media_url").value;

var validated=true;

var social_media_nameError = document.getElementById("social_media_name-error");
if (social_media_name.trim() === "") {
    social_media_nameError.innerText = "Social media name is required";
    validated=false;
} else {
    social_media_nameError.textContent = "";
}

var social_media_urlError = document.getElementById("social_media_url-error");
if (social_media_url.trim() === "") {
    social_media_urlError.innerText = "Social media url  is required";
    validated=false;
} else {
    social_media_urlError.textContent = "";
}



if(validated){

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

var formData=new FormData(form);

fetch("{{route('userSocialMedia.store')}}",{
    method:'POST',
    headers:{
        'X-CSRF-Token':token
    },
    body:formData
}).then(async(response)=>{
    const data=await response.json();
    if(data.status===200){
        var container =$("#socialContainer");
                container.empty();
            
                $('#media').modal('hide');
                studentSocialLinks=data.data;
                data.data.forEach(function (item) {
                
                    var cardHtml = ('<li>'+item.social_media_name+' : <a href="'+item.social_media_url+'">'+item.social_media_url+'</a>'+
                                                            '<div class="plus-edit">'+
                                                                '<span class="icon-section" onclick="getStudentSocialMedia('+item.id+')"><span class="icon icon-edit"'+
                                                                        'data-bs-toggle="modal" href="#media"></span></span>'+
                                                                '<span class="icon-section" onclick="deleteUserSocialLinks('+item.id+')"><span class="icon icon-delete-button "></span></span>'+
                                                            '</div>'+
                                                        '</li>');
                  container.append(cardHtml);
                });
                updateUserProgress();

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


///////////////////////////Edit qualification ////////////////////////////////////////

function getStudentQualification(educationId){

    var qualification = studentQualifications.find(function(qualification) {
            return  qualification.id === educationId;
        });

        var educationQualification = document.getElementById("qualification").value=qualification.qualification;
        var degree_type = document.getElementById("degree_type").value=qualification.degree_type;
        var degree = document.getElementById("degree").value=qualification.education_id;
        var start_date = document.getElementById("education_start_date").value=qualification.start_date;
        var end_date = document.getElementById("education_end_date").value=qualification.end_date;
        var location = document.getElementById("educationLocation").value=qualification.location;
        var percentage = document.getElementById("percentage").value=qualification.percentage;
        var college = document.getElementById("college").value=qualification.university;
        var qualification_id = document.getElementById("qualification_id").value=qualification.id;

        $('#eduacation').modal('show');
}


///////////////////////////Edit Experiences ////////////////////////////////////////

function getStudentExperience(experienceId){

var experience = studentExperiences.find(function(experience) {
        return  experience.id === experienceId;
    });

        var designition = document.getElementById("work_designition").value=experience.designition_id;
        var employee_type = document.getElementById("work_employee_type").value=experience.employee_type_id;
        var department = document.getElementById("work_department").value=experience.department_id;
        var start_date = document.getElementById("work_start_date").value=experience.start_date;
        var end_date = document.getElementById("work_end_date").value=experience.end_date;
        var location = document.getElementById("work_location").value=experience.location;
        var company_name = document.getElementById("work_company_name").value=experience.organization;
        var current_job_yes = document.getElementById("current_job_yes").checked =Boolean(experience.current_employment);
        var current_job_no = document.getElementById("current_job_no").checked=Boolean(!experience.current_employment);
        var work_remote = document.getElementById("work_remote").checked=Boolean(experience.remote);
        var work_description = document.getElementById("work_description").value=experience.description;
        var experience_id = document.getElementById("experience_id").value=experience.id;

    $('#experience').modal('show');

}


///////////////////////////Edit Certificates ////////////////////////////////////////

function getStudentCertificate(certificateId){

var certificated = studentCertificates.find(function(certificate) {
        return  certificate.id === certificateId;
    });
        var organization = document.getElementById("organisation").value=certificated.issuing_organization;
        var start_date = document.getElementById("certificate_start_date").value=certificated.start_date;
        var end_date = document.getElementById("certificate_end_date").value=certificated.end_date;
        var certificate_title = document.getElementById("certificate_title").value=certificated.title;
        var description = document.getElementById("certificate_description").value=certificated.description;
        var certificate_id = document.getElementById("certificate_id").value=certificated.id;

    $('#certification').modal('show');

}

///////////////////////////Edit Projects ////////////////////////////////////////

function getStudentProject(projectId){

var project = studentProjects.find(function(project) {
        return  project.id === projectId;
    });
    var project_title = document.getElementById("project_title").value=project.project_title;
    var project_with = document.getElementById("project_with").value=project.project_with;
    var client_name = document.getElementById("client_name").value=project.client_name;
    var start_date = document.getElementById("project_start_date").value=project.start_date;
    var end_date = document.getElementById("project_end_date").value=project.end_date;
    var finished = document.getElementById("FINISHED").checked=(project.project_status==="FINISHED");
    var inprogress = document.getElementById("INPROGRESS").checked=(project.project_status==="INPROGRESS");

    var project_description = document.getElementById("project_description").value=project.project_details;
    var project_id = document.getElementById("project_id").value=project.id;

    $('#projects').modal('show');

}

//================edit student social links====================
function getStudentSocialMedia(mediaId){

var sicialMedia = studentSocialLinks.find(function(media) {
        return  media.id === mediaId;
    });
    var social_media_name = document.getElementById("social_media_name").value=sicialMedia.social_media_name;
    var social_media_url = document.getElementById("social_media_url").value=sicialMedia.social_media_url;
    var social_link_id = document.getElementById("social_media_id").value=sicialMedia.id;

    $('#media').modal('show');

}
// ===============delete education=====================================

     function deleteUserQualification(id){
        fetch("{{route('userEducation.delete')}}",{
                method:'POST',
                headers:{
                 'Content-Type':'application/json',
                 'X-CSRF-Token':token
                },
                 body:JSON.stringify({
                    id:id
                 })
            }).then((response)=>response.json())
            .then((data)=>{

                if(data.status===200){
                var container =$("#educationContainer");
                container.empty();
                studentQualifications=data.data;
                data.data.forEach(function (item) {
                    var studentQualification=item;
                
                    var cardHtml = ('<div class="detail-items">'+
                                                '<div class="box-wrapper">'+
                                                '<h3 class="name">'+item.qualification+' </h3>'+
                                                '<div class="box-parent">'+
                                                        '<div class="box-wrap">'+
                                                            '<div class="selected-item">'+
                                                                '<span class="icon icon-degree1"></span>'+
                                                                '<span class="icon-name">'+item.university+'</span>'+
                                                           '</div>'+
                                                            '<div class="selected-item">'+
                                                                '<span class="icon icon-map-icon"></span>'+
                                                                '<span class="icon icon-name">'+item.location+'</span>'+
                                                            '</div>'+
                                                       '</div>'+
                                                        '<div class="icons">'+
                                                            '<span class="icon-section" onclick="getStudentQualification('+item.id+')"><span class="icon icon-edit"></span></span>'+
                                                            '<span class="icon-section" onclick="deleteUserQualification('+item.id+')"><span class="icon icon-delete-button"></span></span>'+
                                                        '</div>'+
                                                    '</div>'+
                                                '</div>'+
                                            '</div>');
                  container.append(cardHtml);
                }); 
                updateUserProgress();
                if(studentQualifications.length>0){
                     var educationTick=document.getElementById('educationTick');
                     educationTick.classList.remove('d-none');
                  }else{
                     var educationTick=document.getElementById('educationTick');
                       educationTick.classList.add('d-none');
                  }
            }
                
            }).catch((error)=>{
                console.log(error);
            })
     }


     // ===============delete experience=====================================

     function deleteUserExperience(id){
        fetch("{{route('userExperience.delete')}}",{
                method:'POST',
                headers:{
                 'Content-Type':'application/json',
                 'X-CSRF-Token':token
                },
                 body:JSON.stringify({
                    id:id
                 })
            }).then((response)=>response.json())
            .then((data)=>{

                if(data.status===200){
                var container =$("#experienceContainer");
                container.empty();
                studentExperiences=data.data;
                data.data.forEach(function (item) {
                
                  var cardHtml = ('<div class="detail-items">'+
                                                '<div class="box-wrapper">'+
                                                '<h3 class="name">'+item.title+' </h3>'+
                                                '<div class="box-parent">'+
                                                        '<div class="box-wrap">'+
                                                            '<div class="selected-item">'+
                                                                '<span class="icon icon-building1"></span>'+
                                                                '<span class="icon-name">'+item.department_name+'</span>'+
                                                           '</div>'+
                                                            '<div class="selected-item">'+
                                                                '<span class="icon icon-map-icon"></span>'+
                                                                '<span class="icon icon-name">'+item.location+'</span>'+
                                                            '</div>'+
                                                       '</div>'+
                                                        '<div class="icons">'+
                                                            '<span class="icon-section" onclick="getStudentExperience('+item.id+')"><span class="icon icon-edit"></span></span>'+
                                                            '<span class="icon-section" onclick="deleteUserExperience('+item.id+')"><span class="icon icon-delete-button"></span></span>'+
                                                        '</div>'+
                                                    '</div>'+
                                                '</div>'+
                                            '</div>');
                  container.append(cardHtml);
                }); 
                updateUserProgress();
            }
                
            }).catch((error)=>{
                console.log(error);
            })
     }


     // ===============delete certificate=====================================

     function deleteUserCertificate(id){
        fetch("{{route('userCertificate.delete')}}",{
                method:'POST',
                headers:{
                 'Content-Type':'application/json',
                 'X-CSRF-Token':token
                },
                 body:JSON.stringify({
                    id:id
                 })
            }).then((response)=>response.json())
            .then((data)=>{

                if(data.status===200){
               var container =$("#certificateContainer");
                container.empty();
                studentCertificates=data.data;
                data.data.forEach(function (item) {
                
                  var cardHtml = ('<div class="detail-items">'+
                                                '<div class="box-wrapper">'+
                                                '<h3 class="name">'+item.title+' </h3>'+
                                                '<div class="box-parent">'+
                                                        '<div class="box-wrap">'+
                                                            '<div class="selected-item">'+
                                                                '<span class="icon icon-building1"></span>'+
                                                                '<span class="icon-name">'+item.issuing_organization+'</span>'+
                                                           '</div>'+
                                                            '<div class="selected-item">'+
                                                                '<span class="icon icon-download"></span>'+
                                                                '<span class="icon icon-name">File : <a href="'+item.uploaded_file+'" target="_blank">Download</a> </span>'+
                                                            '</div>'+
                                                       '</div>'+
                                                        '<div class="icons">'+
                                                            '<span class="icon-section" onclick="getStudentCertificate('+item.id+')"><span class="icon icon-edit"></span></span>'+
                                                            '<span class="icon-section" onclick="deleteUserCertificate('+item.id+')"><span class="icon icon-delete-button"></span></span>'+
                                                        '</div>'+
                                                    '</div>'+
                                                '</div>'+
                                            '</div>');
                  container.append(cardHtml);
                });
                updateUserProgress();
            }
                
            }).catch((error)=>{
                console.log(error);
            })
     }


     // ===============delete Project=====================================

     function deleteUserProject(id){
        fetch("{{route('userProject.delete')}}",{
                method:'POST',
                headers:{
                 'Content-Type':'application/json',
                 'X-CSRF-Token':token
                },
                 body:JSON.stringify({
                    id:id
                 })
            }).then((response)=>response.json())
            .then((data)=>{

                if(data.status===200){
                var container =$("#projectsContainer");
                container.empty();
                studentProjects=data.data;
                data.data.forEach(function (item) {
                
                var cardHtml = ('<div class="detail-items">'+
                                                '<div class="box-wrapper">'+
                                                '<h3 class="name">'+item.project_title+' </h3>'+
                                                '<div class="box-parent">'+
                                                        '<div class="box-wrap">'+
                                                            '<div class="selected-item">'+
                                                                '<span class="icon"></span>'+
                                                                '<span class="icon-name">'+item.project_with+'</span>'+
                                                           '</div>'+
                                                            '<div class="selected-item">'+
                                                                '<span class="icon "></span>'+
                                                                '<span class="icon icon-name">'+item.project_status+'</span>'+
                                                            '</div>'+
                                                       '</div>'+
                                                        '<div class="icons">'+
                                                            '<span class="icon-section" onclick="getStudentProject('+item.id+')"><span class="icon icon-edit"></span></span>'+
                                                            '<span class="icon-section" onclick="deleteUserProject('+item.id+')"><span class="icon icon-delete-button"></span></span>'+
                                                        '</div>'+
                                                    '</div>'+
                                                '</div>'+
                                            '</div>');
                  container.append(cardHtml);
                });
                updateUserProgress();
            }
                
            }).catch((error)=>{
                console.log(error);
            })
     }


     // ===============delete social links=====================================

     function deleteUserSocialLinks(id){
        fetch("{{route('userSocialLink.delete')}}",{
                method:'POST',
                headers:{
                 'Content-Type':'application/json',
                 'X-CSRF-Token':token
                },
                 body:JSON.stringify({
                    id:id
                 })
            }).then((response)=>response.json())
            .then((data)=>{

                if(data.status===200){

                    var container =$("#socialContainer");
                       container.empty();
            
                    $('#media').modal('hide');

                    studentSocialLinks=data.data;
                    data.data.forEach(function (item) {
                
                        var cardHtml = ('<li>'+item.social_media_name+' : <a href="'+item.social_media_url+'">'+item.social_media_url+'</a>'+
                                                            '<div class="plus-edit">'+
                                                                '<span class="icon-section" onclick="getStudentSocialMedia('+item.id+')"><span class="icon icon-edit"'+
                                                                        'data-bs-toggle="modal" href="#media"></span></span>'+
                                                                '<span class="icon-section" onclick="deleteUserSocialLinks('+item.id+')"><span class="icon icon-delete-button "></span></span>'+
                                                            '</div>'+
                                                        '</li>');
              container.append(cardHtml);
            });
            updateUserProgress();
        }
                
            }).catch((error)=>{
                console.log(error);
            })
     }



      // ===============delete skill=====================================

      function deleteUserSkill(id){
        fetch("{{route('userSkill.delete')}}",{
                method:'POST',
                headers:{
                 'Content-Type':'application/json',
                 'X-CSRF-Token':token
                },
                 body:JSON.stringify({
                    id:id
                 })
            }).then((response)=>response.json())
            .then((data)=>{

                if(data.status===200){

                    var skillsContainer=$('#skillsContainer');
                    skillsContainer.empty();

                    data.data.forEach(function(item){
                         var cardHtml=('<span class="skill-btn" onclick="deleteUserSkill('+item.id+')">'+item.skill_name+'</span>');   

                     skillsContainer.append(cardHtml);
                    });
                    updateUserProgress();
            }
                
            }).catch((error)=>{
                console.log(error);
            })
     }



/// reset field data after modal close///////////////////////////
     $(document).ready(function(){
  
         $("#eduacation").on('hide.bs.modal', function(){
         document.getElementById("qualification").value="";
         document.getElementById("degree_type").value="";
         document.getElementById("degree").value="";
         document.getElementById("education_start_date").value="";
         document.getElementById("education_end_date").value="";
         document.getElementById("educationLocation").value="";
         document.getElementById("percentage").value="";
         document.getElementById("college").value="";
         document.getElementById("qualification_id").value="";
         document.getElementById("educationDescription").value="";

        });

        $("#experience").on('hide.bs.modal', function(){
           document.getElementById("work_designition").value="";
           document.getElementById("work_employee_type").value="";
           document.getElementById("work_department").value="";
           document.getElementById("work_start_date").value="";
          document.getElementById("work_end_date").value="";
          document.getElementById("work_location").value="";
          document.getElementById("work_company_name").value="";
          document.getElementById("current_job_yes").checked =true;
         document.getElementById("current_job_no").checked=false;
         document.getElementById("work_remote").checked=false;
         document.getElementById("work_description").value="";
         document.getElementById("experience_id").value="";
         var endDateField = document.getElementById("work_end_date").closest(".col-6");
         endDateField.style.display='none';
        });


        $("#certification").on('hide.bs.modal', function(){
         document.getElementById("organisation").value="";
        document.getElementById("certificate_start_date").value="";
        document.getElementById("certificate_end_date").value="";
         document.getElementById("certificate_title").value="";
        document.getElementById("certificate_description").value="";
         document.getElementById("certificate_id").value="";
        });

        $("#projects").on('hide.bs.modal', function(){
         document.getElementById("project_title").value="";
      document.getElementById("project_with").value="";
       document.getElementById("client_name").value="";
      document.getElementById("project_start_date").value="";
       document.getElementById("project_end_date").value="";
       document.getElementById("FINISHED").checked=false;
       document.getElementById("INPROGRESS").checked=true;
       document.getElementById("project_description").value="";
       document.getElementById("project_id").value="";
       var projectEndDateField = document.getElementById("project_end_date_div");
       projectEndDateField.style.display='none';
        });

        $("#media").on('hide.bs.modal', function(){
         document.getElementById("social_media_name").value="";
      document.getElementById("social_media_url").value="";
       document.getElementById("social_media_id").value="";


     
        });
});



function handleBasicInfoNext() {

    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 emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
var nameRegex = /^[A-Za-z]+$/;

var validated=true;

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 emailError = document.getElementById("email-error");
if (email.trim() === "") {
    emailError.textContent = "Email is required";
    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;
}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){
    document.getElementById("userEmail").innerHTML=email;
    document.getElementById("userPhone").innerHTML=phone;
    document.getElementById("studentCity").innerHTML=city;
    document.getElementById("username").innerHTML=firstName+' '+lastName;
    document.getElementById("updatedDate").innerHTML='Just Now';
    updateUserProgress();
    var basicInfoTick=document.getElementById("basicInfoTick");
    basicInfoTick.classList.remove('d-none');
               var toaster=document.getElementById("popupSuccess");
                  toaster.className="bs-toast";
                  var message=document.getElementById("vwep-message");
                    message.innerText="Saved user information";

                  setTimeout(function() {
                toaster.className = "bs-toast d-none";
            }, 5000);
            

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



document.addEventListener("DOMContentLoaded", function() {
        var currentJobYes = document.getElementById("current_job_yes");
        var endDateField = document.getElementById("work_end_date").closest(".col-6");

        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);
    });


    document.addEventListener("DOMContentLoaded", function() {
        var projectStatusInProgress = document.getElementById("INPROGRESS");
        var projectEndDateField = document.getElementById("project_end_date_div");

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

        projectStatusInProgress.addEventListener("change", toggleEndDateField);

        var projectStatusFinished = document.getElementById("FINISHED");
        projectStatusFinished.addEventListener("change", toggleEndDateField);
    });



    //===================update user progress===================================

    
    function updateUserProgress(){

            fetch("{{route('profileProgress.get')}}",{
                method:"GET",
                headers:{
                    'Content-Type':'application/json',
                    'X-CSRF-Token':token
                },

            }).then((response)=>response.json())
            .then((data)=>{
                console.log("data progres",data)

              var profile_progress_total=  document.getElementById("profile_progress_total");
              profile_progress_total.textContent=data.total_progress+'%';

              var profile_progress_bar=document.getElementById("profile_progress_bar");
              profile_progress_bar.style.width=data.total_progress+'%';

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



            </script>

@endsection