1691 lines
136 KiB
XML
1691 lines
136 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<odoo>
|
|
<template id="employee_bridge_jod_form_template" name="Onboarding Joining Form">
|
|
<t t-call="website.layout">
|
|
<section class="container mt-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-10">
|
|
<div class="card shadow-lg p-4">
|
|
<h1 class="form-header">
|
|
Welcome to
|
|
<t t-esc="website.company_id.name"/>
|
|
</h1>
|
|
<h4 class="form-subHeader">Joining Form</h4>
|
|
<hr/>
|
|
|
|
<form id="post_onboarding_form"
|
|
t-att-action="'/employee_bridge/jod/%s' % (bridge.access_token)" method="post" enctype="multipart/form-data">
|
|
<div>
|
|
<!-- Upload or Capture Photo -->
|
|
<input type="hidden" name="bridge_id" t-att-value="bridge.id"/>
|
|
<input type="hidden" name="employee_id" t-att-value="bridge.employee_id.id"/>
|
|
<input type="hidden" name="candidate_image_base64"/>
|
|
<input type="hidden" name="family_data_json" id="family_data_json"/>
|
|
<input type="hidden" name="education_data_json" id="education_data_json"/>
|
|
<input type="hidden" name="employer_history_data_json"
|
|
id="employer_history_data_json"/>
|
|
<input type="hidden" name="attachments_data_json" id="attachments_data_json"/>
|
|
|
|
<!-- Profile Picture Upload (Similar to res.users) -->
|
|
<div class="mb-3 text-center">
|
|
<!-- Image Preview with Label Click -->
|
|
<label for="candidate_image" style="cursor: pointer;">
|
|
<img id="photo_preview"
|
|
t-att-src="'data:image/png;base64,' + (bridge.candidate_image.decode() if bridge.candidate_image else '')"
|
|
class="rounded-circle shadow"
|
|
style="display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; object-fit: cover; border: 2px solid #ddd; overflow: hidden;"/>
|
|
</label>
|
|
|
|
<!-- Hidden File Input -->
|
|
<input type="file" class="d-none" name="candidate_image" id="candidate_image"
|
|
accept="image/*"/>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="mt-2">
|
|
<button type="button" class="btn btn-sm btn-primary"
|
|
onclick="document.getElementById('candidate_image').click();">
|
|
<i class="fa fa-upload"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-danger" id="delete-photo-btn">
|
|
<i class="fa fa-trash"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-secondary"
|
|
id="preview-photo-btn">
|
|
<i class="fa fa-eye"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Image Preview Modal -->
|
|
<div class="modal fade" id="photoPreviewModal" tabindex="-1"
|
|
aria-labelledby="photoPreviewModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Image Preview</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body text-center">
|
|
<img id="modal_photo_preview" src=""
|
|
class="img-fluid rounded shadow"
|
|
style="max-width: 100%;"/>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary"
|
|
data-bs-dismiss="modal">
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="step-indicator">
|
|
<div class="step-wrapper">
|
|
<span class="step active">1</span>
|
|
<span class="step-label"></span>
|
|
</div>
|
|
<div class="step-line"></div>
|
|
<div class="step-wrapper">
|
|
<span class="step">2</span>
|
|
<span class="step-label"></span>
|
|
</div>
|
|
<div class="step-line"></div>
|
|
<div class="step-wrapper">
|
|
<span class="step">3</span>
|
|
<span class="step-label"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="s_website_form_rows s_col_no_bgcolor steps-container">
|
|
<div class="form-step active">
|
|
<div>
|
|
|
|
<!-- Employee Code & Date of Joining -->
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label">Employee Code</label>
|
|
<input type="text" class="form-control" name="employee_id"
|
|
t-att-value="bridge.employee_code or bridge.employee_id.employee_id"
|
|
readonly="1"/>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Date of Joining</label>
|
|
<input type="date" class="form-control"
|
|
t-att-value="bridge.doj or bridge.employee_id.doj"
|
|
name="doj"/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Full Name Fields -->
|
|
<div class="row mb-3">
|
|
<div class="col-md-4">
|
|
<label class="form-label">Name (As Per Aadhar)</label>
|
|
<input type="text" class="form-control" name="full_name"
|
|
t-att-value="bridge.employee_name or bridge.employee_id.name" readonly="1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Gender & Personal Email -->
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="email">Personal Email
|
|
<span class="text-danger">*</span>
|
|
</label>
|
|
<input type="email" id="email_from" name="email_from"
|
|
class="form-control"
|
|
placeholder="e.g. pranay@example.com" required="1"
|
|
t-att-value="bridge.private_email or bridge.work_email"/>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label class="form-label">Gender
|
|
<span class="text-danger">*</span>
|
|
</label>
|
|
<div class="ms-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="gender"
|
|
id="male"
|
|
value="male" required="1"
|
|
t-att-checked="(bridge.gender or bridge.employee_id.gender) == 'male'"/>
|
|
<label class="form-check-label" for="male">Male</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="gender"
|
|
id="female"
|
|
value="female" required="1"
|
|
t-att-checked="(bridge.gender or bridge.employee_id.gender) == 'female'"/>
|
|
<label class="form-check-label" for="female">Female</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="gender"
|
|
id="other"
|
|
value="other" required="1"
|
|
t-att-checked="(bridge.gender or bridge.employee_id.gender) == 'other'"/>
|
|
<label class="form-check-label" for="other">Other</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Mobile Numbers -->
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label">Mobile Number</label>
|
|
<span class="text-danger">*</span>
|
|
<input type="tel" class="form-control" id="partner_phone"
|
|
name="partner_phone" t-att-value="bridge.mobile_phone or bridge.work_phone"
|
|
required="1"/>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Alternative Mobile Number</label>
|
|
<input type="tel" class="form-control" name="alternate_phone"
|
|
id="alternate_phone"
|
|
t-att-value="bridge.alternate_phone"/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DOB & Blood Group -->
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label">Date of Birth</label>
|
|
<span class="text-danger">*</span>
|
|
<input type="date" class="form-control" name="birthday"
|
|
id="birthday" required="1"
|
|
t-att-value="bridge.birthday or bridge.employee_id.birthday"/>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Blood Group</label>
|
|
<select class="form-control" name="blood_group">
|
|
<option value="">Please Select</option>
|
|
<option value="A+"
|
|
t-att-selected="(bridge.blood_group or bridge.employee_id.blood_group) == 'A+' and 'selected' or None">
|
|
A+
|
|
</option>
|
|
<option value="A-"
|
|
t-att-selected="(bridge.blood_group or bridge.employee_id.blood_group) == 'A-' and 'selected' or None">
|
|
A-
|
|
</option>
|
|
<option value="B+"
|
|
t-att-selected="(bridge.blood_group or bridge.employee_id.blood_group) == 'B+' and 'selected' or None">
|
|
B+
|
|
</option>
|
|
<option value="B-"
|
|
t-att-selected="(bridge.blood_group or bridge.employee_id.blood_group) == 'B-' and 'selected' or None">
|
|
B-
|
|
</option>
|
|
<option value="O+"
|
|
t-att-selected="(bridge.blood_group or bridge.employee_id.blood_group) == 'O+' and 'selected' or None">
|
|
O+
|
|
</option>
|
|
<option value="O-"
|
|
t-att-selected="(bridge.blood_group or bridge.employee_id.blood_group) == 'O-' and 'selected' or None">
|
|
O-
|
|
</option>
|
|
<option value="AB+"
|
|
t-att-selected="(bridge.blood_group or bridge.employee_id.blood_group) == 'AB+' and 'selected' or None">
|
|
AB+
|
|
</option>
|
|
<option value="AB-"
|
|
t-att-selected="(bridge.blood_group or bridge.employee_id.blood_group) == 'AB-' and 'selected' or None">
|
|
AB-
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Present Address -->
|
|
<h5>
|
|
<label>Present Address
|
|
<span class="text-danger">*</span>
|
|
</label>
|
|
</h5>
|
|
<div class="mb-3">
|
|
<input type="text" class="form-control mb-2" name="present_street"
|
|
placeholder="Street Address" required="1"/>
|
|
<input type="text" class="form-control mb-2" name="present_street2"
|
|
placeholder="Street Address 2"/>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<input type="text" class="form-control" name="present_city"
|
|
placeholder="City" required="1"/>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div id="present_state_ids_container"
|
|
t-att-data-country_id="bridge.company_id.country_id.id"
|
|
class="d-flex flex-column gap-3">
|
|
<!-- Skills will be dynamically added here -->
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<input type="number" class="form-control mt-2" name="present_zip"
|
|
placeholder="Zip Code" required="1"/>
|
|
</div>
|
|
|
|
<!-- Permanent Address -->
|
|
<h5>
|
|
<label>Permanent Address
|
|
<span class="text-danger">*</span>
|
|
</label>
|
|
|
|
<!-- Checkbox to toggle same address -->
|
|
<div class="form-check d-inline-block ml-3">
|
|
<input type="checkbox" class="form-check-input permanent-address-checkbox" id="same_as_present"/>
|
|
<label class="form-check-label" for="same_as_present">Same as Present Address</label>
|
|
</div>
|
|
|
|
</h5>
|
|
<div class="mb-3">
|
|
<input type="text" class="form-control mb-2" name="permanent_street"
|
|
placeholder="Street Address" required="1"/>
|
|
<input type="text" class="form-control mb-2" name="permanent_street2"
|
|
placeholder="Street Address 2"/>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<input type="text" class="form-control" name="permanent_city"
|
|
placeholder="City" required="1"/>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<!-- <input type="text" class="form-control" name="permanent_state"-->
|
|
<!-- placeholder="State" required="1"/>-->
|
|
<div id="permanent_state_ids_container"
|
|
t-att-data-country_id="bridge.company_id.country_id.id"
|
|
class="d-flex flex-column gap-3">
|
|
<!-- Skills will be dynamically added here -->
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<input type="number" class="form-control mt-2" name="permanent_zip"
|
|
placeholder="Zip Code" required="1"/>
|
|
</div>
|
|
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
|
|
<label class="form-label">Hire Type
|
|
</label>
|
|
<input class="form-control mb-2" type="text" name="hire_type"
|
|
id="hire_type"
|
|
t-att-value="bridge.emp_type.name"
|
|
readonly="1"/>
|
|
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Marital Status
|
|
<span class="text-danger">*</span>
|
|
</label>
|
|
<div class="ms-3">
|
|
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="marital"
|
|
id="single"
|
|
value="single" required="1"
|
|
t-att-checked="bridge.employee_id.marital == 'single'"/>
|
|
<label class="form-check-label" for="single">Single</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="marital"
|
|
id="married"
|
|
value="married" required="1"
|
|
t-att-checked="bridge.employee_id.marital == 'married'"/>
|
|
<label class="form-check-label" for="married">Married
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="marital"
|
|
id="widower"
|
|
value="widower" required="1"
|
|
t-att-checked="bridge.employee_id.marital == 'widower'"/>
|
|
<label class="form-check-label" for="widower">Widower
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="marital"
|
|
id="divorced"
|
|
value="divorced" required="1"
|
|
t-att-checked="bridge.employee_id.marital == 'divorced'"/>
|
|
<label class="form-check-label" for="divorced">Divorced
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Marriage Anniversary Date -->
|
|
<div class="mb-3" id="marriage_anniversary_date_div">
|
|
<label class="form-label">Marriage Anniversary Date (if applicable)
|
|
</label>
|
|
<input type="date" class="form-control" name="marriage_anniversary_date"
|
|
id="marriage_anniversary_date"/>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<button type="button" class="btn btn-primary next-step">Next
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-step">
|
|
<div>
|
|
<div id="family_details_data">
|
|
<label class="form-label">Family Details
|
|
<span class="text-danger">*</span>
|
|
</label>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered">
|
|
<thead class="thead-light">
|
|
<tr>
|
|
<th class="relation-header"
|
|
style="visibility: hidden; width: 120px;"></th> <!-- Keeps space occupied -->
|
|
<th>Full Name</th>
|
|
<th>Contact No</th>
|
|
<th>Date of Birth</th>
|
|
<th>Location</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="relation-col" value="father">FATHER</td>
|
|
<td>
|
|
<input type="text" name="father_name"
|
|
class="form-control"
|
|
placeholder="Enter full name"/>
|
|
</td>
|
|
<td>
|
|
<input type="number" name="father_contact"
|
|
class="form-control"
|
|
placeholder="Enter contact"/>
|
|
</td>
|
|
<td>
|
|
<input type="date" name="father_dob"
|
|
class="form-control"/>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="father_location"
|
|
class="form-control"
|
|
placeholder="Enter location"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="relation-col" value="mother">MOTHER</td>
|
|
<td>
|
|
<input type="text" name="mother_name"
|
|
class="form-control"
|
|
placeholder="Enter full name"/>
|
|
</td>
|
|
<td>
|
|
<input type="number" name="mother_contact"
|
|
class="form-control"
|
|
placeholder="Enter contact"/>
|
|
</td>
|
|
<td>
|
|
<input type="date" name="mother_dob"
|
|
class="form-control"/>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="mother_location"
|
|
class="form-control"
|
|
placeholder="Enter location"/>
|
|
</td>
|
|
</tr>
|
|
<tr id="family_details_data_spouse">
|
|
<td class="relation-col" value="spouse">SPOUSE</td>
|
|
<td>
|
|
<input type="text" name="spouse_name"
|
|
class="form-control"
|
|
placeholder="Enter full name"/>
|
|
</td>
|
|
<td>
|
|
<input type="number" name="spouse_contact"
|
|
class="form-control"
|
|
placeholder="Enter contact"/>
|
|
</td>
|
|
<td>
|
|
<input type="date" name="spouse_dob"
|
|
class="form-control"/>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="spouse_location"
|
|
class="form-control"
|
|
placeholder="Enter location"/>
|
|
</td>
|
|
</tr>
|
|
<tr id="family_details_data_kid1">
|
|
<td class="relation-col" value="kid1">KID1</td>
|
|
<td>
|
|
<input type="text" name="kid1_name"
|
|
class="form-control"
|
|
placeholder="Enter full name"/>
|
|
</td>
|
|
<td>
|
|
<input type="number" name="kid1_contact"
|
|
class="form-control"
|
|
placeholder="Enter contact"/>
|
|
</td>
|
|
<td>
|
|
<input type="date" name="kid1_dob"
|
|
class="form-control"/>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="kid1_location"
|
|
class="form-control"
|
|
placeholder="Enter location"/>
|
|
</td>
|
|
</tr>
|
|
<tr id="family_details_data_kid2">
|
|
<td class="relation-col" value="kid2">KID2</td>
|
|
<td>
|
|
<input type="text" name="kid2_name"
|
|
class="form-control"
|
|
placeholder="Enter full name"/>
|
|
</td>
|
|
<td>
|
|
<input type="number" name="kid2_contact"
|
|
class="form-control"
|
|
placeholder="Enter contact"/>
|
|
</td>
|
|
<td>
|
|
<input type="date" name="kid2_dob"
|
|
class="form-control"/>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="kid2_location"
|
|
class="form-control"
|
|
placeholder="Enter location"/>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
<br/>
|
|
<div id="education_details_data">
|
|
<label class="form-label">Education Details
|
|
<span class="text-danger">*</span>
|
|
</label>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered">
|
|
<thead class="thead-light">
|
|
<tr>
|
|
<th class="relation-header" style="visibility: hidden;">
|
|
Education Type
|
|
</th>
|
|
<th>Specialization</th>
|
|
<th>University</th>
|
|
<th>Start Year</th>
|
|
<th>End Year</th>
|
|
<th>Marks/Grade</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="education_table_body">
|
|
<!-- Predefined Education Types -->
|
|
<tr>
|
|
<td class="education-relation-col" value="10">10th</td>
|
|
<td>
|
|
<input type="text" name="specialization"
|
|
class="form-control" placeholder="SSC"/>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="university"
|
|
class="form-control"
|
|
placeholder="School Name"/>
|
|
</td>
|
|
<td>
|
|
<input type="number" name="start_year"
|
|
class="form-control"
|
|
placeholder="Enter Start Year"/>
|
|
</td>
|
|
<td>
|
|
<input type="number" name="end_year"
|
|
class="form-control"
|
|
placeholder="Enter End Year"/>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="marks_grade"
|
|
class="form-control"
|
|
placeholder="Enter Marks"/>
|
|
</td>
|
|
<!-- <td>-->
|
|
<!-- <div style="display: flex; align-items: center; gap: 10px;">-->
|
|
<!-- <!– Upload Button –>-->
|
|
<!-- <label style="cursor: pointer; display: flex; align-items: center; background: #f0f0f0; padding: 6px 10px; border-radius: 5px; border: 1px solid #ccc;">-->
|
|
<!-- ⬆️-->
|
|
<!-- <input type="file" class="file-input" name="attachments" accept=".pdf,.jpg,.png" -->
|
|
<!-- multiple="1" style="display: none;"/>-->
|
|
<!-- </label>-->
|
|
|
|
<!-- <!– File Count –>-->
|
|
<!-- <span class="file-count" style="color: gray;">-->
|
|
<!-- 0-->
|
|
<!-- </span>-->
|
|
|
|
<!-- <!– View Attachments Button –>-->
|
|
<!-- <button type="button"-->
|
|
<!-- class="view-attachments-btn"-->
|
|
<!-- style="border: none; background: none; color: #007bff; cursor: pointer;">-->
|
|
<!-- View-->
|
|
<!-- </button>-->
|
|
<!-- </div>-->
|
|
<!-- </td>-->
|
|
|
|
</tr>
|
|
<tr>
|
|
<td class="education-relation-col" value="inter">Inter
|
|
</td>
|
|
<td>
|
|
<input type="text" name="specialization"
|
|
class="form-control"
|
|
placeholder="12th class"/>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="university"
|
|
class="form-control"
|
|
placeholder="College Name"/>
|
|
</td>
|
|
<td>
|
|
<input type="number" name="start_year"
|
|
class="form-control"
|
|
placeholder="Enter Start Year"/>
|
|
</td>
|
|
<td>
|
|
<input type="number" name="end_year"
|
|
class="form-control"
|
|
placeholder="Enter End Year"/>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="marks_grade"
|
|
class="form-control"
|
|
placeholder="Enter Marks"/>
|
|
</td>
|
|
<!-- <td>-->
|
|
<!-- <div style="display: flex; align-items: center; gap: 10px;">-->
|
|
<!-- <!– Upload Button –>-->
|
|
<!-- <label style="cursor: pointer; display: flex; align-items: center; background: #f0f0f0; padding: 6px 10px; border-radius: 5px; border: 1px solid #ccc;">-->
|
|
<!-- ⬆️-->
|
|
<!-- <input type="file" class="file-input" name="attachments" accept=".pdf,.jpg,.png"-->
|
|
<!-- multiple="1" style="display: none;"/>-->
|
|
<!-- </label>-->
|
|
|
|
<!-- <!– File Count –>-->
|
|
<!-- <span class="file-count" style="color: gray;">-->
|
|
<!-- 0-->
|
|
<!-- </span>-->
|
|
|
|
<!-- <!– View Attachments Button –>-->
|
|
<!-- <button type="button"-->
|
|
<!-- class="view-attachments-btn"-->
|
|
<!-- style="border: none; background: none; color: #007bff; cursor: pointer;">-->
|
|
<!-- View-->
|
|
<!-- </button>-->
|
|
<!-- </div>-->
|
|
<!-- </td>-->
|
|
</tr>
|
|
<tr>
|
|
<td class="education-relation-col" value="graduation">
|
|
Graduation
|
|
</td>
|
|
<td>
|
|
<input type="text" name="specialization"
|
|
class="form-control"/>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="university"
|
|
class="form-control"/>
|
|
</td>
|
|
<td>
|
|
<input type="number" name="start_year"
|
|
class="form-control"/>
|
|
</td>
|
|
<td>
|
|
<input type="number" name="end_year"
|
|
class="form-control"/>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="marks_grade"
|
|
class="form-control"/>
|
|
</td>
|
|
<!-- <td>-->
|
|
<!-- <div style="display: flex; align-items: center; gap: 10px;">-->
|
|
<!-- <!– Upload Button –>-->
|
|
<!-- <label style="cursor: pointer; display: flex; align-items: center; background: #f0f0f0; padding: 6px 10px; border-radius: 5px; border: 1px solid #ccc;">-->
|
|
<!-- ⬆️-->
|
|
<!-- <input type="file" class="file-input" name="attachments" accept=".pdf,.jpg,.png"-->
|
|
<!-- multiple="1" style="display: none;"/>-->
|
|
<!-- </label>-->
|
|
|
|
<!-- <!– File Count –>-->
|
|
<!-- <span class="file-count" style="color: gray;">-->
|
|
<!-- 0-->
|
|
<!-- </span>-->
|
|
|
|
<!-- <!– View Attachments Button –>-->
|
|
<!-- <button type="button"-->
|
|
<!-- class="view-attachments-btn"-->
|
|
<!-- style="border: none; background: none; color: #007bff; cursor: pointer;">-->
|
|
<!-- View-->
|
|
<!-- </button>-->
|
|
<!-- </div>-->
|
|
<!-- </td>-->
|
|
</tr>
|
|
<tr>
|
|
<td class="education-relation-col"
|
|
value="post_graduation">Post Graduation
|
|
</td>
|
|
<td>
|
|
<input type="text" name="specialization"
|
|
class="form-control"/>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="university"
|
|
class="form-control"/>
|
|
</td>
|
|
<td>
|
|
<input type="number" name="start_year"
|
|
class="form-control"/>
|
|
</td>
|
|
<td>
|
|
<input type="number" name="end_year"
|
|
class="form-control"/>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="marks_grade"
|
|
class="form-control"/>
|
|
</td>
|
|
<!-- <td>-->
|
|
<!-- <div style="display: flex; align-items: center; gap: 10px;">-->
|
|
<!-- <!– Upload Button –>-->
|
|
<!-- <label style="cursor: pointer; display: flex; align-items: center; background: #f0f0f0; padding: 6px 10px; border-radius: 5px; border: 1px solid #ccc;">-->
|
|
<!-- ⬆️-->
|
|
<!-- <input type="file" class="file-input" name="attachments" accept=".pdf,.jpg,.png"-->
|
|
<!-- multiple="1" style="display: none;"/>-->
|
|
<!-- </label>-->
|
|
|
|
<!-- <!– File Count –>-->
|
|
<!-- <span class="file-count" style="color: gray;">-->
|
|
<!-- 0-->
|
|
<!-- </span>-->
|
|
|
|
<!-- <!– View Attachments Button –>-->
|
|
<!-- <button type="button"-->
|
|
<!-- class="view-attachments-btn"-->
|
|
<!-- style="border: none; background: none; color: #007bff; cursor: pointer;">-->
|
|
<!-- View-->
|
|
<!-- </button>-->
|
|
<!-- </div>-->
|
|
<!-- </td>-->
|
|
</tr>
|
|
<tr>
|
|
<td class="education-relation-col" value="additional">
|
|
Additional Qualification
|
|
</td>
|
|
<td>
|
|
<input type="text" name="specialization"
|
|
class="form-control"/>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="university"
|
|
class="form-control"/>
|
|
</td>
|
|
<td>
|
|
<input type="number" name="start_year"
|
|
class="form-control"/>
|
|
</td>
|
|
<td>
|
|
<input type="number" name="end_year"
|
|
class="form-control"/>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="marks_grade"
|
|
class="form-control"/>
|
|
</td>
|
|
<!-- <td>-->
|
|
<!-- <div style="display: flex; align-items: center; gap: 10px;">-->
|
|
<!-- <!– Upload Button –>-->
|
|
<!-- <label style="cursor: pointer; display: flex; align-items: center; background: #f0f0f0; padding: 6px 10px; border-radius: 5px; border: 1px solid #ccc;">-->
|
|
<!-- ⬆️-->
|
|
<!-- <input type="file" class="file-input" name="attachments" accept=".pdf,.jpg,.png" -->
|
|
<!-- multiple="1" style="display: none;"/>-->
|
|
<!-- </label>-->
|
|
|
|
<!-- <!– File Count –>-->
|
|
<!-- <span class="file-count" style="color: gray;">-->
|
|
<!-- 0-->
|
|
<!-- </span>-->
|
|
|
|
<!-- <!– View Attachments Button –>-->
|
|
<!-- <button type="button"-->
|
|
<!-- class="view-attachments-btn"-->
|
|
<!-- style="border: none; background: none; color: #007bff; cursor: pointer;">-->
|
|
<!-- View-->
|
|
<!-- </button>-->
|
|
<!-- </div>-->
|
|
<!-- </td>-->
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<button type="button" id="add-education-row"
|
|
class="btn btn-primary">Add Education
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Experience
|
|
<span class="text-danger">*</span>
|
|
</label>
|
|
<div class="ms-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="experience"
|
|
id="fresher"
|
|
value="fresher" required="1"
|
|
t-att-checked="bridge.total_exp == 0"/>
|
|
<label class="form-check-label" for="male">Fresher</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="experience"
|
|
id="experienced"
|
|
value="experienced" required="1"
|
|
t-att-checked="bridge.total_exp > 0"/>
|
|
<label class="form-check-label" for="female">Experienced</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<div id="employer_history_data">
|
|
<label class="form-label">Previous Employer Details
|
|
<span class="text-danger">*</span>
|
|
</label>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered">
|
|
<thead class="thead-light">
|
|
<tr>
|
|
<th class="relation-header" style="visibility: hidden;">
|
|
Company details
|
|
</th>
|
|
<th>Company Name</th>
|
|
<th>Designation</th>
|
|
<th>Date of joining</th>
|
|
<th>Last working Day</th>
|
|
<th>CTC</th>
|
|
<!-- <th>Attachments</th>-->
|
|
</tr>
|
|
</thead>
|
|
<tbody id="previous_employer_table_body">
|
|
<!-- Predefined Employer Types -->
|
|
<tr>
|
|
<td class="employer-relation-col" value="10">Current
|
|
Company
|
|
</td>
|
|
<td>
|
|
<input type="text" name="company_name"
|
|
class="form-control"
|
|
placeholder="Company Name"/>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="designation"
|
|
class="form-control"
|
|
placeholder="Designaiton"/>
|
|
</td>
|
|
<td>
|
|
<input type="date" name="doj"
|
|
class="form-control"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<input type="date" name="lwd"
|
|
class="form-control"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="ctc"
|
|
class="form-control"
|
|
placeholder="3.5 LPA"/>
|
|
</td>
|
|
<!-- <td>-->
|
|
<!-- <div style="display: flex; align-items: center; gap: 10px;">-->
|
|
<!-- <!– Upload Button –>-->
|
|
<!-- <label style="cursor: pointer; display: flex; align-items: center; background: #f0f0f0; padding: 6px 10px; border-radius: 5px; border: 1px solid #ccc;">-->
|
|
<!-- ⬆️-->
|
|
<!-- <input type="file" class="employer-file-input" name="employer_attachments" accept=".pdf,.jpg,.png"-->
|
|
<!-- multiple="1" style="display: none;"/>-->
|
|
<!-- </label>-->
|
|
|
|
<!-- <!– File Count –>-->
|
|
<!-- <span class="employer-file-count" style="color: gray;">-->
|
|
<!-- 0-->
|
|
<!-- </span>-->
|
|
|
|
<!-- <!– View Attachments Button –>-->
|
|
<!-- <button type="button"-->
|
|
<!-- class="employer-view-attachments-btn"-->
|
|
<!-- style="border: none; background: none; color: #007bff; cursor: pointer;">-->
|
|
<!-- View-->
|
|
<!-- </button>-->
|
|
<!-- </div>-->
|
|
<!-- </td>-->
|
|
|
|
</tr>
|
|
<tr>
|
|
<td class="employer-relation-col" value="10">Previous
|
|
Company 1
|
|
</td>
|
|
<td>
|
|
<input type="text" name="company_name"
|
|
class="form-control"
|
|
placeholder="Company Name"/>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="designation"
|
|
class="form-control"
|
|
placeholder="Designaiton"/>
|
|
</td>
|
|
<td>
|
|
<input type="date" name="doj"
|
|
class="form-control"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<input type="date" name="lwd"
|
|
class="form-control"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="ctc"
|
|
class="form-control"
|
|
placeholder="3.5 LPA"/>
|
|
</td>
|
|
<!-- <td>-->
|
|
<!-- <div style="display: flex; align-items: center; gap: 10px;">-->
|
|
<!-- <!– Upload Button –>-->
|
|
<!-- <label style="cursor: pointer; display: flex; align-items: center; background: #f0f0f0; padding: 6px 10px; border-radius: 5px; border: 1px solid #ccc;">-->
|
|
<!-- ⬆️-->
|
|
<!-- <input type="file" class="employer-file-input" name="employer_attachments" accept=".pdf,.jpg,.png"-->
|
|
<!-- multiple="1" style="display: none;"/>-->
|
|
<!-- </label>-->
|
|
|
|
<!-- <!– File Count –>-->
|
|
<!-- <span class="employer-file-count" style="color: gray;">-->
|
|
<!-- 0-->
|
|
<!-- </span>-->
|
|
|
|
<!-- <!– View Attachments Button –>-->
|
|
<!-- <button type="button"-->
|
|
<!-- class="employer-view-attachments-btn"-->
|
|
<!-- style="border: none; background: none; color: #007bff; cursor: pointer;">-->
|
|
<!-- View-->
|
|
<!-- </button>-->
|
|
<!-- </div>-->
|
|
<!-- </td>-->
|
|
|
|
</tr>
|
|
<tr>
|
|
<td class="employer-relation-col" value="10">Previous
|
|
Company 2
|
|
</td>
|
|
<td>
|
|
<input type="text" name="company_name"
|
|
class="form-control"
|
|
placeholder="Company Name"/>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="designation"
|
|
class="form-control"
|
|
placeholder="Designaiton"/>
|
|
</td>
|
|
<td>
|
|
<input type="date" name="doj"
|
|
class="form-control"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<input type="date" name="lwd"
|
|
class="form-control"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="ctc"
|
|
class="form-control"
|
|
placeholder="3.5 LPA"/>
|
|
</td>
|
|
<!-- <td>-->
|
|
<!-- <div style="display: flex; align-items: center; gap: 10px;">-->
|
|
<!-- <!– Upload Button –>-->
|
|
<!-- <label style="cursor: pointer; display: flex; align-items: center; background: #f0f0f0; padding: 6px 10px; border-radius: 5px; border: 1px solid #ccc;">-->
|
|
<!-- ⬆️-->
|
|
<!-- <input type="file" class="employer-file-input" name="employer_attachments" accept=".pdf,.jpg,.png"-->
|
|
<!-- multiple="1" style="display: none;"/>-->
|
|
<!-- </label>-->
|
|
|
|
<!-- <!– File Count –>-->
|
|
<!-- <span class="employer-file-count" style="color: gray;">-->
|
|
<!-- 0-->
|
|
<!-- </span>-->
|
|
|
|
<!-- <!– View Attachments Button –>-->
|
|
<!-- <button type="button"-->
|
|
<!-- class="employer-view-attachments-btn"-->
|
|
<!-- style="border: none; background: none; color: #007bff; cursor: pointer;">-->
|
|
<!-- View-->
|
|
<!-- </button>-->
|
|
<!-- </div>-->
|
|
<!-- </td>-->
|
|
|
|
</tr>
|
|
<tr>
|
|
<td class="employer-relation-col" value="10">Previous
|
|
Company 3
|
|
</td>
|
|
<td>
|
|
<input type="text" name="company_name"
|
|
class="form-control"
|
|
placeholder="Company Name"/>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="designation"
|
|
class="form-control"
|
|
placeholder="Designaiton"/>
|
|
</td>
|
|
<td>
|
|
<input type="date" name="doj"
|
|
class="form-control"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<input type="date" name="lwd"
|
|
class="form-control"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="ctc"
|
|
class="form-control"
|
|
placeholder="3.5 LPA"/>
|
|
</td>
|
|
<!-- <td>-->
|
|
<!-- <div style="display: flex; align-items: center; gap: 10px;">-->
|
|
<!-- <!– Upload Button –>-->
|
|
<!-- <label style="cursor: pointer; display: flex; align-items: center; background: #f0f0f0; padding: 6px 10px; border-radius: 5px; border: 1px solid #ccc;">-->
|
|
<!-- ⬆️-->
|
|
<!-- <input type="file" class="employer-file-input" name="employer_attachments" accept=".pdf,.jpg,.png"-->
|
|
<!-- multiple="1" style="display: none;"/>-->
|
|
<!-- </label>-->
|
|
|
|
<!-- <!– File Count –>-->
|
|
<!-- <span class="employer-file-count" style="color: gray;">-->
|
|
<!-- 0-->
|
|
<!-- </span>-->
|
|
|
|
<!-- <!– View Attachments Button –>-->
|
|
<!-- <button type="button"-->
|
|
<!-- class="employer-view-attachments-btn"-->
|
|
<!-- style="border: none; background: none; color: #007bff; cursor: pointer;">-->
|
|
<!-- View-->
|
|
<!-- </button>-->
|
|
<!-- </div>-->
|
|
<!-- </td>-->
|
|
|
|
</tr>
|
|
<tr>
|
|
<td class="employer-relation-col" value="10">Previous
|
|
Company 4
|
|
</td>
|
|
<td>
|
|
<input type="text" name="company_name"
|
|
class="form-control"
|
|
placeholder="Company Name"/>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="designation"
|
|
class="form-control"
|
|
placeholder="Designaiton"/>
|
|
</td>
|
|
<td>
|
|
<input type="date" name="doj"
|
|
class="form-control"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<input type="date" name="lwd"
|
|
class="form-control"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="ctc"
|
|
class="form-control"
|
|
placeholder="3.5 LPA"/>
|
|
</td>
|
|
<!-- <td>-->
|
|
<!-- <div style="display: flex; align-items: center; gap: 10px;">-->
|
|
<!-- <!– Upload Button –>-->
|
|
<!-- <label style="cursor: pointer; display: flex; align-items: center; background: #f0f0f0; padding: 6px 10px; border-radius: 5px; border: 1px solid #ccc;">-->
|
|
<!-- ⬆️-->
|
|
<!-- <input type="file" class="employer-file-input" name="employer_attachments" accept=".pdf,.jpg,.png"-->
|
|
<!-- multiple="1" style="display: none;"/>-->
|
|
<!-- </label>-->
|
|
|
|
<!-- <!– File Count –>-->
|
|
<!-- <span class="employer-file-count" style="color: gray;">-->
|
|
<!-- 0-->
|
|
<!-- </span>-->
|
|
|
|
<!-- <!– View Attachments Button –>-->
|
|
<!-- <button type="button"-->
|
|
<!-- class="employer-view-attachments-btn"-->
|
|
<!-- style="border: none; background: none; color: #007bff; cursor: pointer;">-->
|
|
<!-- View-->
|
|
<!-- </button>-->
|
|
<!-- </div>-->
|
|
<!-- </td>-->
|
|
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<!-- Bank Account details and passport details-->
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label">Bank Account Details
|
|
<span class="text-danger">*</span>
|
|
</label>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered">
|
|
<tbody>
|
|
<tr>
|
|
<td class="relation-col">Your Name as Per Bank</td>
|
|
<td>
|
|
<input type="text" name="full_name_as_in_bank"
|
|
class="form-control" required="1"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="relation-col">Bank Name</td>
|
|
<td>
|
|
<input type="text" name="bank_name"
|
|
class="form-control" required="1"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="relation-col">Branch</td>
|
|
<td>
|
|
<input type="text" name="bank_branch"
|
|
class="form-control" required="1"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="relation-col">Account No</td>
|
|
<td>
|
|
<input type="number" name="bank_account_no"
|
|
class="form-control" required="1"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="relation-col">IFSC Code</td>
|
|
<td>
|
|
<input type="text" name="bank_ifsc_code"
|
|
class="form-control" required="1"/>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label class="form-label">Passport Details
|
|
</label>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered">
|
|
<tbody>
|
|
<tr>
|
|
<td class="relation-col">Passport No</td>
|
|
<td>
|
|
<input type="text" name="passport_no"
|
|
class="form-control"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="relation-col">Start Date</td>
|
|
<td>
|
|
<input type="date" name="passport_start_date"
|
|
class="form-control"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="relation-col">Valid till</td>
|
|
<td>
|
|
<input type="date" name="passport_end_date"
|
|
class="form-control"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="relation-col">Location Issued</td>
|
|
<td>
|
|
<input type="text"
|
|
name="passport_issued_location"
|
|
class="form-control"/>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<!-- PAN No and Aadhar No-->
|
|
<div class="row md-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label">PAN No
|
|
<span class="text-danger">*</span>
|
|
</label>
|
|
<input type="text" class="form-control" name="pan_no" id="pan_no"
|
|
t-att-value="bridge.employee_id.pan_no" required="1"/>
|
|
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Aadhar No
|
|
<span class="text-danger">*</span>
|
|
</label>
|
|
<input type="number" class="form-control" name="identification_id"
|
|
id="identification_id"
|
|
t-att-value="bridge.employee_id.identification_id"
|
|
required="1"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<br/>
|
|
<div class="row md-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label">PF No previous company
|
|
</label>
|
|
<input type="text" class="form-control"
|
|
name="previous_company_pf_no" id="previous_company_pf_no"
|
|
/>
|
|
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">UAN No previous company
|
|
</label>
|
|
<input type="number" class="form-control"
|
|
name="previous_company_uan_no" id="previous_company_uan_no"
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Submit Button -->
|
|
<div class="form-navigation">
|
|
<button type="button" class="btn btn-secondary prev-step">Back
|
|
</button>
|
|
<button type="button" class="btn btn-primary next-step">Next
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-step">
|
|
<div>
|
|
<div class="mt-3">
|
|
<h5>Upload Required Attachments</h5>
|
|
<div t-if="bridge.requested_attachment_ids">
|
|
<div t-foreach="bridge.requested_attachment_ids"
|
|
t-as="attachment">
|
|
<div class="mb-3">
|
|
<label t-esc="attachment.name" class="form-label"/>
|
|
<div class="input-group">
|
|
<label class="btn btn-outline-secondary custom-file-upload">
|
|
Choose Files
|
|
<input type="file"
|
|
class="form-control d-none attachment-input"
|
|
t-att-data-attachment-id="attachment.id"
|
|
multiple="multiple"
|
|
accept="image/*,application/pdf"/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table to display uploaded files -->
|
|
<div t-att-id="'preview_table_container_%s' % attachment.id"
|
|
class="uploaded-files-preview d-none">
|
|
<table class="table table-bordered table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>File Name</th>
|
|
<th>Image (Preview / Upload / Delete)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody t-att-id="'preview_body_%s' % attachment.id"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div t-else="">
|
|
<p>No attachments required.</p>
|
|
</div>
|
|
|
|
<!-- Image Preview Modal -->
|
|
<div class="modal fade" id="attachmentPreviewModal" tabindex="-1"
|
|
aria-labelledby="attachmentPreviewModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Attachment Preview</h5>
|
|
<button type="button" class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body text-center">
|
|
<!-- Image Preview -->
|
|
<img id="modal_attachment_photo_preview" src=""
|
|
class="img-fluid rounded shadow"
|
|
style="max-width: 100%; display: none;"/>
|
|
|
|
<!-- PDF Preview -->
|
|
<iframe id="modal_attachment_pdf_preview" src=""
|
|
width="100%" height="500px"
|
|
style="border: none; display: none;"></iframe>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary"
|
|
data-bs-dismiss="modal">Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-navigation">
|
|
<button type="button" class="btn btn-secondary prev-step">Back
|
|
</button>
|
|
<button type="submit" class="btn btn-primary" id="submit-btn">Submit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</t>
|
|
<style>
|
|
.steps-container {
|
|
width: 100%;
|
|
min-height: 500px; /* Adjust the height */
|
|
padding-top: 30px;
|
|
}
|
|
.form-step {
|
|
display: none;
|
|
width: 100%;
|
|
}
|
|
.form-step.active {
|
|
display: block;
|
|
}
|
|
.scrollable-content {
|
|
max-height: 400px; /* Ensures fixed height */
|
|
overflow-y: auto; /* Enables scrolling when needed */
|
|
overflow-x: hidden; /* Prevents horizontal scrolling */
|
|
}
|
|
|
|
.form-navigation {
|
|
display: flex;
|
|
justify-content: space-between; /* Back button on left, Submit on right */
|
|
align-items: center;
|
|
width: 100%;
|
|
position: relative; /* Change from absolute to relative */
|
|
padding: 20px 0; /* Adds spacing */
|
|
}
|
|
|
|
.next-step {
|
|
margin-left: auto; /* Pushes the Next button to the right end */
|
|
}
|
|
|
|
.prev-step {
|
|
margin-right: auto; /* Pushes the Back button to the left end */
|
|
}
|
|
|
|
|
|
.submit-container {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.step-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
position: relative;
|
|
padding: 20px 20px 20px 20px
|
|
}
|
|
|
|
.step-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.step {
|
|
width: 35px;
|
|
height: 35px;
|
|
border: 2px solid #0260EB;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
color: #0260EB;
|
|
background-color: transparent;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.step.active {
|
|
background-color: #0260EB;
|
|
color: white;
|
|
}
|
|
|
|
.step-label {
|
|
font-size: 14px;
|
|
margin-top: 5px;
|
|
color: #0260EB;
|
|
}
|
|
|
|
.step-line {
|
|
flex: 1;
|
|
height: 3px;
|
|
background-color: #0260EB;
|
|
margin: 0 10px;
|
|
}
|
|
|
|
.skill-card {
|
|
background: #f8f9fa;
|
|
border-radius: 10px;
|
|
padding: 15px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start; /* Align items to the left */
|
|
justify-content: space-between;
|
|
gap: 2px;
|
|
width: 46%; /* Adjust width as needed */
|
|
box-sizing: border-box; /* Ensures padding is included in the width */
|
|
}
|
|
|
|
.skill-info {
|
|
flex-grow: 1;
|
|
min-width: 0; /* Ensures it does not overflow */
|
|
max-width: 60%; /* Adjust the max width if needed */
|
|
}
|
|
|
|
.skill-level-container {
|
|
flex-grow: 1,
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
align-items: flex-start; /* Align to the left */
|
|
justify-content: flex-start;
|
|
max-width: 40%; /* Ensures it does not overflow */
|
|
flex-shrink: 0; /* Prevent shrinking */
|
|
}
|
|
|
|
.skill-level-dropdown {
|
|
width: 100%; /* Make sure the dropdown fills available width */
|
|
max-width: 250px; /* Ensure it doesn't overflow */
|
|
min-width: 0; /* Minimum width for the dropdown */
|
|
}
|
|
|
|
.progress-container {
|
|
position: relative;
|
|
width: 100%; /* Ensure the progress container doesn't overflow */
|
|
}
|
|
|
|
.progress-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: bold;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.progress-text {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.progress {
|
|
background-color: #e0e0e0;
|
|
border-radius: 5px;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* Hide Relation Header but maintain space */
|
|
.relation-header {
|
|
visibility: hidden;
|
|
width: 120px;
|
|
}
|
|
|
|
/* Style Relation Column (Father, Mother, etc.) */
|
|
.relation-col {
|
|
font-weight: bold;
|
|
background-color: #143d5d !important;
|
|
color: #FFFFFFE6 !important;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
width: 120px; /* Fixed width */
|
|
}
|
|
|
|
.education-relation-col {
|
|
font-weight: bold;
|
|
background-color: #143d5d !important;
|
|
color: #FFFFFFE6 !important;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
width: 120px; /* Fixed width */
|
|
}
|
|
|
|
.employer-relation-col {
|
|
font-weight: bold;
|
|
background-color: #143d5d !important;
|
|
color: #FFFFFFE6 !important;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
width: 120px; /* Fixed width */
|
|
}
|
|
|
|
/* Style Table Header */
|
|
.thead-light {
|
|
background-color: #143d5d !important; /* Blue */
|
|
color: #FFFFFFE6 !important;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
let steps = document.querySelectorAll(".form-step");
|
|
let indicators = document.querySelectorAll(".step");
|
|
let lines = document.querySelectorAll(".step-line");
|
|
let nextButtons = document.querySelectorAll(".next-step");
|
|
let prevButtons = document.querySelectorAll(".prev-step");
|
|
let currentStep = 0;
|
|
|
|
// Same as Present Address functionality
|
|
const sameAsPresentCheckbox = document.getElementById('same_as_present');
|
|
const form = document.getElementById('post_onboarding_form');
|
|
|
|
// Add event listener to the checkbox
|
|
sameAsPresentCheckbox.addEventListener('change', function() {
|
|
if (this.checked) {
|
|
// Get present address elements by name (since they don't have IDs)
|
|
const presentStreet = form.querySelector('input[name="present_street"]');
|
|
const presentStreet2 = form.querySelector('input[name="present_street2"]');
|
|
const presentCity = form.querySelector('input[name="present_city"]');
|
|
const presentZip = form.querySelector('input[name="present_zip"]');
|
|
|
|
// Get permanent address elements by name
|
|
const permanentStreet = form.querySelector('input[name="permanent_street"]');
|
|
const permanentStreet2 = form.querySelector('input[name="permanent_street2"]');
|
|
const permanentCity = form.querySelector('input[name="permanent_city"]');
|
|
const permanentZip = form.querySelector('input[name="permanent_zip"]');
|
|
|
|
// Copy values only if both elements exist
|
|
if (permanentStreet && presentStreet) permanentStreet.value = presentStreet.value;
|
|
if (permanentStreet2 && presentStreet2) permanentStreet2.value = presentStreet2.value;
|
|
if (permanentCity && presentCity) permanentCity.value = presentCity.value;
|
|
if (permanentZip && presentZip) permanentZip.value = presentZip.value;
|
|
|
|
// Handle state field
|
|
const presentStateContainer = document.getElementById('present_state_ids_container');
|
|
const permanentStateContainer = document.getElementById('permanent_state_ids_container');
|
|
|
|
// If state dropdowns exist, copy the selected value
|
|
const presentStateSelect = presentStateContainer ? presentStateContainer.querySelector('select') : null;
|
|
const permanentStateSelect = permanentStateContainer ? permanentStateContainer.querySelector('select') : null;
|
|
|
|
if (presentStateSelect && permanentStateSelect) {
|
|
permanentStateSelect.value = presentStateSelect.value;
|
|
}
|
|
|
|
// Make permanent address fields readonly
|
|
[permanentStreet, permanentStreet2, permanentCity, permanentZip].forEach(field => {
|
|
if (field) {
|
|
field.readOnly = true;
|
|
field.classList.add('bg-light');
|
|
}
|
|
});
|
|
|
|
if (permanentStateSelect) {
|
|
permanentStateSelect.disabled = true;
|
|
permanentStateSelect.classList.add('bg-light');
|
|
}
|
|
} else {
|
|
// Make permanent address fields editable but keep the values
|
|
const permanentStreet = form.querySelector('input[name="permanent_street"]');
|
|
const permanentStreet2 = form.querySelector('input[name="permanent_street2"]');
|
|
const permanentCity = form.querySelector('input[name="permanent_city"]');
|
|
const permanentZip = form.querySelector('input[name="permanent_zip"]');
|
|
|
|
[permanentStreet, permanentStreet2, permanentCity, permanentZip].forEach(field => {
|
|
if (field) {
|
|
field.readOnly = false;
|
|
field.classList.remove('bg-light');
|
|
}
|
|
});
|
|
|
|
const permanentStateContainer = document.getElementById('permanent_state_ids_container');
|
|
const permanentStateSelect = permanentStateContainer ? permanentStateContainer.querySelector('select') : null;
|
|
if (permanentStateSelect) {
|
|
permanentStateSelect.disabled = false;
|
|
permanentStateSelect.classList.remove('bg-light');
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
|
|
function updateSteps() {
|
|
// Show/hide step content
|
|
steps.forEach((step, index) => {
|
|
step.classList.toggle("active", index === currentStep);
|
|
});
|
|
|
|
// Update step indicators
|
|
indicators.forEach((indicator, index) => {
|
|
indicator.classList.toggle("active", index <= currentStep);
|
|
});
|
|
|
|
// Update progress lines
|
|
lines.forEach((line, index) => {
|
|
line.style.backgroundColor = index < currentStep ? "#0260EB" : "#ccc";
|
|
});
|
|
|
|
// Enable/Disable buttons based on the step
|
|
prevButtons.forEach(button => button.disabled = currentStep === 0);
|
|
}
|
|
|
|
function validateStep(stepIndex) {
|
|
const currentStepFields = steps[stepIndex].querySelectorAll("input, select, textarea");
|
|
let isValid = true;
|
|
|
|
currentStepFields.forEach(field => {
|
|
if (!field.checkValidity()) {
|
|
isValid = false;
|
|
field.classList.add("is-invalid"); // Bootstrap validation styling
|
|
} else {
|
|
field.classList.remove("is-invalid");
|
|
}
|
|
});
|
|
|
|
return isValid;
|
|
}
|
|
|
|
// Next button logic
|
|
nextButtons.forEach(button => {
|
|
button.addEventListener("click", function () {
|
|
if (validateStep(currentStep)) {
|
|
if (currentStep < steps.length - 1) {
|
|
currentStep++;
|
|
updateSteps();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// Previous button logic
|
|
prevButtons.forEach(button => {
|
|
button.addEventListener("click", function () {
|
|
if (currentStep > 0) {
|
|
currentStep--;
|
|
updateSteps();
|
|
}
|
|
});
|
|
});
|
|
|
|
updateSteps(); // Initialize on page load
|
|
});
|
|
</script>
|
|
</template>
|
|
|
|
|
|
<template id="employee_bridge_thank_you_template" name="Joining Form Thank You">
|
|
<t t-call="website.layout">
|
|
<section class="container mt-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8 text-center">
|
|
<div class="card shadow-lg p-5 border-success">
|
|
<div class="mb-4">
|
|
<i class="fa fa-check-circle fa-3x text-success"></i>
|
|
</div>
|
|
<h2 class="text-success">Thank You, <t t-esc="bridge.employee_name or bridge.employee_id.name"/>!</h2>
|
|
<p class="lead">Your joining details have been submitted successfully.</p>
|
|
<hr/>
|
|
<p class="text-muted">If you need to make any changes, please contact the HR department.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</t>
|
|
</template>
|
|
</odoo>
|