@extends('layouts/layoutMaster')

@section('title', 'Manage Candidate')

@section('vendor-style')
@vite([
'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss',
'resources/assets/vendor/libs/select2/select2.scss',
'resources/assets/vendor/libs/flatpickr/flatpickr.scss',
'resources/assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.scss'
])
@endsection

@section('vendor-script')
@vite([
'resources/assets/vendor/libs/select2/select2.js',
'resources/assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.js',
'resources/assets/vendor/libs/flatpickr/flatpickr.js',
])
@endsection

@section('content')
<style>
    .dataTables_scroll {
        max-height: 200px;
    }

    .floating-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* animation: floatBounce 2.5s ease-in-out infinite; */
    }
/*
    @keyframes floatBounce {
        0%   { transform: translateY(0px); }
        50%  { transform: translateY(-8px); }
        100% { transform: translateY(0px); }
    } */
</style>
@php
  
    $helper = new \App\Helpers\Helpers();
    $common_date_format = $helper->general_setting_data()->date_format ?? 'd-M-y';
    $user_id = auth()->user()->user_id ;
    $auth_id = auth()->user()->id ;
  @endphp
<!-- Lead List Table -->
<div class="card card-action">
    <div class="card-header border-bottom pb-0 mb-0 d-flex align-items-center justify-content-between">
        <div class="d-flex flex-column align-items-start">
            <h5 class="card-title mb-1 text-black">Manage Candidate</h5>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb custom-breadcrumb">
                    <!-- Home -->
                    <li class="breadcrumb-item">
                        <a href="{{ url('/dashboard') }}">
                            <i class="mdi mdi-home"></i> Home
                        </a>
                    </li>
                    <li class="breadcrumb-item" aria-current="page">
                        <a href="javascript:void(0);">
                            <i class="mdi mdi-account-group"></i> HR Management
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        <a href="javascript:void(0);" class="active-link">
                            HR Recruitment
                        </a>
                    </li>
                </ol>
            </nav>
        </div>
        <div class="d-flex justify-content-end align-items-center mb-2 gap-2">
            <a href="javascript:;" class="btn btn-sm fw-bold btn-primary text-white" id="branch_filter" >
                <span><i class="mdi mdi-filter-outline" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Filter"></i></span>
            </a>
            <!--<a href="javascript:;" class="btn btn-sm fw-bold btn-primary text-white" data-bs-toggle="modal" data-bs-target="#kt_modal_create_candidate">-->
            <!--    <span class="me-2"><i class="mdi mdi-plus"></i></span>Add Candidate-->
            <!--</a>-->
        </div>
    </div>
    <div class="card-body">
        <div class="branch_filter mb-4" style="display: none;">
            <div class="row py-1">
                <div class="col-lg-3 mb-2">
                    <label class="text-dark mb-1 fs-6 fw-semibold">Job Role</label>
                    <input type="text" class="form-control" id="job_role_fill" name="job_role_fill"  placeholder="Enter Job Role" value="" oninput="this.value = this.value.replace(/^\w/, function(txt) { return txt.toUpperCase(); });" />
                </div>
                <div class="col-lg-3 mb-2">
                    <label class="text-dark mb-1 fs-6 fw-semibold">Experience</label>
                    <select id="exp_type_filt" name="exp_type_filt" class="select3 form-select">
                        <option value="">All</option>
                        <option value="2">Fresher</option>
                        <option value="3">Experience</option>
                    </select>
                </div>
                
                @if($user_id==0)
                <div class="col-lg-3 mb-2">
                    <label class="text-dark mb-1 fs-6 fw-semibold">Old Resume</label>
                    <select class="select3 form-select" name="old_resume_fill" id="old_resume_fill">
                        <option value="">All</option>
                        <option value="1">Import</option>
                        <option value="0">Not Import</option>
                    </select>
                </div>
                @endif
                
                <div class="col-lg-3 mb-2" id="">
                    <label class="text-dark mb-1 fs-6 fw-semibold">Applied Date</label>
                    <div class="input-group input-group-merge">
                        <span class="input-group-text"><i class="mdi mdi-calendar-month-outline fs-4"></i></span>
                        <input type="text" id="closing_date_filt" name="closing_date_filt" placeholder="Select Date" class="form-control common_datepicker" value="" />
                    </div>
                </div>
                <div class="col-lg-3 mb-2">
                    <label class="text-dark mb-1 fs-6 fw-semibold">Date</label>
                    <select class="select3 form-select" name="dt_fill_issue_rpt" id="dt_fill_issue_rpt" onchange="date_fill_issue_rpt();">
                        <option value="all">All</option>
                        <option value="today">Today</option>
                        <option value="week">This Week</option>
                        <option value="monthly">This Month</option>
                        <option value="custom_date">Custom Date</option>
                    </select>
                </div>
                <div class="col-lg-3 mb-2" id="today_dt_iss_rpt" style="display: none;">
                    <label class="text-dark mb-1 fs-6 fw-semibold">Today</label>
                    <div class="input-group input-group-merge">
                        <span class="input-group-text bg-gray-200"><i class="mdi mdi-calendar-month-outline fs-4"></i></span>
                        <input type="text" id="cus_today_dt_fill" placeholder="Select Date" class="form-control" value="03-Mar-2026" disabled />
                    </div>
                </div>
                <div class="col-lg-3 mb-2" id="week_from_dt_iss_rpt" style="display: none;">
                    <label class="text-dark mb-1 fs-6 fw-semibold">Start Date</label>
                    <div class="input-group input-group-merge">
                        <span class="input-group-text bg-gray-200"><i class="mdi mdi-calendar-month-outline fs-4"></i></span>
                        <input type="text" id="cus_week_st_dt_fill" placeholder="Select Date" class="form-control" value="03-Mar-2026" disabled />
                    </div>
                </div>
                <div class="col-lg-3 mb-2" id="week_to_dt_iss_rpt" style="display: none;">
                    <label class="text-dark mb-1 fs-6 fw-semibold">End Date</label>
                    <div class="input-group input-group-merge">
                        <span class="input-group-text bg-gray-200"><i class="mdi mdi-calendar-month-outline fs-4"></i></span>
                        <input type="text" id="cus_week_ed_dt_fill" placeholder="Select Date" class="form-control" value="03-Mar-2026" disabled />
                    </div>
                </div>
                <div class="col-lg-3 mb-2" id="monthly_dt_iss_rpt" style="display: none;">
                    <label class="text-dark mb-1 fs-6 fw-semibold">This Month</label>
                    <div class="input-group input-group-merge">
                        <span class="input-group-text"><i class="mdi mdi-calendar-month-outline fs-4"></i></span>
                        <input type="text" id="cus_this_month_dt_fill" placeholder="Select Date" class="form-control this_month_dt_fill" value="Mar-2026" />
                    </div>
                </div>
                <div class="col-lg-3 mb-2" id="from_dt_iss_rpt" style="display: none;">
                    <label class="text-dark mb-1 fs-6 fw-semibold">From Date</label>
                    <div class="input-group input-group-merge">
                        <span class="input-group-text"><i class="mdi mdi-calendar-month-outline fs-4"></i></span>
                        <input type="text" id="cus_custom_from_dt_fill" placeholder="Select Date" class="form-control common_datepicker" value="03-Mar-2026" />
                    </div>
                </div>
                <div class="col-lg-3 mb-2" id="to_dt_iss_rpt" style="display: none;">
                    <label class="text-dark mb-1 fs-6 fw-semibold">To Date</label>
                    <div class="input-group input-group-merge">
                        <span class="input-group-text"><i class="mdi mdi-calendar-month-outline fs-4"></i></span>
                        <input type="text" id="cus_custom_to_dt_fill" placeholder="Select Date" class="form-control common_datepicker" value="03-Mar-2026" />
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-end">
                <button type="button" class="btn btn-sm btn-primary fw-semibold fs-6 me-2" class="filterSubmit" id="filterSubmit">Go</button>
                <a href="{{ url('/hr_recruitment/manage_candidate') }}" class="btn btn-sm btn-secondary fw-semibold fs-6">Reset</a>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 mb-2 py-1 rounded bg-label-warning" style="border: 1px solid #fba919; display: none;" id="filter_div">
                <div class="row">
                    <div class="col-lg-4 border-end border-danger">
                        <div class="row">
                            <label class="col-5 fw-semibold fs-6 text-danger">Staff</label>
                            <label class="col-1 fw-semibold fs-6 text-danger">:</label>
                            <label class="col-6 fw-bold fs-6 text-danger">Kanimozhi</label>
                        </div>
                    </div>
                </div>
                <div class="d-flex flex-wrap align-items-center justify-content-end gap-3 py-2">
                    <a href="javascript:void(0)" onclick="clearFilter()"
                    class="btn btn-sm fw-bold text-white" style="background-color: #350501ff">
                        Clear Filter
                    </a>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="d-flex align-items-center justify-content-between mb-4 ">
                    <div>
                        <span>Show</span>
                        <select id="perpage" class="form-select form-select-sm w-75px"
                            onchange="loadThemes(1)">
                            @php $options = [5,10, 25, 100, 500]; @endphp
                            @foreach ($options as $option)
                                <option value="{{ $option }}" {{ $perpage == $option ? 'selected' : '' }}>
                                    {{ $option }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="d-flex align-items-center justify-content-end flex-wrap gap-2">
                        <div class="searchBar">
                            <input type="text" id="search_filter" class="searchQueryInput"
                                placeholder="Search Job Role Name..."
                                value="{{ $search_filter }}"/>
                            
                            <div class="searchAction">
                                <div class="d-flex align-items-center">
                                    <a href="javascript:;"  class="searchSubmit" id="searchSubmit" >
                                        <span class="mdi mdi-magnify fs-4 fw-bold text-primary"  ></span>
                                    </a>
                                    <a href="javascript:;" class="refreshBar" id="refreshSearch" >
                                        <span class="mdi mdi-refresh fs-4 fw-bold text-primary" ></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="table-responsive">
                    <table class="table align-middle table-row-dashed  table-striped table-hover gy-0 gs-1 ">
                        <thead>
                            <tr class="text-start align-top  fw-bold fs-6 gs-0 bg-primary">
                                <th class="min-w-100px">Candidate/Mobile no</th>
                                <th class="min-w-100px">Job Role/Source</th>
                                <th class="min-w-100px">Qualification</th>
                                <th class="min-w-100px">Experience</th>
                                <th class="min-w-100px">Applied Date</th>
                                <th class="min-w-100px">Applicant Status</th>
                                <th class="min-w-80px text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody class="text-black fw-semibold fs-7" id="list-table-body" >
                            <tr class="skeleton-loader" id="skeleton-loader" style="border-left: 5px solid #e2e2e2;">
                                <td class="skeleton-cell">
                                    <div class="skeleton"></div>
                                </td>
                                <td class="skeleton-cell">
                                    <div class="skeleton"></div>
                                </td>
                                <td class="skeleton-cell">
                                    <div class="skeleton"></div>
                                </td>
                                <td class="skeleton-cell">
                                    <div class="skeleton"></div>
                                </td>
                                <td class="skeleton-cell">
                                    <div class="skeleton"></div>
                                </td>
                                <td class="skeleton-cell">
                                <div class="skeleton"></div>
                                </td>
                                <td class="skeleton-cell">
                                <div class="skeleton"></div>
                                </td>
                            </tr>
                            
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="text-center my-3" id="pagination-container">
                <!-- Pagination buttons will appear here -->
            </div>
        </div>
    </div>
</div>



<!--begin::Modal - Delete Staff-->
<div class=" modal fade" id="kt_modal_delete_candidate" tabindex="-1" aria-hidden="true" aria-hidden="true" data-bs-keyboard="false" data-bs-backdrop="static">
    <!--begin::Modal dialog-->
    <div class="modal-dialog modal-m">
        <!--begin::Modal content-->
        <div class="modal-content rounded">
            <div class="swal2-icon swal2-danger swal2-icon-show" style="display: flex;">
                <!-- <div class="swal2-icon-content"><i class="mdi mdi-trash fs-2 text-danger"></i></div> -->
                <div>
                    <i class="fa-solid fa-trash text-danger" style="font-size: 35px;"></i>
                </div>
            </div>
            <div class="swal2-html-container mb-4" id="swal2-html-container" style="display: block;">
                <span id="delete_message">Are you sure you want to delete <br><b class="text-danger">Jayashree Ganesh </b> Candidate ?</span>
            </div>
            <div class="d-flex justify-content-center align-items-center py-8 mb-4">
                <button type="submit" class="btn btn-danger me-3" data-bs-dismiss="modal">Yes,delete!</button>
                <button type="reset" class="btn btn-secondary text-black" data-bs-dismiss="modal">No,cancel</button>
            </div>
        </div>
        <!--end::Modal content-->
    </div>
    <!--end::Modal dialog-->
</div>
<!--end::Modal - Delete Staff-->

<!--begin::Modal - Approve Job Posting-->
<div class=" modal fade" id="kt_modal_select_candidate" tabindex="-1" aria-hidden="true" aria-hidden="true" data-bs-keyboard="false" data-bs-backdrop="static">
    <!--begin::Modal dialog-->
    <div class="modal-dialog modal-m">
        <!--begin::Modal content-->
        <div class="modal-content rounded">
            <div class="swal2-icon swal2-success swal2-icon-show" style="display: flex;">
                <!-- <div class="swal2-icon-content"><i class="mdi mdi-trash fs-2 text-danger"></i></div> -->
                <div>
                    <i class="fa-solid fa-check text-success" style="font-size: 35px;"></i>
                </div>
            </div>
            <div class="swal2-html-container mb-4" id="swal2-html-container" style="display: block;">
                <span id="delete_message">Are you sure you want to select <br><b class="text-success">Jayashree Ganesh </b> Candidate ?</span>
            </div>
            <div class="d-flex justify-content-center align-items-center py-8 mb-4">
                <button type="submit" class="btn btn-success me-3" data-bs-dismiss="modal">Yes,Select!</button>
                <button type="reset" class="btn btn-secondary text-black" data-bs-dismiss="modal">No,cancel</button>
            </div>
        </div>
        <!--end::Modal content-->
    </div>
    <!--end::Modal dialog-->
</div>
<!--end::Modal - Approve Job Posting-->

<!--begin::Modal - Reject Job Posting-->
<div class=" modal fade" id="kt_modal_reject_candidate" tabindex="-1" aria-hidden="true" aria-hidden="true" data-bs-keyboard="false" data-bs-backdrop="static">
    <!--begin::Modal dialog-->
    <div class="modal-dialog modal-m">
        <!--begin::Modal content-->
        <div class="modal-content rounded">
            <div class="swal2-icon swal2-danger swal2-icon-show" style="display: flex;">
                <!-- <div class="swal2-icon-content"><i class="mdi mdi-trash fs-2 text-danger"></i></div> -->
                <div>
                    <i class="fa-solid fa-xmark text-danger" style="font-size: 35px;"></i>
                </div>
            </div>
            <div class="swal2-html-container mb-4" id="swal2-html-container" style="display: block;">
                <span id="delete_message">Are you sure you want to Reject <br><b class="text-danger">Jayashree Ganesh </b> Candidate ?</span>
            </div>
            <div class="d-flex justify-content-center align-items-center py-8 mb-4">
                <button type="submit" class="btn btn-danger me-3" data-bs-dismiss="modal">Yes,Reject!</button>
                <button type="reset" class="btn btn-secondary text-black" data-bs-dismiss="modal">No,cancel</button>
            </div>
        </div>
        <!--end::Modal content-->
    </div>
    <!--end::Modal dialog-->
</div>
<!--end::Modal - Reject Job Posting-->

<!--begin::Modal Create Candidate--->
<div class="modal fade" id="kt_modal_create_candidate" tabindex="-1" aria-hidden="true" data-bs-keyboard="false" data-bs-backdrop="static" data-bs-focus="false">
  <!--begin::Modal dialog-->
  <div class="modal-dialog modal-lg">
      <!--begin::Modal content-->
      <div class="modal-content rounded">
            <!--begin::Modal header-->
            <div class="modal-header d-flex align-items-center justify-content-between border border-bottom-1 pb-0 mb-4">
                <div class="text-center mt-4">
                    <h3 class="text-center text-black">Create Candidate</h3>
                </div>
                <!--begin::Close-->
                <div class="btn btn-sm btn-icon btn-active-color-primary rounded" style="border: 2px solid #000;" data-bs-dismiss="modal">
                    <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                    <span class="svg-icon svg-icon-1">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="#000" xmlns="http://www.w3.org/2000/svg">
                            <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="#000" />
                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="#000" />
                        </svg>
                    </span>
                    <!--end::Svg Icon-->
                </div>
                <!--end::Close-->
            </div>
            <!--end::Modal header-->
            <!--begin::Modal body-->
            <div class="modal-body pt-0 pb-10 px-10 px-xl-20">
                <input type="hidden" id="sts_change_id" name="sts_change_id"/>
                <div class="row mb-3">
                    <div class="col-lg-4 mb-2">
                        <label class="text-black mb-1 fs-6 fw-semibold">Candidate Name<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" placeholder="Enter Candidate Name" />
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="text-black mb-1 fs-6 fw-semibold">Candidate Mobile Number<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" placeholder="Enter Candidate Mobile Number" />
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="text-black mb-1 fs-6 fw-semibold">Candidate Email Id</label>
                        <input type="text" class="form-control" placeholder="Enter Candidate Email Id" />
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="text-black mb-1 fs-6 fw-semibold">Marital Status<span class="text-danger">*</span></label>
                        <select id="martial_status" name="martial_status" class="select3 form-select">
                            <option value="">Select Marital Status</option>
                            <option value="1">Married</option>
                            <option value="2">Unmarried</option>
                            <option value="3">Widow</option>
                            <option value="4">Single Parent</option>
                        </select>
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="text-black mb-1 fs-6 fw-semibold">Source<span class="text-danger">*</span></label>
                        <select id="source_name" name="source_name" class="select3 form-select">
                            <option value="">Select Source</option>
                            <option value="1">Pre Sales</option>
                            <option value="2">Post Sales</option>
                        </select>
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="text-black mb-1 fs-6 fw-semibold">Job Role<span class="text-danger">*</span></label>
                        <select id="job_role_name" name="job_role_name" class="select3 form-select">
                            <option value="">Select Job Role</option>
                            <option value="1">Junior Sales Executive</option>
                            <option value="2">Senior Sales Executive</option>
                            <option value="3">Sales Team Lead</option>
                        </select>
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="text-black mb-1 fs-6 fw-semibold">Qualification<span class="text-danger">*</span></label>
                        <select id="qualification" name="qualification" class="select3 form-select">
                            <option value="">Select Qualification</option>
                            <option value="1">B.A.,</option>
                            <option value="2">B.Sc.,</option>
                            <option value="3">M.Sc.,</option>
                            <option value="4">M.A.,</option>
                            <option value="5">B.E.,</option>
                            <option value="6">M.E.,</option>
                        </select>
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="text-black mb-1 fs-6 fw-semibold">Experience<span class="text-danger">*</span></label>
                        <select id="experience" name="experience" class="select3 form-select">
                            <option value="">Select Experience</option>
                            <option value="1">0-2 years</option>
                            <option value="2">2-4 years</option>
                            <option value="3">4-6 years</option>
                        </select>
                    </div>
                    <div class="col-lg-4 mb-2">
                        <div class="row">
                            <label class="col-lg-12 text-black mb-1 fs-6 fw-semibold">Upload Resume<span class="text-danger">*</span></label>
                            <div class="align-items-sm-center gap-4">
                                <img src="{{asset('assets/egc_images/default_doc.png')}}" alt="user-avatar" class="d-block w-px-100 h-px-100 rounded border border-gray-600 border-solid" id="uploadedlogo" />
                                <div class="button-wrapper">
                                    <div class="d-flex align-items-start mt-2 mb-2">
                                        <label for="upload" class="btn btn-sm btn-primary me-2" tabindex="0" data-bs-toggle="tooltip" data-bs-placement="top" title="Upload Logo">
                                            <i class="mdi mdi-tray-arrow-up"></i>
                                            <input type="file" id="upload" class="file-in" hidden accept="image/png, image/jpeg" />
                                        </label>
                                        <button type="button" class="btn btn-sm btn-outline-danger file-reset" data-bs-toggle="tooltip" data-bs-placement="top" title="Reset Logo">
                                            <i class="mdi mdi-reload"></i>
                                        </button>
                                    </div>
                                    <div class="small">Allowed JPG, PNG. Max size of 800K</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--end::Modal body-->
                <div class="d-flex justify-content-between align-items-center pb-2 mt-4">
                    <button type="reset" class="btn btn-outline-danger text-primary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary me-3" data-bs-dismiss="modal">Create Candidate</button>
                </div>
            </div>
      </div>
      <!--end::Modal content-->
  </div>
  <!--end::Modal dialog-->
</div>
<!--end::Modal - Create Candidate-->

<!--begin::Modal Update Candidate--->
<div class="modal fade" id="kt_modal_update_candidate" tabindex="-1" aria-hidden="true" data-bs-keyboard="false" data-bs-backdrop="static" data-bs-focus="false">
  <!--begin::Modal dialog-->
  <div class="modal-dialog modal-lg">
      <!--begin::Modal content-->
      <div class="modal-content rounded">
            <!--begin::Modal header-->
            <div class="modal-header d-flex align-items-center justify-content-between border border-bottom-1 pb-0 mb-4">
                <div class="text-center mt-4">
                    <h3 class="text-center text-black">Update Candidate</h3>
                </div>
                <!--begin::Close-->
                <div class="btn btn-sm btn-icon btn-active-color-primary rounded" style="border: 2px solid #000;" data-bs-dismiss="modal">
                    <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                    <span class="svg-icon svg-icon-1">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="#000" xmlns="http://www.w3.org/2000/svg">
                            <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="#000" />
                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="#000" />
                        </svg>
                    </span>
                    <!--end::Svg Icon-->
                </div>
                <!--end::Close-->
            </div>
            <!--end::Modal header-->
            <!--begin::Modal body-->
            <div class="modal-body pt-0 pb-10 px-10 px-xl-20">
                <input type="hidden" id="sts_change_id" name="sts_change_id"/>
                <div class="row mb-3">
                    <div class="col-lg-4 mb-2">
                        <label class="text-black mb-1 fs-6 fw-semibold">Candidate Name<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" placeholder="Enter Candidate Name" />
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="text-black mb-1 fs-6 fw-semibold">Candidate Mobile Number<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" placeholder="Enter Candidate Mobile Number" />
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="text-black mb-1 fs-6 fw-semibold">Candidate Email Id</label>
                        <input type="text" class="form-control" placeholder="Enter Candidate Email Id" />
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="text-black mb-1 fs-6 fw-semibold">Marital Status<span class="text-danger">*</span></label>
                        <select id="martial_status_edit" name="martial_status_edit" class="select3 form-select">
                            <option value="">Select Marital Status</option>
                            <option value="1">Married</option>
                            <option value="2">Unmarried</option>
                            <option value="3">Widow</option>
                            <option value="4">Single Parent</option>
                        </select>
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="text-black mb-1 fs-6 fw-semibold">Source<span class="text-danger">*</span></label>
                        <select id="source_name_edit" name="source_name_edit" class="select3 form-select">
                            <option value="">Select Source</option>
                            <option value="1">Pre Sales</option>
                            <option value="2">Post Sales</option>
                        </select>
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="text-black mb-1 fs-6 fw-semibold">Job Role<span class="text-danger">*</span></label>
                        <select id="job_role_name_edit" name="job_role_name_edit" class="select3 form-select">
                            <option value="">Select Job Role</option>
                            <option value="1">Junior Sales Executive</option>
                            <option value="2">Senior Sales Executive</option>
                            <option value="3">Sales Team Lead</option>
                        </select>
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="text-black mb-1 fs-6 fw-semibold">Qualification<span class="text-danger">*</span></label>
                        <select id="qualification_edit" name="qualification_edit" class="select3 form-select">
                            <option value="">Select Qualification</option>
                            <option value="1">B.A.,</option>
                            <option value="2">B.Sc.,</option>
                            <option value="3">M.Sc.,</option>
                            <option value="4">M.A.,</option>
                            <option value="5">B.E.,</option>
                            <option value="6">M.E.,</option>
                        </select>
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="text-black mb-1 fs-6 fw-semibold">Experience<span class="text-danger">*</span></label>
                        <select id="experience_edit" name="experience_edit" class="select3 form-select">
                            <option value="">Select Experience</option>
                            <option value="1">0-2 years</option>
                            <option value="2">2-4 years</option>
                            <option value="3">4-6 years</option>
                        </select>
                    </div>
                    <div class="col-lg-4 mb-2">
                        <div class="row">
                            <label class="col-lg-12 text-black mb-1 fs-6 fw-semibold">Upload Resume<span class="text-danger">*</span></label>
                            <div class="align-items-sm-center gap-4">
                                <img src="{{asset('assets/egc_images/default_doc.png')}}" alt="user-avatar" class="d-block w-px-100 h-px-100 rounded border border-gray-600 border-solid" id="uploadedlogo" />
                                <div class="button-wrapper">
                                    <div class="d-flex align-items-start mt-2 mb-2">
                                        <label for="upload" class="btn btn-sm btn-primary me-2" tabindex="0" data-bs-toggle="tooltip" data-bs-placement="top" title="Upload Logo">
                                            <i class="mdi mdi-tray-arrow-up"></i>
                                            <input type="file" id="upload" class="file-in" hidden accept="image/png, image/jpeg" />
                                        </label>
                                        <button type="button" class="btn btn-sm btn-outline-danger file-reset" data-bs-toggle="tooltip" data-bs-placement="top" title="Reset Logo">
                                            <i class="mdi mdi-reload"></i>
                                        </button>
                                    </div>
                                    <div class="small">Allowed JPG, PNG. Max size of 800K</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--end::Modal body-->
                <div class="d-flex justify-content-between align-items-center pb-2 mt-4">
                    <button type="reset" class="btn btn-outline-danger text-primary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary me-3" data-bs-dismiss="modal">Update Candidate</button>
                </div>
            </div>
      </div>
      <!--end::Modal content-->
  </div>
  <!--end::Modal dialog-->
</div>
<!--end::Modal - Create Candidate-->


<!--begin::Modal Filter--->
<div class="modal fade" id="kt_modal_filter" tabindex="-1" aria-hidden="true" data-bs-keyboard="false" data-bs-backdrop="static" data-bs-focus="false">
  <!--begin::Modal dialog-->
  <div class="modal-dialog modal-lg">
      <!--begin::Modal content-->
      <div class="modal-content rounded">
            <!--begin::Modal header-->
            <div class="modal-header d-flex align-items-center justify-content-between border border-bottom-1 pb-0 mb-4">
                <div class="text-center mt-4">
                    <h3 class="text-center text-black">Filter</h3>
                </div>
                <!--begin::Close-->
                <div class="btn btn-sm btn-icon btn-active-color-primary rounded" style="border: 2px solid #000;" data-bs-dismiss="modal">
                    <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                    <span class="svg-icon svg-icon-1">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="#000" xmlns="http://www.w3.org/2000/svg">
                            <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="#000" />
                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="#000" />
                        </svg>
                    </span>
                    <!--end::Svg Icon-->
                </div>
                <!--end::Close-->
            </div>
            <!--end::Modal header-->
            <!--begin::Modal body-->
            <div class="modal-body pt-0 pb-10 px-10 px-xl-20">
                <input type="hidden" id="sts_change_id" name="sts_change_id"/>
                <div class="row mb-3">
                    <div class="col-lg-4 mb-2">
                        <label class="text-black mb-1 fs-6 fw-semibold">Staff Name /Mobile No<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" placeholder="Enter Staff Name /Mobile No" />
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="text-black mb-1 fs-6 fw-semibold">Company Name<span class="text-danger">*</span></label>
                        <select id="company_name" name="company_name" class="select3 form-select">
                            <option value="">Select Company Name</option>
                            <option value="1">Elysium Techonologies Pvt Ltd</option>
                            <option value="2">Elysium Acadmy</option>
                            <option value="3">Elsyian Inteliigence Business Solution</option>
                        </select>
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="text-black mb-1 fs-6 fw-semibold">Entity Name<span class="text-danger">*</span></label>
                        <select id="entity_name" name="entity_name" class="select3 form-select">
                            <option value="">Select Entity Name</option>
                            <option value="1">Click My Project</option>
                            <option value="2">PhD izone</option>
                            <option value="3">E-Pro</option>
                        </select>
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="text-black mb-1 fs-6 fw-semibold">Department Name<span class="text-danger">*</span></label>
                        <select id="dept_name" name="dept_name" class="select3 form-select">
                            <option value="">Select Department Name</option>
                            <option value="1">Production</option>
                            <option value="2">Sales</option>
                            <option value="3">Internal Management</option>
                        </select>
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="text-black mb-1 fs-6 fw-semibold">Division Name<span class="text-danger">*</span></label>
                        <select id="div_name" name="div_name" class="select3 form-select">
                            <option value="">Select Division Name</option>
                            <option value="1">Pre Sales</option>
                            <option value="2">Post Sales</option>
                        </select>
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="text-black mb-1 fs-6 fw-semibold">Job Role<span class="text-danger">*</span></label>
                        <select id="job_role_name" name="job_role_name" class="select3 form-select">
                            <option value="">Select Job Role</option>
                            <option value="1">Junior Sales Executive</option>
                            <option value="2">Senior Sales Executive</option>
                            <option value="3">Sales Team Lead</option>
                        </select>
                    </div>
                     <div class="col-lg-4 mb-2">
                        <label class="text-dark mb-1 fs-6 fw-semibold">Date</label>
                        <select class="select3 form-select" name="dt_fill_issue_rpt" id="dt_fill_issue_rpt" onchange="date_fill_issue_rpt();">
                            <option value="all">All</option>
                            <option value="today">Today</option>
                            <option value="week">This Week</option>
                            <option value="monthly">This Month</option>
                            <option value="custom_date">Custom Date</option>
                        </select>
                    </div>
                    <div class="col-lg-4 mb-2" id="today_dt_iss_rpt" style="display: none;">
                        <label class="text-dark mb-1 fs-6 fw-semibold">Today</label>
                        <div class="input-group input-group-merge">
                            <span class="input-group-text bg-gray-200"><i class="mdi mdi-calendar-month-outline fs-4"></i></span>
                            <input type="text" id="cus_today_dt_fill" placeholder="Select Date" class="form-control" value="03-Mar-2026" disabled />
                        </div>
                    </div>
                    <div class="col-lg-4 mb-2" id="week_from_dt_iss_rpt" style="display: none;">
                        <label class="text-dark mb-1 fs-6 fw-semibold">Start Date</label>
                        <div class="input-group input-group-merge">
                            <span class="input-group-text bg-gray-200"><i class="mdi mdi-calendar-month-outline fs-4"></i></span>
                            <input type="text" id="cus_week_st_dt_fill" placeholder="Select Date" class="form-control" value="03-Mar-2026" disabled />
                        </div>
                    </div>
                    <div class="col-lg-4 mb-2" id="week_to_dt_iss_rpt" style="display: none;">
                        <label class="text-dark mb-1 fs-6 fw-semibold">End Date</label>
                        <div class="input-group input-group-merge">
                            <span class="input-group-text bg-gray-200"><i class="mdi mdi-calendar-month-outline fs-4"></i></span>
                            <input type="text" id="cus_week_ed_dt_fill" placeholder="Select Date" class="form-control" value="03-Mar-2026" disabled />
                        </div>
                    </div>
                    <div class="col-lg-4 mb-2" id="monthly_dt_iss_rpt" style="display: none;">
                        <label class="text-dark mb-1 fs-6 fw-semibold">This Month</label>
                        <div class="input-group input-group-merge">
                            <span class="input-group-text"><i class="mdi mdi-calendar-month-outline fs-4"></i></span>
                            <input type="text" id="cus_this_month_dt_fill" placeholder="Select Date" class="form-control this_month_dt_fill" value="Mar-2026" />
                        </div>
                    </div>
                    <div class="col-lg-4 mb-2" id="from_dt_iss_rpt" style="display: none;">
                        <label class="text-dark mb-1 fs-6 fw-semibold">From Date</label>
                        <div class="input-group input-group-merge">
                            <span class="input-group-text"><i class="mdi mdi-calendar-month-outline fs-4"></i></span>
                            <input type="text" id="cus_custom_from_dt_fill" placeholder="Select Date" class="form-control" value="03-Mar-2026" />
                        </div>
                    </div>
                    <div class="col-lg-4 mb-2" id="to_dt_iss_rpt" style="display: none;">
                        <label class="text-dark mb-1 fs-6 fw-semibold">To Date</label>
                        <div class="input-group input-group-merge">
                            <span class="input-group-text"><i class="mdi mdi-calendar-month-outline fs-4"></i></span>
                            <input type="text" id="cus_custom_to_dt_fill" placeholder="Select Date" class="form-control" value="03-Mar-2026" />
                        </div>
                    </div>
                </div>
                <!--end::Modal body-->
                <div class="d-flex justify-content-between align-items-center pb-2 mt-4">
                    <!-- <button  type="submit" class="btn btn-primary me-3" id="departure_submit_butt">Yes</button> -->
                    <button type="reset" class="btn btn-outline-danger text-primary" data-bs-dismiss="modal">Reset</button>
                    <button type="button" class="btn btn-primary me-3" id="filter_btn" data-bs-dismiss="modal">Add Filter</button>
                </div>
            </div>
      </div>
      <!--end::Modal content-->
  </div>
  <!--end::Modal dialog-->
</div>
<!--end::Modal - Filter-->


<!--begin::Modal view staff--->
<div class="modal fade" id="kt_modal_view_staff" tabindex="-1" aria-hidden="true" data-bs-keyboard="false" data-bs-backdrop="static" data-bs-focus="false">
  <!--begin::Modal dialog-->
  <div class="modal-dialog modal-xl">
      <!--begin::Modal content-->
      <div class="modal-content rounded" style="background: linear-gradient(225deg, white 20%, #fba919 100%);">
            <!--begin::Close-->
            <div class="d-flex justify-content-end px-2 py-2">
                <div class="btn btn-sm btn-icon btn-active-color-primary rounded" style="border: 2px solid #000;" data-bs-dismiss="modal">
                    <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                    <span class="svg-icon svg-icon-1">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="#000" xmlns="http://www.w3.org/2000/svg">
                            <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="#000" />
                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="#000" />
                        </svg>
                    </span>
                    <!--end::Svg Icon-->
                </div>
            </div>
            <!--end::Close-->
            <!--begin::Modal header-->
            <div class="modal-header d-flex align-items-center justify-content-between border-bottom-1">
                <div class="d-flex flex-column">
                    <div class="row mb-2">
                        <div class="d-flex align-items-center mb-1">
                            <div class="avatar-stack">
                                <img src="{{ asset('assets/egc_images/auth/user_1.png') }}" alt="user-avatar" class="avatar-img" />
                                <img src="{{ asset('assets/egc_images/auth/user_2.png') }}" alt="user-avatar" class="avatar-img" />
                                <img src="{{ asset('assets/egc_images/auth/user_3.png') }}" alt="user-avatar" class="avatar-img" />
                            </div>
                        </div>
                        <h3 class="text-black">View Staff</h3>
                    </div>
                </div>
                <div class="d-flex flex-column">
                    <label class="fs-5 fw-semibold text-primary">Mahesh Kumar</label>
                    <label class="fs-6 fw-semibold text-black">9874587450</label>
                </div>
            </div>
            <!--end::Modal header-->
            <!--begin::Modal body-->
            <div class="modal-body pt-0 pb-10 px-10 px-xl-20 bg-white">
                <input type="hidden" id="sts_change_id" name="sts_change_id"/>
                <div class="row mb-3">
                    <div class="nav-align-top nav-tabs-shadow mb-3">
                        <ul class="nav nav-tabs" role="tablist">
                            <li class="nav-item">
                                <button
                                    type="button"
                                    class="nav-link active"
                                    role="tab"
                                    data-bs-toggle="tab" data-bs-target="#basic_info" aria-controls="basic_info" aria-selected="true">
                                    Basic Details
                                </button>
                            </li>
                            <li class="nav-item">
                                <button
                                    type="button"
                                    class="nav-link"
                                    role="tab"
                                    data-bs-toggle="tab" data-bs-target="#contact_info" aria-controls="contact_info" aria-selected="false">
                                    Contact Details
                                </button>
                            </li>
                            <li class="nav-item">
                                <button
                                    type="button"
                                    class="nav-link" role="tab"
                                    data-bs-toggle="tab" data-bs-target="#work_info" aria-controls="work_info" aria-selected="false">
                                    Work Type
                                </button>
                            </li>
                            <li class="nav-item">
                                <button
                                    type="button"
                                    class="nav-link" role="tab"
                                    data-bs-toggle="tab" data-bs-target="#edu_info" aria-controls="edu_info" aria-selected="false">
                                    Education Details
                                </button>
                            </li>
                            <li class="nav-item">
                                <button
                                    type="button"
                                    class="nav-link" role="tab"
                                    data-bs-toggle="tab" data-bs-target="#Application" aria-controls="Application" aria-selected="false">
                                    Application Details
                                </button>
                            </li>
                            <li class="nav-item">
                                <button
                                    type="button"
                                    class="nav-link" role="tab"
                                    data-bs-toggle="tab" data-bs-target="#StaffCheckList" aria-controls="StaffCheckList" aria-selected="false">
                                    Staff Checklist
                                </button>
                            </li>
                            <li class="nav-item">
                                <button
                                    type="button"
                                    class="nav-link" role="tab"
                                    data-bs-toggle="tab" data-bs-target="#Orientation" aria-controls="Orientation" aria-selected="false">
                                    Orientation
                                </button>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="basic_info" role="tabpanel">
                            <div class="row mb-2">
                                <div class="col-lg-8">
                                    <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Email Id</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">mahesh1602@gmail.com</label>
                                    </div>
                                    <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Date Of Birth</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">09-Jan-2001</label>
                                    </div>
                                    <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Gender</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Male</label>
                                    </div>
                                    <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Father Name</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Saravanen</label>
                                    </div>
                                    <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Father Occupation</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Bank Manager</label>
                                    </div>
                                    <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Mother Name</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Nila</label>
                                    </div>
                                    <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Mother Occupation</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Developer</label>
                                    </div>
                                    <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Mother Tongue</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Tamil</label>
                                    </div>
                                    <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Languages Known</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Tamil , English</label>
                                    </div>
                                    <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Marital Status</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Married</label>
                                    </div>
                                    <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Children</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Yes, Studying 5th Grade</label>
                                    </div>
                                    <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Siblings</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">No</label>
                                    </div>
                                    <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Hobby</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Drawing , Shooting ,Story Writing </label>
                                    </div>
                                    <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Description</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">-</label>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="symbol symbol-35px me-2">
                                        <div class="image-input image-input-circle" data-kt-image-input="true" >
                                            <img src="{{ asset('assets/egc_images/auth/user_2.png') }}"
                                                alt="user-avatar"  class="w-px-150 h-auto rounded-circle"
                                                id="uploadedlogo" style="border: 2px solid #ab2b22;"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                  <div class="row">

                                    <div class="divider text-start-center">
                                      <div class="divider-text fs-5 text-primary fw-semibold my-2">Company Details</div>
                                    </div>

                                  <div class="col-lg-6">
                                    <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Company Details</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Management</label>
                                    </div>
                                  </div>

                                  <div class="col-lg-6">
                                    <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Department</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">HR Management</label>
                                    </div>
                                  </div>


                                  <div class="col-lg-6">
                                    <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Division</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">HR Operation</label>
                                    </div>
                                  </div>

                                  <div class="col-lg-6">
                                    <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Job Role</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">HR Executive</label>
                                    </div>
                                  </div>

                                  <div class="divider text-start-center">
                                      <div class="divider-text fs-5 text-primary fw-semibold my-2">Designation Details</div>
                                  </div>

                                  <div class="col-lg-6">
                                    <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Pseudo Name</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Nick</label>
                                    </div>
                                  </div>
                                  <div class="col-lg-6">
                                    <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Date Of Joining</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">07-Oct-2025</label>
                                    </div>
                                  </div>
                                  <div class="col-lg-6">
                                    <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Basic Salary</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-danger">₹ 20,000</label>
                                    </div>
                                  </div>
                                  <div class="col-lg-6">
                                     <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Per Hour Cost</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-danger">₹ 100</label>
                                    </div>
                                  </div>
                                  <div class="col-lg-6">
                                    <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Skill Tag</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Leadership , Management , Postive</label>
                                    </div>
                                  </div>

                                    <div class="divider text-start-center">
                                      <div class="divider-text fs-5 text-primary fw-semibold my-2">Login Credentials</div>
                                    </div>


                                    <div class="col-lg-6">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Username</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">nick</label>
                                    </div>
                                    </div>
                                    <div class="col-lg-6">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Password</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">nick123</label>
                                    </div>
                                    </div>

                                    <div class="divider text-start-center">
                                      <div class="divider-text fs-5 text-primary fw-semibold my-2">Other Credentials</div>
                                    </div>

                                    <h5 class="title fw-bold mt-2 text-warning">Teams Credentials</h5>

                                    <div class="col-lg-6">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Username</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">nick</label>
                                      </div>
                                    </div>

                                    <div class="col-lg-6">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Password</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">nick123</label>
                                      </div>
                                    </div>

                                    <div class="col-lg-6">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">URL</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">
                                          <a class="text-truncate max-w-150px" href="http://192.168.3.98:5080/hr_enroll/manage_staff/add_staff">-</a>
                                        </label>
                                      </div>
                                    </div>

                                    <div class="col-lg-6">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Description</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">-</label>
                                      </div>

                                    </div>

                                    <h5 class="title fw-bold mt-2 text-warning">Firewall Credentials</h5>

                                    <div class="col-lg-6">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Username</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">nick</label>
                                      </div>
                                    </div>

                                    <div class="col-lg-6">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Password</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">nick123</label>
                                      </div>
                                    </div>

                                    <div class="col-lg-6">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">URL</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">
                                          <a class="text-truncate max-w-150px" href="http://192.168.3.98:5080/hr_enroll/manage_staff/add_staff">-</a>
                                        </label>
                                      </div>
                                    </div>

                                    <div class="col-lg-6">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Description</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">-</label>
                                      </div>

                                    </div>

                                    <h5 class="title fw-bold mt-2 text-warning">Firewall Credentials</h5>

                                    <div class="col-lg-6">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Username</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">nick</label>
                                      </div>
                                    </div>

                                    <div class="col-lg-6">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Password</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">nick123</label>
                                      </div>
                                    </div>

                                    <div class="col-lg-6">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">URL</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">
                                          <a class="text-truncate max-w-150px" href="http://192.168.3.98:5080/hr_enroll/manage_staff/add_staff">-</a>
                                        </label>
                                      </div>
                                    </div>

                                    <div class="col-lg-6">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Description</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">-</label>
                                      </div>

                                    </div>


                                  </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="contact_info" role="tabpanel">
                            <div class="row mb-2">
                                <div class="col-lg-12">
                                  <div class="row">
                                    <div class="col-lg-12">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Contact Person</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Sibi Kumar</label>
                                      </div>
                                    </div>

                                    <div class="col-lg-12">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Contact Person Mobile Number</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">7485196785</label>
                                      </div>
                                    </div>

                                    <div class="col-lg-12">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Residential Address</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">18I Gandhi Nagar Happy Street Madurai</label>
                                      </div>
                                    </div>

                                    <div class="col-lg-12">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Permanent Address</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">122K K K Nagar D-block Madurai</label>
                                      </div>
                                    </div>

                                    <div class="col-lg-12">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Alternate Mobile Number</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">7584967821</label>
                                      </div>
                                    </div>

                                    <div class="col-lg-12">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Alternate Mobile Number 1</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">7721869435</label>
                                      </div>
                                    </div>

                                    <div class="col-lg-12">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Alternate Mobile Number 2</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">9978428965</label>
                                      </div>
                                    </div>
                                  </div>

                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="work_info" role="tabpanel">
                            <div class="row mb-2">
                                <div class="col-lg-12">
                                  <div class="row">
                                    <div class="col-lg-6">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Type</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Experience</label>
                                      </div>
                                    </div>

                                    <div class="col-lg-6">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Shifted Company Count</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">2</label>
                                      </div>
                                    </div>

                                    <div class="col-lg-6">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Total Years Of Experience</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6">
                                           <span class="badge bg-primary text-white px-3 fs-7">3</span>
                                        </label>
                                      </div>
                                    </div>

                                    <h5 class="title fw-bold mt-2 text-warning">1st Company</h5>

                                    <div class="col-lg-6">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Position</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Developer</label>
                                      </div>
                                    </div>

                                    <div class="col-lg-6">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Experience Years</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">
                                           <span class="badge bg-primary text-white px-3 fs-7">1</span>
                                        </label>
                                      </div>
                                    </div>

                                    <div class="col-lg-6">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Company Name</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">TCS</label>
                                      </div>
                                    </div>

                                    <div class="col-lg-6">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Salary</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-danger">₹ 20,000 /-</label>
                                      </div>
                                    </div>

                                    <div class="col-lg-6">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Start Date</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">01-Oct-2021</label>
                                      </div>
                                    </div>

                                    <div class="col-lg-6">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">End Date</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">18-Jul-2022</label>
                                      </div>
                                    </div>



                                    <h5 class="title fw-bold mt-2 text-warning">2nd Company</h5>

                                    <div class="col-lg-6">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Position</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Developer</label>
                                      </div>
                                    </div>

                                    <div class="col-lg-6">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Experience Years</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">
                                           <span class="badge bg-primary text-white px-3 fs-7">2</span>
                                        </label>
                                      </div>
                                    </div>

                                    <div class="col-lg-6">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Company Name</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">CTS</label>
                                      </div>
                                    </div>

                                    <div class="col-lg-6">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Salary</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-danger">₹ 15,000 /-</label>
                                      </div>
                                    </div>

                                    <div class="col-lg-6">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Start Date</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">27-Nov-2023</label>
                                      </div>
                                    </div>

                                    <div class="col-lg-6">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">End Date</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">12-Feb-2024</label>
                                      </div>
                                    </div>

                                    <div class="divider text-start-center">
                                      <div class="divider-text fs-5 text-primary fw-semibold my-2">Attachment Details</div>
                                    </div>

                                    <div class="col-lg-12 d-flex align-items-center justify-content-start gap-3 flex-wrap py-3 px-1">

                                      <div class="d-flex flex-column gap-1 justify-content-center align-items-center">
                                        <label class=" fw-semibold fs-7 text-dark">Resume</label>
                                        <img src="{{ asset('assets/egc_images/auth/document.svg') }}"
                                              style="width:100px; height:100px;" />
                                      </div>

                                      <div class="d-flex flex-column gap-1 justify-content-center align-items-center">
                                        <label class=" fw-semibold fs-7 text-dark">Aadhar card</label>
                                        <img src="{{ asset('assets/egc_images/auth/document.svg') }}"
                                              style="width:100px; height:100px;" />
                                      </div>

                                      <div class="d-flex flex-column gap-1 justify-content-center align-items-center">
                                        <label class=" fw-semibold fs-7 text-dark">Pan Card</label>
                                        <img src="{{ asset('assets/egc_images/auth/document.svg') }}"
                                              style="width:100px; height:100px;" />
                                      </div>
                                    </div>
                                  </div>

                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="edu_info" role="tabpanel">
                            <div class="row mb-2">

                              <div class="col-lg-12">
                                  <div class="row mb-2">
                                        <label class="col-3 fw-semibold fs-7 text-dark">Course Completed</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Yes, Java , Python , C++ , C# , HTML , JS , CSS , REACT , SQL and Ruby</label>
                                    </div>
                                </div>


                                <div class="divider text-start-center">
                                  <div class="divider-text fs-5 text-primary fw-semibold my-2">Educational Details</div>
                                </div>

                                <h5 class="title fw-bold mt-2 text-warning text-warning">UG</h5>

                                <div class="col-lg-6">
                                  <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Qualification Type</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Under Graduate</label>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                  <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Degree</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6">
                                           <span class="badge bg-label-danger text-danger fw-semibold fs-6 rounded">BBA</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                  <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Major</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Finance</label>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                  <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">University Name</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">MKU</label>
                                    </div>
                                </div>

                                <h5 class="title fw-bold mt-2 text-warning">PG</h5>

                                <div class="col-lg-6">
                                  <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Qualification Type</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Post Graduate</label>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                  <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Degree</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 ">
                                           <span class="badge bg-label-danger text-danger fw-semibold fs-6 rounded">MBA</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                  <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Major</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Finance And Application</label>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                  <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">University Name</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">SRM</label>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="tab-pane fade" id="Application" role="tabpanel">
                            <div class="row mb-2">
                                <div class="col-lg-12">
                                  <div class="row">
                                    <div class="col-lg-12">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Technical Position</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Java , C# , .Net ,FullStack</label>
                                      </div>
                                    </div>

                                    <div class="col-lg-12">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Non Technical Position</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Sales Management , SEO Analyst</label>
                                      </div>
                                    </div>

                                    <div class="col-lg-12">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Interview Attended Company</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">
                                           <span class="badge bg-label-primary text-primary fw-semibold fs-6 rounded">EIBS</span>
                                        </label>
                                      </div>
                                    </div>

                                    <div class="col-lg-12">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Already Attended Interview In Elysium Groups</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Yes</label>
                                      </div>
                                    </div>

                                    <div class="col-lg-12">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Attended Date</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">07-10-2024 , 04-11-2024 , 12-01-2025</label>
                                      </div>
                                    </div>

                                    <div class="col-lg-12">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Accepted To Submit Original Certificate</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Yes</label>
                                      </div>
                                    </div>

                                    <div class="col-lg-12">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Accepted To Travel For Official Purpose</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Yes</label>
                                      </div>
                                    </div>

                                    <div class="col-lg-12">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Joining Status</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Immediate Joining</label>
                                      </div>
                                    </div>

                                    <div class="col-lg-12">
                                      <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Joining Date</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">07-10-2025</label>
                                      </div>
                                    </div>


                                  </div>

                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="StaffCheckList" role="tabpanel">
                            <div class="row mb-2">
                                <div class="col-lg-12">
                                    <div class="form-check mb-3">
                                        <input class="form-check-input checklist-item" type="checkbox" id="check1">
                                        <label class="fw-semibold fs-6 text-black" for="check1">Educational certificates verified (Degree, Diploma, Transcripts), experience/resume checked (previous employment verification)</label>
                                    </div>
                                    <div class="form-check mb-3">
                                        <input class="form-check-input checklist-item" type="checkbox" id="check2" checked>
                                        <label class="fw-semibold fs-6 text-black" for="check2">Identity proof verified (Aadhaar, Passport, Driving License), address proof verified (Ration Card, Utility Bill),</label>
                                    </div>
                                    <div class="form-check mb-3">
                                        <input class="form-check-input checklist-item" type="checkbox" id="check3" checked>
                                        <label class="fw-semibold fs-6 text-black" for="check3">Official documents submitted (Joining Letter, Form 16)</label>
                                    </div>
                                    <div class="form-check mb-3">
                                        <input class="form-check-input checklist-item" type="checkbox" id="check4"checked>
                                        <label class="fw-semibold fs-6 text-black" for="check4">and alternate contact/emergency details provided (alternate mobile number, emergency contact).</label>
                                    </div>
                                    <div class="form-check mb-3">
                                        <input class="form-check-input checklist-item" type="checkbox" id="check5">
                                        <label class="fw-semibold fs-6 text-black" for="check5">Verify identity proof, address proof, and educational certificates.</label>
                                    </div>
                                    <div class="form-check mb-3">
                                        <input class="form-check-input checklist-item" type="checkbox" id="check6">
                                        <label class="fw-semibold fs-6 text-black" for="check6">Check previous experience/resume, submission of official documents, and provide alternate/emergency contact details.</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="Orientation" role="tabpanel">
                            <div class="row mb-2">
                                <h5 class="title fw-bold mt-2 text-warning">Staff Introduction</h5>

                                <div class="col-lg-6">
                                  <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Score</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">-</label>
                                    </div>
                                </div>
                                 <div class="col-lg-6">
                                    <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Department</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">HR Management</label>
                                    </div>
                                  </div>

                                  <div class="col-lg-6">
                                    <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Job Role</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">HR Executive</label>
                                    </div>
                                  </div>
                                <div class="col-lg-6">
                                  <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Staff Name</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Karthiga</label>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                  <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Report</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">
                                          <img src="{{ asset('assets/egc_images/auth/document.svg') }}"
                                              style="width:70px; height:70px;" />
                                        </label>
                                    </div>
                                </div>

                                <h5 class="title fw-bold mt-2 text-warning">Company Introduction</h5>

                                <div class="col-lg-6">
                                  <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Score</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">-</label>
                                    </div>
                                </div>
                                 <div class="col-lg-6">
                                    <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Department</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">HR Management</label>
                                    </div>
                                  </div>

                                  <div class="col-lg-6">
                                    <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Job Role</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">HR Executive</label>
                                    </div>
                                  </div>

                                  <h5 class="title fw-bold mt-2 text-warning">Department Introduction</h5>

                                <div class="col-lg-6">
                                  <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Score</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">-</label>
                                    </div>
                                </div>
                                 <div class="col-lg-6">
                                    <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Department</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">HR Management</label>
                                    </div>
                                  </div>
                                <div class="col-lg-6">
                                  <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Staff Name</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">Karthiga</label>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                  <div class="row mb-2">
                                        <label class="col-5 fw-semibold fs-7 text-dark">Report</label>
                                        <label class="col-1 fw-semibold fs-7">:</label>
                                        <label class="col-6 fw-semibold fs-6 text-black">
                                          <img src="{{ asset('assets/egc_images/auth/document.svg') }}"
                                              style="width:70px; height:70px;" />
                                        </label>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
      </div>
      <!--end::Modal content-->
  </div>
  <!--end::Modal dialog-->
</div>
<!--end::Modal - view staff-->

<script>
    $(".list_page").DataTable({
        "ordering": false,
        "pageLength":25,
        // "aaSorting":[],
        "language": {
            "lengthMenu": "Show _MENU_",
        },
        "dom": "<'row mb-3'" +
            // "<'col-sm-6 d-flex align-items-center justify-conten-start'l>" +
            // "<'col-sm-6 d-flex align-items-center justify-content-end'f>" +
            ">" +

            "<'table-responsive'tr>" +

            "<'row'" +
            // "<'col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start'i>" +
            // "<'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>" +
            ">"
    });
</script>



<script>
    document.addEventListener("DOMContentLoaded", function () {
        // Show filter div on "Add Filter"
        document.getElementById('filter_btn').addEventListener('click', function () {
            document.getElementById('filter_div').style.display = 'block';
        });
    });

    function clearFilter() {
        document.getElementById('filter_div').style.display = 'none';
        location.reload();
    }
</script>


<script>
    function date_fill_issue_rpt() {
        var dt_fill_issue_rpt = document.getElementById('dt_fill_issue_rpt').value;
        var today_dt_iss_rpt = document.getElementById('today_dt_iss_rpt');
        var week_from_dt_iss_rpt = document.getElementById('week_from_dt_iss_rpt');
        var week_to_dt_iss_rpt = document.getElementById('week_to_dt_iss_rpt');
        var monthly_dt_iss_rpt = document.getElementById('monthly_dt_iss_rpt');
        var from_dt_iss_rpt = document.getElementById('from_dt_iss_rpt');
        var to_dt_iss_rpt = document.getElementById('to_dt_iss_rpt');
        var from_date_fillter_iss_rpt = document.getElementById('from_date_fillter_iss_rpt');
        var to_date_fillter_iss_rpt = document.getElementById('to_date_fillter_iss_rpt');

        if (dt_fill_issue_rpt == "today") {
            today_dt_iss_rpt.style.display = "block";
            monthly_dt_iss_rpt.style.display = "none";
            from_dt_iss_rpt.style.display = "none";
            to_dt_iss_rpt.style.display = "none";
            week_from_dt_iss_rpt.style.display = "none";
            week_to_dt_iss_rpt.style.display = "none";
        } else if (dt_fill_issue_rpt == "week") {
            today_dt_iss_rpt.style.display = "none";
            week_from_dt_iss_rpt.style.display = "block";
            week_to_dt_iss_rpt.style.display = "block";
            monthly_dt_iss_rpt.style.display = "none";
            from_dt_iss_rpt.style.display = "none";
            to_dt_iss_rpt.style.display = "none";

            var curr = new Date; // get current date
            var first = curr.getDate() - curr.getDay(); // First day is the day of the month - the day of the week
            var last = first + 6; // last day is the first day + 6

            var firstday = new Date(curr.setDate(first)).toISOString().slice(0, 10);
            firstday = firstday.split("-").reverse().join("-");
            var lastday = new Date(curr.setDate(last)).toISOString().slice(0, 10);
            lastday = lastday.split("-").reverse().join("-");
            $('#week_from_date_fil').val(firstday);
            $('#week_to_date_fil').val(lastday);

        } else if (dt_fill_issue_rpt == "monthly") {
            today_dt_iss_rpt.style.display = "none";
            monthly_dt_iss_rpt.style.display = "block";
            from_dt_iss_rpt.style.display = "none";
            to_dt_iss_rpt.style.display = "none";
            week_from_dt_iss_rpt.style.display = "none";
            week_to_dt_iss_rpt.style.display = "none";
        } else if (dt_fill_issue_rpt == "custom_date") {
            today_dt_iss_rpt.style.display = "none";
            monthly_dt_iss_rpt.style.display = "none";
            from_dt_iss_rpt.style.display = "block";
            to_dt_iss_rpt.style.display = "block";
            week_from_dt_iss_rpt.style.display = "none";
            week_to_dt_iss_rpt.style.display = "none";
        } else {
            today_dt_iss_rpt.style.display = "none";
            monthly_dt_iss_rpt.style.display = "none";
            from_dt_iss_rpt.style.display = "none";
            to_dt_iss_rpt.style.display = "none";
            week_from_dt_iss_rpt.style.display = "none";
            week_to_dt_iss_rpt.style.display = "none";
        }
    }
</script>

<script>
    let currentPage = 1;
    let isLoading = false;
    let abortController = new AbortController();
    let auth_user_id =@json($user_id);

    function formatDate(dateString) {
        const date = new Date(dateString);

        // Check if the date is valid
        if (isNaN(date.getTime())) {
            return '-'; // Return '-' if the date is invalid
        }

        // Get the day, month (abbreviated), and year
        const day = String(date.getDate()).padStart(2, '0'); // Get day and pad with leading zero
        const month = date.toLocaleString('default', { month: 'short' }); // Get abbreviated month
        const year = date.getFullYear(); // Get full year

        // Construct and return the formatted date string
        return `${day}-${month}-${year}`; // Format as DD-MMM-YYYY
    }

    function safeJsonParse(str) {
        try { return JSON.parse(str); }
        catch(e) { return str; }
    }
  
    function buildRow(item,index) {    
       
            var data = typeof item.data === 'string' ? JSON.parse(item.data) : item.data;
            var old_data = typeof item.old_data === 'string' ? JSON.parse(item.old_data) : item.old_data;
            var old_status = old_data ? 1 : 0;
            let statuBadge = '';
            let genderIcon = '';
            let status = item.status;

             var drive_data = typeof item.drive_data === 'string' ? JSON.parse(item.drive_data) : item.drive_data;

             var resumeURL = drive_data && drive_data.webViewLink ? drive_data.webViewLink : null;

            if(data.gender == '2'){
                genderIcon ='<i class="mdi mdi-face-woman text-info"></i>';
            }else{
                genderIcon ='<i class="mdi mdi-face-man text-danger"></i>';
            }
            if(old_status == 1){
                    statuBadge= `
                        <span class="badge rounded bg-warning text-black fw-semibold fs-7">Applicant</span>
                    `;
            }else{
                if (data.applicant_status == 1) {
                    statuBadge= `
                        <span class="badge rounded bg-label-warning text-black fw-semibold fs-7">New Applicant</span>
                    `;
                }else if(data.applicant_status == 3){
                    if(data.shortlist_check == 1){
                        statuBadge= `
                        <span class="badge rounded bg-label-info text-black fw-semibold fs-7">Shortlisted</span>
                    `;
                    }else{
                         statuBadge= `
                        <span class="badge rounded bg-label-danger text-black fw-semibold fs-7">Not Eligible</span>
                    `;
                    }
                    
                }else{
                     statuBadge= `
                        <span class="badge rounded bg-label-warning text-black fw-semibold fs-7">Applicant</span>
                    `;
                }
            }
            
            
        return `
            <tr id="webhook-${item.sno}">
                <td style="position:relative;">
                    <div style="position:absolute; left:0; top:0; bottom:0; width:5px; background:${data.company_base_color || ''};"></div>
                    <div class="d-flex align-items-start justify-content-center flex-column">
                        <div class="d-flex align-items-start justify-content-center gap-1">
                            <label class="fs-7">${data.applicant_name}</label>
                            <label class="fs-7">
                                    ${genderIcon}
                            </label>
                        </div>
                        <label class="fs-7 text-dark">${data.mobile}</label>
                    </div>
                </td>
                <td>
                    <div class="d-flex align-items-start justify-content-center flex-column">
                        <label class="fw-semibold text-black fs-7">
                            ${old_status == 1 ? (old_data.job_role_names || '-') : data.job_role_name}
                        </label>
                        <label class="fw-semibold fs-7 text-truncate badge bg-label-slack">
                         ${old_status == 1 ? (old_data.source_name || '-') : data.applicant_source_name}
                        </label>
                    </div>
                </td>
                <td class="text-center">
                    <label class="fs-7 fw-semibold">${old_status == 1 ? (old_data.major_name || '-') : data.major}</label>
                </td>
                <td>
                    ${data.experience_id == '2' ?
                        `<label class="fs-7 fw-semibold">${old_status == 1 ? (old_data.experience_name || '-') : data.experience_count +' Years'}</label>`:
                        '<label class="fs-7 fw-semibold">Fresher</label>'
                    }
                    
                </td>

                <td>
                   <label class="fs-7 text-black fw-semibold d-flex align-items-center justify-content-start gap-1 text-nowrap">
                        <span><i class="mdi mdi-calendar-outline"></i></span>
                        ${data.created_at ? formatDate(data.created_at) : '-'}
                    </label>
                </td>
               
                <td class ="position-relative">
                    ${statuBadge}
                    
                </td>
                <td>
                  ${resumeURL ? 
                    `<a href="${resumeURL}" target="_blank" class="btn btn-icon btn-sm" download data-bs-toggle="tooltip" data-bs-placement="bottom" title="Resume Download" download>
                        <span><i class="mdi mdi-tray-arrow-down fs-3 text-black"></i></span>
                    </a>`
                    :'<span data-bs-toggle="tooltip" data-bs-placement="bottom" title="Candidate Profile Not Found"><i class="mdi mdi-account-alert-outline fs-3 text-danger"></i></span>'
                    }
                    
                </td>
            </tr>
        `;
    }
    function loadThemes(page = 1) {
        const perpage = document.getElementById('perpage').value;
        const search = document.getElementById('search_filter').value;
        const closing_date_filt = document.getElementById('closing_date_filt').value;
        const to_dt_iss_rpt = document.getElementById('to_dt_iss_rpt').value;
        const from_dt_iss_rpt = document.getElementById('from_dt_iss_rpt').value;
        const dt_fill_issue_rpt = document.getElementById('dt_fill_issue_rpt').value;
        const job_role_fill = document.getElementById('job_role_fill').value;
        const exp_type_filt = document.getElementById('exp_type_filt').value;
        let old_resume_fill ="";
        if(auth_user_id == 0){
             old_resume_fill = document.getElementById('old_resume_fill').value;
        }
        
        const url = `/hr_recruitment/manage_candidate?page=${page}&sorting_filter=${perpage}&search_filter=${search}&closing_date_filt=${closing_date_filt}&exp_type_filt=${exp_type_filt}&job_role_fill=${job_role_fill}&dt_fill_issue_rpt=${dt_fill_issue_rpt}&from_dt_iss_rpt=${from_dt_iss_rpt}&to_dt_iss_rpt=${to_dt_iss_rpt}&old_resume_fill=${old_resume_fill}`;

        // Show skeleton loader and clear old data before fetching new data
        isLoading = true;
        document.getElementById('list-table-body').innerHTML = ''; // Clear old data
        document.getElementById('list-table-body').insertAdjacentHTML('beforeend', skeletenRow()); // Clear old data
        $('#skeleton-loader').show(); // Show skeleton loader

        if (abortController.signal) {
            abortController.abort(); // Abort the previous request
        }
        abortController = new AbortController();

         fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }, signal: abortController.signal })
            .then(res => res.json())
            .then(res => {
                // Insert new data into the table
                if(res.data.length > 0){
                    res.data.forEach((item, index) => {
                        document.getElementById('list-table-body').insertAdjacentHTML('beforeend', buildRow(item, index + 1));
                    });

                }else{
                    document.getElementById('list-table-body').insertAdjacentHTML('beforeend', NoDataFound());
                }
                     $('[data-bs-toggle="tooltip"]').tooltip();

                // Update pagination and results info
                updatePagination(res.current_page, res.last_page, res.total, perpage);

                // Hide skeleton loader after data is fetched
                isLoading = false;
                $('#skeleton-loader').hide();
            })
            .catch(error => {
                if (error.name !== 'AbortError') { // Only handle abort error
                    console.error('Error loading data:', error);
                }
                // Hide skeleton loader in case of error
                $('#skeleton-loader').hide();
                isLoading = false;
            });
    }

    function skeletenRow(){
        return `
            <tr class="skeleton-loader" id="skeleton-loader">
                <td class="skeleton-cell">
                    <div class="skeleton"></div>
                </td>
                <td class="skeleton-cell">
                    <div class="skeleton"></div>
                </td>
                <td class="skeleton-cell">
                    <div class="skeleton"></div>
                </td>
                <td class="skeleton-cell">
                    <div class="skeleton"></div>
                </td>
                <td class="skeleton-cell">
                    <div class="skeleton"></div>
                </td>
                <td class="skeleton-cell">
                    <div class="skeleton"></div>
                </td>
                <td class="skeleton-cell">
                    <div class="skeleton"></div>
                </td>
            </tr>
            `;
    }

    function NoDataFound(){
        return `
             <tr class="no-data-found">
                <td colspan="7" class="text-center">No Data Found</td>
            </tr>
            `;
    }

    function updatePagination(currentPage, lastPage, total, perpage) {
        let paginationContainer = document.getElementById('pagination-container');
        paginationContainer.innerHTML = ''; // Clear old pagination

        // Set the pagination container style
        paginationContainer.style.display = "flex";
        paginationContainer.style.justifyContent = "space-between";
        paginationContainer.style.alignItems = "center";

        // Showing result count info (e.g., Showing 1 to 25 of 3556 results)
        let start = (currentPage - 1) * perpage + 1;
        let end = Math.min(currentPage * perpage, total);
        let showingInfo = `Showing ${start} to ${end} of ${total} results`;
        paginationContainer.insertAdjacentHTML('beforeend', showingInfo);

        // Create Pagination Buttons

        // << First button
        let firstButton = `<li class="page-item ${currentPage === 1 ? 'disabled' : ''}" data-bs-toggle="tooltip" data-bs-placement="top" title="First Page"><button class=" page-link" onclick="loadThemes(1)" >«</button> </li>`;
        
        // < Previous button
        let prevButton = `<li class="page-item ${currentPage > 1 ? '' : 'disabled'}" data-bs-toggle="tooltip" data-bs-placement="top" title="Previous"><button class=" page-link" onclick="loadThemes(${currentPage - 1})" >‹</button> </li>`;
        
        // Next button
        let nextButton = `<li class="page-item ${currentPage < lastPage ? '' : 'disabled'}" data-bs-toggle="tooltip" data-bs-placement="top" title="Next"><button class="page-link" onclick="loadThemes(${currentPage + 1})" >›</button> </li>`;
        
        // >> Last button
        let lastButton = `<li class="page-item ${currentPage === lastPage ? 'disabled' : ''}" data-bs-toggle="tooltip" data-bs-placement="top" title="Last Page"><button class=" page-link" onclick="loadThemes(${lastPage})" >»</button> </li>`;

        // Page Number Buttons (Dynamically show a range of pages around the current page)
        let pageButtons = '';
        let range = 2; // Show 2 pages before and after the current page
        let startPage = Math.max(1, currentPage - range);
        let endPage = Math.min(lastPage, currentPage + range);

        // Generate page numbers
        for (let i = startPage; i <= endPage; i++) {
            pageButtons += `<li class="page-item ${i === currentPage ? 'active' : ''}"><button class="page-link " onclick="loadThemes(${i})">${i}</button> </li>`;
        }

        // Add the pagination buttons and page numbers
        paginationContainer.insertAdjacentHTML('beforeend', `
            <nav aria-label="Page navigation example">
                <ul class="pagination">
                    ${firstButton}
                    ${prevButton}
                    ${pageButtons}
                    ${nextButton}
                    ${lastButton}
                </ul>
            </nav>
        `);

        // Update perpage dropdown if changed
        document.getElementById('perpage').value = perpage;
    }

    function debounceSearch(e) {
        if (e.keyCode === 13) {
            loadThemes(1);  // Trigger the search when the user presses enter
        }
    }

    // Debounce function to handle input changes
    let debounceTimeout;
    function debounce(fn, delay) {
        return function() {
            clearTimeout(debounceTimeout);
            debounceTimeout = setTimeout(fn, delay);
        };
    };

  

    // SearchBar
    document.getElementById('search_filter').addEventListener('input', function() {
        const searchValue = document.getElementById('search_filter').value;
        if (searchValue) {
            document.getElementById('refreshSearch').style.display = 'inline-block';  // Show the refresh button
        } else {
            document.getElementById('refreshSearch').style.display = 'none';  // Hide the refresh button
        }
    });

     // Listen for changes in the perpage dropdown and reload data
    document.getElementById('perpage').addEventListener('change', () => loadThemes(1));

    // Listen for Enter key in the search filter and reload data
    document.getElementById('search_filter').addEventListener('keyup', debounceSearch);

    document.getElementById('refreshSearch').addEventListener('click', function() {
        document.getElementById('search_filter').value = '';  // Clear the search input
        loadThemes(1);  // Reload the table data without the search filter
    });

    document.getElementById('searchSubmit').addEventListener('click', function() {
        loadThemes(1);  // Reload the table data without the search filter
    });

     document.getElementById('filterSubmit').addEventListener('click', function() {
        loadThemes(1);  // Reload the table data without the search filter
    });

    // Initial load
    loadThemes(1);

</script>
<script>
    $('#branch_filter').click(function() {
        $('.branch_filter').slideToggle('slow');
    });
</script>
@endsection