@extends('layouts/layoutMaster')

@section('title', 'Resource Request')

@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/bootstrap-datepicker/bootstrap-datepicker.scss',
'resources/assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.scss',
'resources/assets/vendor/libs/flatpickr/flatpickr.scss',
'resources/assets/vendor/libs/dropzone/dropzone.scss',
'resources/assets/vendor/libs/tagify/tagify.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/bootstrap-daterangepicker/bootstrap-daterangepicker.js',
'resources/assets/vendor/libs/flatpickr/flatpickr.js',
'resources/assets/vendor/libs/dropzone/dropzone.js',
])
@endsection

@section('page-script')
@vite(['resources/assets/js/forms_date_time_pickers.js'])
@endsection


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

    .tagify__dropdown {
        z-index: 999999 !important;
    }
    .tagify__dropdown__wrapper {
        z-index: 999999 !important;
    }

     #aiBtn.ai-loading {
        opacity: 0.7;
        pointer-events: none;
    }
     #aiBtnEdit.ai-loading {
        opacity: 0.7;
        pointer-events: none;
    }

    .count_badge {
        /* top: 0; */
        position: absolute;
        right: -18px;
        bottom: 10%;
    }

   
    .candidate-item.active {
        background-color: #fba919;
        color: #000000;
    }
    .candidate-item.active small {
        color: #000000;
    }
</style>
<style>
    #candidateList {
        max-height: 450px;
        overflow-y: auto;
        scrollbar-width: none;        
        -ms-overflow-style: none;    
    }


    #candidateList::-webkit-scrollbar {
        width: 2px;                  
        opacity: 0;
    }

    #candidateList:hover::-webkit-scrollbar {
        opacity: 1;
    }

    #candidateList::-webkit-scrollbar-track {
        background: transparent;
    }
    #candidateList::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: 10px;
    }

    #candidateList:hover {
        scrollbar-width: thin;
    }
</style>

    

<!-- Lead List Table -->
 @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
<div class="card">
     <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">Resource Request</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" data-bs-toggle="modal" data-bs-target="#kt_modal_filter">
                <span><i class="mdi mdi-filter-outline" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Filter"></i></span>
            </a>
        </div>
    </div>
    <a href="#" id="downloadPng" aria-label="Download as PNG" class="max-md:mb-4! max-md:mt-8! group flex-none max-md:order-last" aria-label="Hugging Face">
    </a>
    <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>
                <div class="col-lg-3 mb-2" id="">
                    <label class="text-dark mb-1 fs-6 fw-semibold">Closing 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/job_request') }}" 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">Job Role</th>
                            <th class="min-w-100px">Company / Entity</th>
                            <th class="min-w-100px">Vacancy</th>
                            <th class="min-w-150px">Closing Date </th>
                            <th class="min-w-100px">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>
                        </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 - Create Campaign-->
<div class="modal fade" id="kt_modal_create_job_request" 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">
            <!--begin::Modal header-->
            <div class="modal-header justify-content-end border-0 pb-0">
                <!--begin::Close-->
                <div class="btn btn-sm btn-icon btn-active-color-primary" 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="none" 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="currentColor" />
                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
                        </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">
                <!--begin::Heading-->
                <div class="mb-4">
                    <h3 class=" mb-4 text-black text-center">Create Job Request</h3>
                </div>
                <form id="jobRequestform" method="POST" action="{{ route('add_job_request') }}" enctype="multipart/form-data" autocomplete="off">
                @csrf
                <div class="row mt-4">
                    <div class="col-lg-4 mb-3">
                        <label class="text-dark mb-1 fs-6 fw-semibold">Job Role Name<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="job_role_name" name="job_role_name" placeholder="Enter Job Role Name" value="" oninput="this.value = this.value.replace(/^\w/, function(txt) { return txt.toUpperCase(); });" />
                        <div class="text-danger" id="job_role_name_err"></div>
                    </div>
                    <div class="col-lg-4 mb-3">
                        <label class="text-dark mb-1 fs-6 fw-semibold">Experience Type<span class="text-danger">*</span></label>
                        <select id="exp_type" name="exp_type[]" class="select3 form-select" multiple data-placeholder="Select Type">
                            <option value="">Select Type</option>
                            <option value="1">Fresher</option>
                            <option value="2">Experience</option>
                        </select>
                         <div class="text-danger" id="exp_type_err"></div>
                    </div>
                    <div class="col-lg-4 mb-3">
                        <label class="text-dark mb-1 fs-6 fw-semibold">Years of Experience<span class="text-danger">*</span></label>
                        <input type="text" id="experience_year" name="experience_year" class="form-control" placeholder="Enter Years of Experience"  value="0" maxlength="2" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');"/>
                        <div class="text-danger" id="experience_year_err"></div>
                    </div>
                    <div class="col-lg-4 mb-3">
                        <label class="text-dark mb-1 fs-6 fw-semibold">No Of Vacancy<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="vacancy_count" name="vacancy_count" placeholder="Enter No Of Vacancy" value="" maxlength="5" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');"/>
                        <div class="text-danger" id="vacancy_count_err"></div>
                    </div>
                    <div class="col-lg-4 mb-2" id="">
                        <label class="text-dark mb-1 fs-6 fw-semibold">Closing 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" name="closing_date" placeholder="Select Date" class="form-control common_datepicker" value="03-Mar-2026" readonly/>
                        </div>
                        <div class="text-danger" id="closing_date_err"></div>
                    </div>
                    <div class="col-lg-4 mb-3">
                        <label class="text-dark mb-1 fs-6 fw-semibold">Minimum Salary</label>
                        <input type="text" id="min_salary" name="min_salary" class="form-control" placeholder="Enter Minimum Salary" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');"/>
                        <div class="text-danger" id="min_salary_err"></div>
                    </div>
                    <div class="col-lg-4 mb-3">
                        <label class="text-dark mb-1 fs-6 fw-semibold">Maximum Salary</label>
                        <input type="text" id="max_salary" name="max_salary" class="form-control" placeholder="Enter Maximum Salary" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');"/>
                        <div class="text-danger" id="max_salary_err"></div>
                    </div>
                    <div class="col-lg-6 mb-3">
                        <label class="text-dark mb-1 fs-6 fw-semibold">Skills Required<span class="text-danger">*</span></label>
                        <div class="form-floating form-floating-outline">
                            <input id="skill_KnowledgeTag" name="skill_KnowledgeTag" class="form-control h-auto" placeholder="Select Skills Required" value="">
                            
                        </div>
                        <div class="text-danger" id="skill_KnowledgeTag_err"></div>
                    </div>
                    <div class="col-lg-12 mb-3">
                        <div class="d-flex justify-content-between">
                            <label class="text-dark mb-1 fs-6 fw-semibold">Job Description<span class="text-danger">*</span></label>
                            <button type="button" id="aiBtn" 
                                class="btn btn-sm btn-light-primary border rounded-pill px-3 fw-bold shadow-sm"
                                onclick="generateAiDescription()">
                                <span class="d-flex justify-content-center align-items-center gap-1">
                                    <i class="mdi mdi-robot-outline"></i>
                                    <span>AI</span>
                                </span>
                                
                            </button>
                        </div>
                        <input type="hidden" name="job_description_generate" id="edit_text">
                        <div class="col-lg-12 mb-3" id="show_text_edit">
                            <div id="create_job_description"
                                    class="scroll-y max-h-300px border-top-none p-3 bg-white"></div>
                                <div class="error_msg text-danger fw-semibold mt-2 fs-7"></div>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-end align-items-center mt-4 mb-2">
                    <button type="reset" class="btn btn-secondary me-3" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" id="submitRequsetBtn" class="btn btn-primary" onclick="validation_func()">
                        <span id="yesBtnText">Create Job Request</span>
                        <span id="yesBtnLoader" style="display: none;" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                    </button>
                </div>
                </form>
            </div>
            <!--end::Modal body-->
        </div>
        <!--end::Modal content-->
    </div>
    <!--end::Modal dialog-->
</div>
<!--end::Modal - Create Campaign-->

<!--begin::Modal - Update Job Request-->
<div class="modal fade" id="kt_modal_update_job_request" 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">
            <!--begin::Modal header-->
            <div class="modal-header justify-content-end border-0 pb-0">
                <!--begin::Close-->
                <div class="btn btn-sm btn-icon btn-active-color-primary" 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="none" 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="currentColor" />
                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
                        </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">
                <!--begin::Heading-->
                <div class="mb-4">
                    <h3 class=" mb-4 text-black text-center">Update Job Request</h3>
                </div>
                <form id="UpdateJobRequestform" method="POST" action="{{ route('update_job_request') }}" enctype="multipart/form-data" autocomplete="off">
                @csrf
                <div class="row mt-4">
                    <input type="hidden" name="edit_id" id="edit_id">
                    <div class="col-lg-4 mb-3">
                        <label class="text-dark mb-1 fs-6 fw-semibold">Job Role Name<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="job_role_name_edit" name="job_role_name" placeholder="Enter Job Role Name" value="" oninput="this.value = this.value.replace(/^\w/, function(txt) { return txt.toUpperCase(); });" />
                        <div class="text-danger" id="job_role_name_edit_err"></div>
                    </div>
                    <div class="col-lg-4 mb-3">
                        <label class="text-dark mb-1 fs-6 fw-semibold">Experience Type<span class="text-danger">*</span></label>
                        <select id="exp_type_edit" name="exp_type[]" class="select3 form-select" multiple data-placeholder="Select Type">
                            <option value="">Select Type</option>
                            <option value="1">Fresher</option>
                            <option value="2">Experience</option>
                        </select>
                         <div class="text-danger" id="exp_type_edit_err"></div>
                    </div>
                    <div class="col-lg-4 mb-3">
                        <label class="text-dark mb-1 fs-6 fw-semibold">Years of Experience<span class="text-danger">*</span></label>
                        <input type="text" id="experience_year_edit" name="experience_year" class="form-control" placeholder="Enter Years of Experience"  value="0" maxlength="2" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');"/>
                        <div class="text-danger" id="experience_year_edit_err"></div>
                    </div>
                    <div class="col-lg-4 mb-3">
                        <label class="text-dark mb-1 fs-6 fw-semibold">No Of Vacancy<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="vacancy_count_edit" name="vacancy_count" placeholder="Enter No Of Vacancy" value="" maxlength="5" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');"/>
                        <div class="text-danger" id="vacancy_count_edit_err"></div>
                    </div>
                    <div class="col-lg-4 mb-2" id="">
                        <label class="text-dark mb-1 fs-6 fw-semibold">Closing 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_edit" name="closing_date" placeholder="Select Date" class="form-control common_datepicker" value="03-Mar-2026" readonly/>
                        </div>
                        <div class="text-danger" id="closing_date_edit_err"></div>
                    </div>
                    <div class="col-lg-4 mb-3">
                        <label class="text-dark mb-1 fs-6 fw-semibold">Minimum Salary</label>
                        <input type="text" id="min_salary_edit" name="min_salary" class="form-control" placeholder="Enter Minimum Salary" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');"/>
                        <div class="text-danger" id="min_salary_edit_err"></div>
                    </div>
                    <div class="col-lg-4 mb-3">
                        <label class="text-dark mb-1 fs-6 fw-semibold">Maximum Salary</label>
                        <input type="text" id="max_salary_edit" name="max_salary" class="form-control" placeholder="Enter Maximum Salary" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');"/>
                        <div class="text-danger" id="max_salary_edit_err"></div>
                    </div>
                    <div class="col-lg-6 mb-3">
                        <label class="text-dark mb-1 fs-6 fw-semibold">Skills Required<span class="text-danger">*</span></label>
                        <div class="form-floating form-floating-outline">
                            <input id="skill_KnowledgeTag_edit" name="skill_KnowledgeTag" class="form-control h-auto" placeholder="Select Skills Required" value="">
                            
                        </div>
                        <div class="text-danger" id="skill_KnowledgeTag_edit_err"></div>
                    </div>
                    <div class="col-lg-12 mb-3">
                        <div class="d-flex justify-content-between">
                            <label class="text-dark mb-1 fs-6 fw-semibold">Job Description<span class="text-danger">*</span></label>
                            <button type="button" id="aiBtnEdit" 
                                class="btn btn-sm btn-light-primary border rounded-pill px-3 fw-bold shadow-sm"
                                onclick="generateAiDescriptionEdit()">
                                <span class="d-flex justify-content-center align-items-center gap-1">
                                    <i class="mdi mdi-robot-outline"></i>
                                    <span>AI</span>
                                </span>
                                
                            </button>
                        </div>
                        <input type="hidden" name="job_description_generate" id="job_description_edit_text">
                        <div class="col-lg-12 mb-3" id="job_description_show_text_edit">
                            <div id="create_job_description_edit"
                                    class="scroll-y max-h-300px border-top-none p-3 bg-white"></div>
                                <div class="error_msg text-danger fw-semibold mt-2 fs-7"></div>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-end align-items-center mt-4 mb-2">
                    <button type="reset" class="btn btn-secondary me-3" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" id="submitRequsetBtnEdit" class="btn btn-primary" onclick="validation_func_edit()">
                        <span id="yesBtnTextEdit">Update Job Request</span>
                        <span id="yesBtnLoaderEdit" style="display: none;" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                    </button>
                </div>
                </form>
            </div>
            <!--end::Modal body-->
        </div>
        <!--end::Modal content-->
    </div>
    <!--end::Modal dialog-->
</div>
<!--end::Modal - Update Job Request-->

<!--begin::Modal - Delete Campaign-->
<div class=" modal fade" id="kt_modal_delete_job_request" 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">?</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">React Developer </b> Job Request ?</span>
            </div>
            <div class="d-flex justify-content-center align-items-center pt-8">
                <button type="submit" class="btn btn-danger me-3" data-bs-dismiss="modal">Yes,
                    delete!</button>
                <button type="reset" class="btn btn-secondary" data-bs-dismiss="modal">No,cancel</button>
            </div><br><br>
        </div>
        <!--end::Modal content-->
    </div>
    <!--end::Modal dialog-->
</div>
<!--end::Modal - Delete Campaign-->



<!--begin::Modal - alert Campaign-->
<div class=" modal fade" id="kt_modal_alert_schedule_create" 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="modal-header border-0 justify-content-center mt-3">
                <div class="symbol symbol-50px symbol-circle bg-light-warning">
                    <i class="mdi mdi-alert text-warning fs-1 fw-bold"></i>
                </div>
            </div>
            <div class="modal-body text-center px-4">
                <h5 class="fw-bold mb-3">Interview Schedule Required</h5>

                <p class="text-muted mb-0">
                    Please create the interview schedule for
                </p>
                <p class="fw-semibold text-danger mt-1" id="alert_job_request_name">
                    Job Role
                </p>
            </div>
            <div class="modal-footer border-0 justify-content-center pb-4">
                <button type="button" class="btn btn-primary px-6" data-bs-dismiss="modal">
                    Okay
                </button>
            </div>
        </div>
        <!--end::Modal content-->
    </div>
    <!--end::Modal dialog-->
</div>
<!--end::Modal - alert Campaign-->

<style>
    /* QR Card */
.qr-card {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
}

.qr-card:hover {
  transform: translateY(-4px);
}

/* QR Image */
.qr-image {
  width: 220px;
  height: 220px;
  border-radius: 12px;
  padding: 10px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
}

/* Modal animation */
.modal.fade .modal-dialog {
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.modal.show .modal-dialog {
  transform: scale(1);
}

</style>


<div class="modal fade" id="kt_modal_qr_generate" tabindex="-1" aria-hidden="true" data-bs-keyboard="false" data-bs-backdrop="static">
  <!--begin::Modal dialog-->
  <div class="modal-dialog modal-md">
    <!--begin::Modal content-->
    <div class="modal-content rounded">
      <!--begin::Modal header-->
      <div class="modal-header justify-content-end border-0 pb-0">
        <!--begin::Close-->
        <div class="btn btn-sm btn-icon btn-active-color-primary" 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="none" 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="currentColor" />
              <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
            </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">

        <!-- Title -->
        <div class="text-center mb-6">
            <h3 class="fw-bold text-dark mb-1">Application QR Code</h3>
            <p class="text-muted fs-7">
            Download this QR to apply for the job
            </p>
        </div>

        <!-- QR Card -->
        <div class="d-flex justify-content-center mb-6">
            <div class="qr-card text-center p-4">
            <img id="qrImage"
                src="{{ asset('assets/egc_images/qr_code.png') }}"
                class="qr-image mb-3">

            <!-- Actions -->
            <div class="d-flex justify-content-center gap-3">
                <!-- <button class="btn btn-sm btn-light-primary cpy-btn"
                        onclick="copyText(document.querySelector('[data-target=download_qr_code_name]'))">
                <i class="mdi mdi-content-copy me-1"></i> Copy Link -->
                </button>
                 <button class="btn btn-sm btn-light-primary"
                        data-target="download_qr_code_name"
                        onclick="copyText(this)">
                    <i class="mdi mdi-content-copy me-1"></i>
                    Copy Link
                </button>
            </div>
            </div>
        </div>

        <div class="mb-2 d-flex text-center">
            <!-- Hidden Link -->
            <span id="download_qr_code_name" class="d-none bg-light p-1 w-100 rounded "></span>
        </div>
        

        <!-- Job Details -->
        <div class="card shadow-sm border-0">
            <div class="card-body py-4 px-5">

            <div class="row mb-3">
                <div class="col-6 text-muted fs-7">Entity</div>
                <div class="col-6 text-end fw-semibold  fs-7" >
                    <span class="text-end fw-semibold  fs-7 badge" id="qr_job_company_name"></span>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-6 text-muted fs-7">Job Role</div>
                <div class="col-6 text-end fw-semibold text-primary fs-7" id="qr_job_role_name"></div>
            </div>

            <div class="row mb-3">
                <div class="col-6 text-muted fs-7">Last Apply Date</div>
                <div class="col-6 text-end fw-semibold text-dark fs-7" id="qr_job_last_apply_date"></div>
            </div>

            <div class="row">
                <div class="col-6 text-muted fs-7">Closing Date</div>
                <div class="col-6 text-end fw-semibold text-dark fs-7" id="qr_job_closing_date"></div>
            </div>

            </div>
        </div>

        </div>
      <!--end::Modal body-->
    </div>
    <!--end::Modal content-->
  </div>
  <!--end::Modal dialog-->
</div>

<!--begin::Modal - Approve Job Posting-->
<div class=" modal fade" id="kt_modal_approve_job" 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 Start the Resource <br>
                <span class="text-success fw-bold" id="update_status_name">Content Writer </span>
                 Job Posting ?</span>
            </div>
            <div class="row px-8">
                <div class="col-12" id="">
                    <label class="text-dark mb-1 fs-6 fw-semibold">Last Apply 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="last_apply_date" name="last_apply_date" placeholder="Select Date" class="form-control common_datepicker" value="10-Mar-2026" />
                    </div>
                </div>
            </div>
            <input type="hidden" id="update_status_id">
            <input type="hidden" id="update_status">
          
            <div class="d-flex justify-content-center align-items-center py-8 mb-4">
                <button type="submit" class="btn btn-success me-3" onclick ="updateStatus()">Yes,Start!</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_job" 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 Hold the Resource <br>
                <span class="text-danger" id="update_status_onhold_name">Content Writer </span> Job Posting ?</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,Hold!</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-->


<div class="modal fade" id="kt_modal_shortlist_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-xl">
        <!--begin::Modal content-->
        <div class="modal-content rounded">
            <!--begin::Modal header-->
            <div class="modal-header justify-content-end border-0 pb-0">
                <!--begin::Close-->
                <div class="btn btn-sm btn-icon btn-active-color-primary" 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="none" 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="currentColor" />
                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
                        </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">
                <!--begin::Heading-->
                <div class="mb-6">
                    <h3 class="text-center text-black">Shortlisted Candidates 
                        <!-- <label class="me-4 badge bg-warning text-black rounded fw-bold fs-4">Email</label> -->
                    </h3>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="row mb-2">
                            <label class="col-4 text-dark fs-7 fw-semibold">Job Role</label>
                            <label class="col-1 text-black fs-6 fw-bold">:</label>
                            <label class="col-7 text-black fs-7 fw-semibold" id="shortlist_job_role_name">-</label>
                        </div>
                        <div class="row mb-2">
                            <label class="col-4 text-dark fs-7 fw-semibold">Vacancy Count</label>
                            <label class="col-1 text-black fs-6 fw-bold">:</label>
                            <label class="col-7 text-black fs-7 fw-semibold" id="shortlist_vacancy_count">00</label>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="row mb-2">
                            <label class="col-4 text-dark fs-7 fw-semibold">Entity</label>
                            <label class="col-1 text-black fs-6 fw-bold">:</label>
                            <label class="col-7 text-black fs-7 fw-semibold" id="shortlist_company_name">-</label>
                        </div>
                        <div class="row mb-2">
                            <label class="col-4 text-dark fs-7 fw-semibold">Applied Count</label>
                            <label class="col-1 text-black fs-6 fw-bold">:</label>
                            <label class="col-7 text-black fs-7 fw-semibold" id="shortlist_applied_count">00</label>
                        </div>
                        
                    </div>
                    <input type="hidden" id="shortlist_job_request_id" >
                    <div class="col-lg-12">
                        <div class="table-responsive">
                            <table class="table align-middle table-row-dashed table-striped table-hover gy-1 gs-2 std_list_page" id="studs_table_event_attendance">
                                <thead>
                                    <tr class="text-start align-top fw-bold fs-7 gs-0 bg-primary">
                                        <th class="w-200px"><input type="checkbox" id="checkAll" class="form-check-input border-white me-1" checked/>Applicant</th>
                                        <th class="min-w-100px">Mobile No</th>
                                        <th class="min-w-100px">Email ID</th>
                                        <!-- <th class="w-150px  "> Shortlist </th> -->
                                        <th class="min-w-100px">Ai Summary</th>
                                    </tr>
                                </thead>
                                <tbody class="text-gray-600 fw-semibold fs-7" style="scrollbar-width: thin; max-height:400px; overflow-y:auto;" id="shortlist_candidate_tbody">
                                    <tr>
                                        <td colspan="5" class="text-center"> No Data Available </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="d-flex justify-content-end my-1">
                        <button type="button" id="updateShortlistBtn" class="btn btn-primary">Update Shortlist</button>
                    </div>
                </div>
            </div>
            <!--end::Modal body-->
        </div>
        <!--end::Modal content-->
    </div>
    <!--end::Modal dialog-->
</div>

<div class="modal fade" id="kt_modal_shortlist_candidate_view" 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">
            <!--begin::Modal header-->
            <div class="modal-header justify-content-end border-0 pb-0">
                <!--begin::Close-->
                <div class="btn btn-sm btn-icon btn-active-color-primary" 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="none" 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="currentColor" />
                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
                        </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">
                <!--begin::Heading-->
                <div class="mb-6">
                    <h3 class="text-center text-black">Applied Candidates 
                        <!-- <label class="me-4 badge bg-warning text-black rounded fw-bold fs-4">Email</label> -->
                    </h3>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="row mb-2">
                            <label class="col-4 text-dark fs-7 fw-semibold">Job Role</label>
                            <label class="col-1 text-black fs-6 fw-bold">:</label>
                            <label class="col-7 text-black fs-7 fw-semibold" id="shortlist_job_role_name_view">-</label>
                        </div>
                        <div class="row mb-2">
                            <label class="col-4 text-dark fs-7 fw-semibold">Vacancy Count</label>
                            <label class="col-1 text-black fs-6 fw-bold">:</label>
                            <label class="col-7 text-black fs-7 fw-semibold" id="shortlist_vacancy_count_view">00</label>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="row mb-2">
                            <label class="col-4 text-dark fs-7 fw-semibold">Entity</label>
                            <label class="col-1 text-black fs-6 fw-bold">:</label>
                            <label class="col-7 text-black fs-7 fw-semibold" id="shortlist_company_name_view">-</label>
                        </div>
                        <div class="row mb-2">
                            <label class="col-4 text-dark fs-7 fw-semibold">Applied Count</label>
                            <label class="col-1 text-black fs-6 fw-bold">:</label>
                            <label class="col-7 text-black fs-7 fw-semibold" id="shortlist_applied_count_view">00</label>
                        </div>
                        
                    </div>
                    <div class="col-lg-12">
                        <div class="table-responsive">
                            <table class="table align-middle table-row-dashed table-striped table-hover gy-1 gs-2 std_list_page" id="studs_table_event_attendance_view">
                                <thead>
                                    <tr class="text-start align-top fw-bold fs-7 gs-0 bg-primary">
                                        <th class="w-200px">Applicant</th>
                                        <th class="min-w-100px">Mobile No</th>
                                        <th class="min-w-100px">Email ID</th>
                                        <th class="w-150px  "> Applied Date </th>
                                        <th class="min-w-100px">Ai Summary</th>
                                    </tr>
                                </thead>
                                <tbody class="text-gray-600 fw-semibold fs-7" style="scrollbar-width: thin; max-height:400px; overflow-y:auto;" id="shortlist_candidate_tbody_view">
                                    <tr>
                                        <td colspan="5" class="text-center"> No Data Available </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                </div>
            </div>
            <!--end::Modal body-->
        </div>
        <!--end::Modal content-->
    </div>
    <!--end::Modal dialog-->
</div>

    <div class="modal fade" id="kt_modal_interview_schedule_view" 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">
                            <h3 class="text-black">View Interview Schedule</h3>
                        </div>
                    </div>
                </div>
                <!--end::Modal header-->
                <!--begin::Modal body-->
                <div class="modal-body pt-0 pb-10 px-10 px-xl-20 bg-white ">
                    <div class="row mb-2">
                        <div class="row">
                            <div class="d-flex align-items-center justify-content-between mt-2">
                                <div>
                                    <div class="text-muted small">Job Role</div>
                                    <div class="fw-semibold text-primary" id="schedule_job_role"> </div>
                                </div>
                                <span class="badge px-3 py-2" id="schedule_job_entity"> </span>
                            </div>
                        </div>

                        <hr>
                
                        <h6 class="fw-semibold mb-3">Interview Stages</h6>
                        
                        <div id="confirmStageList" class="vstack gap-3"></div>
                    </div>
                </div>
            </div>
            <!--end::Modal content-->
        </div>
        <!--end::Modal dialog-->
    </div>



<!--begin::Modal - Add Participants-->
<div class="modal fade" id="kt_modal_add_paticipants" tabindex="-1" aria-hidden="true" data-bs-keyboard="false" data-bs-backdrop="static">
    <!--begin::Modal dialog-->
    <div class="modal-dialog modal-xl">
        <!--begin::Modal content-->
        <div class="modal-content rounded">
            <!--begin::Modal header-->
            <div class="modal-header justify-content-end border-0 pb-0">
                <!--begin::Close-->
                <div class="btn btn-sm btn-icon btn-active-color-primary" 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="none" 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="currentColor" />
                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
                        </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">
                <!--begin::Heading-->
                <div class="mb-4 text-center">
                    <h3 class="text-center mb-4 text-black">Add Candidate - <span id="job_name" class="text-primary">Job</span></h3>
                </div>
                
                <form id="jobApplyForm" action="{{ route('add_job_candidate') }}" method="POST" enctype="multipart/form-data" autocomplete="off">
                    @csrf
                    <input type="hidden" name="apply_job_request_id" id="apply_job_request_id">
                    <input type="hidden" name="apply_candidate_id" id="apply_candidate_id">
                    <input type="hidden" name="apply_applicant_id" id="apply_applicant_id">
                    <input type="hidden" name="resume_check" id="resume_check">
                    <div class="row mt-2">
                        <div class="col-4 border rounded p-2">
                            <div id="notCandidateList">
                                <input type="text" id="candidateSearch" class="form-control mb-2" placeholder="Search Candidate">
                                <div id="candidateList"
                                    style="max-height:450px; overflow-y:auto;"
                                    class="list-group">
                                </div>
                            </div>
                        </div>
                        <div class="col-8 border rounded p-2 px-3">
                            <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" id="candidate_name" name="candidate_name" oninput="this.value=this.value.replace(/^\w/, txt=>txt.toUpperCase());"/>
                                    <div class="text-danger" id="candidate_name_err"></div>
                                </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" id="candidate_mobile" name="candidate_mobile" maxLength="10" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');"/>
                                    <div class="text-danger" id="candidate_mobile_err"></div>
                                </div>
                                <div class="col-lg-4 mb-2">
                                    <label class="text-black mb-1 fs-6 fw-semibold">Candidate Email Id<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" placeholder="Enter Candidate Email Id" id="candidate_email" name="candidate_email" oninput="this.value=this.value.toLowerCase();"/>
                                     <div class="text-danger" id="candidate_email_err"></div>
                                </div>
                                 <div class="col-lg-4 mb-2">
                                    <label class="text-black mb-1 fs-6 fw-semibold">Gender<span class="text-danger">*</span></label>
                                    <select id="candidate_gender" name="candidate_gender" class="select3 form-select">
                                        <option value="">Select Gender</option>
                                        <option value="1" selected>Male</option>
                                        <option value="2" >Female</option>
                                        <option value="3">Others</option>
                                    </select>
                                    <div class="text-danger" id="candidate_gender_err"></div>
                                </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="candidate_marital_status" name="candidate_marital_status" class="select3 form-select" >
                                        <option value="">Select Marital Status</option>
                                        <option value="1">Married</option>
                                        <option value="2">Single</option>
                                    </select>
                                    <div class="text-danger" id="candidate_marital_status_err"></div>
                                </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>
                                        @if(isset($source_list))
                                            @foreach($source_list as $source)
                                                <option value="{{ $source->sno }}" data-detail="{{$source->detail_check ?? 0}}" >{{ $source->source_name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                    <div class="text-danger" id="source_name_err"></div>
                                </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="candidate_qualification" name="candidate_qualification" class="select3 form-select" onchange="qualification_change()">
                                        <option value="">Select Qualification</option>
                                        <option value="1">UG</option>
                                        <option value="2" >PG</option>
                                        <option value="3" >Doctorate</option>
                                        <option value="Others" >Others</option>
                                    </select>
                                    <div class="text-danger" id="candidate_qualification_err"></div>
                                </div>
                                <div class="col-lg-4 mb-2" id="major_div">
                                    <label class="text-black mb-1 fs-6 fw-semibold">Major<span class="text-danger">*</span></label>
                                    <select id="candidate_major" name="candidate_major" class="select3 form-select" onchange="major_change_func()">
                                        <option value="">Select Major</option>
                                        
                                    </select>
                                    <div class="text-danger" id="candidate_major_err"></div>
                                </div>
                                <div class="col-lg-4 mb-2" id="candidate_other_qualify_div">
                                    <label class="text-black mb-1 fs-6 fw-semibold">Others<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" placeholder="Enter Other Qualification" id="candidate_other_qualify" name="candidate_other_qualify" oninput="this.value=this.value.replace(/^\w/, txt=>txt.toUpperCase());"/>
                                    <div class="text-danger" id="candidate_other_qualify_err"></div>
                                </div>
                                <div class="col-lg-4 mb-2">
                                    <label class="text-black mb-1 fs-6 fw-semibold">Experience Type<span class="text-danger">*</span></label>
                                    <select id="candidate_exper_type" name="candidate_exper_type" class="select3 form-select" onchange="toggleExperience()">
                                        <option value="">Select Type</option>
                                        <option value="1" selected>Fresher</option>
                                        <option value="2" >Experience</option>
                                    </select>
                                    <div class="text-danger" id="candidate_exper_type_err"></div>
                                </div>
                                <div class="col-lg-4 mb-2" id="experience_div" style="display:none;">
                                    <label class="text-black mb-1 fs-6 fw-semibold">Experience<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="candidate_exper_count" name="candidate_exper_count" placeholder="Enter Experience" maxlength="2" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');"/>
                                    <div class="text-danger" id="candidate_exper_count_err"></div>
                                </div>
                                <div class="col-lg-4 mb-2" id="resume_div">
                                    <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_resume" class="btn btn-sm btn-primary me-2" tabindex="0" data-bs-toggle="tooltip" data-bs-placement="top" title="Upload Resume">
                                                        <i class="mdi mdi-tray-arrow-up"></i>
                                                        <input type="file" id="upload_resume" class="file-in" hidden accept=".pdf,.doc,.docx" />
                                                    </label>
                                                    <button type="button" class="btn btn-sm btn-outline-danger file-reset" data-bs-toggle="tooltip" data-bs-placement="top" title="Reset Resume">
                                                        <i class="mdi mdi-reload"></i>
                                                    </button>
                                                </div>
                                                <div class="small">Allowed PDF, DOC, DOCX Max size of 5MB</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-danger" id="resume_err"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-end align-items-center mt-6">
                        <a href="javascript:;" class="btn btn-secondary me-3" data-bs-dismiss="modal">Cancel</a>
                        <button id="addApplicantBtn" type="button" class="btn btn-primary" onclick="validation_func()">
                            <span id="yesBtnText">Apply</span>
                            <span id="yesBtnLoader" style="display: none;" role="status" aria-hidden="true">
                                <span class="spinner-border spinner-border-sm"></span>
                                <span class="ms-2">Applying...</span>
                            </span>
                            
                        </button>
                    </div>
                </form>
            </div>
            <!--end::Modal body-->
        </div>
        <!--end::Modal content-->
    </div>
    <!--end::Modal dialog-->
</div>
<!--end::Modal - Add Participants-->

<div class="modal fade" id="kt_modal_qr_multi_location_popup" tabindex="-1" aria-hidden="true" data-bs-keyboard="false" data-bs-backdrop="static">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-center"><span id="docu_map" class="text-info"></span> Multiple Locations</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="multi_map" style="height:700px; width:100%;"></div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="kt_modal_view_scanner" 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">
            <!--begin::Modal header-->
            <div class="modal-header justify-content-end border-0 pb-0">
                <!--begin::Close-->
                <button type="button" class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal" aria-label="Close">
                    <!--begin::Svg Icon-->
                    <span class="svg-icon svg-icon-1">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" 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="currentColor" />
                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
                        </svg>
                    </span>
                    <!--end::Svg Icon-->
                </button>
                <!--end::Close-->
            </div>
            <!--end::Modal header-->

            <!--begin::Modal body-->
            <div class="modal-body pt-0 pb-10 px-10 px-xl-20">
                <!--begin::Heading-->
                <div class="mb-4 text-center">
                    <h3 class="text-center mb-4 text-black">QR Job Application Scanner List</h3>
                </div>
                <!--end::Heading-->
                <!--begin::Form-->
                    <div class="row">
                        <!-- Lead Name -->
                        <div class="col-lg-4 mb-3">
                            <label class="text-dark mb-1 fs-6 fw-semibold">Qr Job Name </label>
                            <br><label id="qr_event_name_scan" class="text-dark mb-1 mt-2 fs-5 fw-bold" ></label>
                        </div>

                        <div class="col-lg-4 mb-3">
                            <label class="text-dark mb-1 fs-6 fw-semibold">Entity</label>
                            <br><label id="branchId_scan" class="text-dark mb-1 fs-5 fw-bold mt-2" ></label>
                        </div>
                    
                        
                        
                        <table class="mt-3 table align-middle table-row-dashed table-striped table-hover gy-1 gs-2 list_page_scroll3">
                            <thead>
                                <tr class="text-start align-top fw-bold fs-6 gs-0 bg-primary">
                                    <th class="min-w-100px">Date & Time</th>
                                    <th class="min-w-80px">Device</th>
                                    <th class="min-w-80px">Name</th>
                                    <th class="min-w-100px">Ip Address</th>
                                    <th class="min-w-100px">Latitude</th>
                                    <th class="min-w-100px">Longitude</th>
                                    <th class="min-w-100px">Action</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-600 fw-semibold fs-7" id="scanner_list_table_view">
                                
                            </tbody>
                        </table>
                    </div>
                <!--end::Form-->
            </div>
            <!--end::Modal body-->
        </div>
        <!--end::Modal content-->
    </div>
    <!--end::Modal dialog-->
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="https://js.pusher.com/7.0/pusher.min.js"></script>

<style>
  /* Customize Toastr container */
  .toast {
      background-color: #39484f;
  }

  /* Customize Toastr notification */
  .toast-success {
      background-color: green;
  }

  /* Customize Toastr notification */
  .toast-error {
      background-color: red;
  }

</style>
<script>
  // Display Toastr messages
      @if (Session::has('toastr'))
          var type = "{{ Session::get('toastr')['type'] }}";
          var message = "{{ Session::get('toastr')['message'] }}";
          toastr[type](message);
      @endif
</script>

<script>
    $('#branch_filter').click(function() {
        $('.branch_filter').slideToggle('slow');
    });
</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("-");
            $('#lead_week_st_dt_fill').val(firstday);
            $('#lead_week_ed_dt_fill').val(lastday);

        }
        // 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>
    $(".list_page").DataTable({
        "ordering": false,
        // "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>
    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; }
    }

        var pusher = new Pusher('9996b96e908059a0d53f', {
            cluster: 'ap2',
            encrypted: true
        });

        var channel = pusher.subscribe('jobrequests');

        channel.bind('JobRequestEvent', function(e) {
            console.log('Pusher Event:', e);

            const id = e.sno || e.id;
            if (!id) return;

            const tableBody = document.getElementById('list-table-body');

            // Remove "No Data Found" row if exists
            const noDataRow = tableBody.querySelector('.no-data-found');
            if (noDataRow) noDataRow.remove();

            let row = document.getElementById('webhook-' + id);

            if (row) {
                // -----------------------------
                // UPDATE EXISTING ROW
                // -----------------------------

                // Column 1 → Job Role
                row.querySelector('td:nth-child(1) label').innerText = e.job_role_name ?? '-';
                row.querySelector('td:nth-child(1) .list_salary').innerText =  `${e.min_salary ?? 0} - ${e.max_salary ?? 0}`;

                // Column 2 → Company Name + Entity Name
                const companyBlock = row.querySelector('td:nth-child(2)');
                companyBlock.querySelector('label:nth-child(1)').innerText = e.company_name ?? "-";
                companyBlock.querySelector('label:nth-child(2)').innerText = e.entity_name ?? "-";

                // Column 3 → Location (STATIC: always Madurai)
                row.querySelector('td:nth-child(3) label').innerText = "Madurai";

                // Column 4 → Vacancy
                row.querySelector('td:nth-child(4) label').innerText = e.vacancy_count ?? '00';

                // Column 5 → Closing Date
                row.querySelector('td:nth-child(5) label').innerText =
                    e.closing_date ? formatDate(e.closing_date) : '-';

                // Column 6 → Salary
                // row.querySelector('td:nth-child(6) span.fs-7').innerText =
                //     `${e.min_salary ?? 0} - ${e.max_salary ?? 0}`;

                // Column 7 → Status
                let statusCol = row.querySelector('td:nth-child(6)');
                statusCol.innerHTML = getStatusBadge(e.status,e);

            } else {
                // -----------------------------
                // INSERT NEW ROW
                // -----------------------------
                tableBody.insertAdjacentHTML("afterbegin", buildRow(e, 1));
            }
        });


        // Helper: Status Badge Renderer  -------------------------
        function getStatusBadge(status,e) {
            if (status == 0) {
                return `
                    <span class="badge border border-warning rounded bg-white text-black fw-semibold fs-7" data-bs-toggle="dropdown">
                        Waiting For Resource Start
                    </span>
                    <div class="dropdown-menu dropdown-menu-end" style="width: 200px;">
                        <a href="javascript:;" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#kt_modal_approve_job"onclick="updatelevelStatus('${e.job_role_name}','${e.sno}',1)">Resource Start</a>
                        <a href="javascript:;" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#kt_modal_reject_job"onclick="updatelevelStatus('${e.job_role_name}','${e.sno}',3)">On Hold</a>
                    </div>
                    
                `;
            }else if (status == 1) {
                return `<span class="badge rounded bg-success text-white fs-7 fw-semibold position-relative">Resource Started
                
                </span>`;
                
            }
            else if (status == 3) {
                return `<span class="badge rounded bg-danger text-white fs-7 fw-semibold position-relative">On Hold </span>`;
            }
            else if (status == 4) {
                return `<span class="badge rounded bg-warning text-black fs-7 fw-semibold position-relative">Processing</span>`;
            }
             else if (status == 5) {
                return `<span class="badge rounded bg-success text-white fs-7 fw-semibold position-relative">Completed</span>`;
            }
            else{
                return `
                <span class="badge border border-warning rounded bg-white text-black fw-semibold fs-7" data-bs-toggle="dropdown">
                        Waiting For Approval
                    </span>
                    <div class="dropdown-menu dropdown-menu-end" style="width: 200px;">
                        <a href="javascript:;" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#kt_modal_approve_job"onclick="updatelevelStatus('${e.job_role_name}','${e.sno}',1)">Resource Start</a>
                        <a href="javascript:;" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#kt_modal_reject_job"onclick="updatelevelStatus('${e.job_role_name}','${e.sno}',3)">On Hold</a>
                    </div>
                `;
            }
           
        }
   
    function buildRow(item,index) {    
        let skillsJson = safeJsonParse(item.skill_required); 
        let skillsArray = safeJsonParse(skillsJson);  
        let skillNames = Array.isArray(skillsArray)
            ? skillsArray.map(s => s.value)
            : [];

        let displaySkills = skillNames.join(", ");

            let exp_types = JSON.parse(item.exp_type_ids);   
            let exp_years = item.experience;   
            let labels = {
                "1": "Fresher",
                "2": "Experienced"
            };
            let displayList = exp_types.map(type => {
                if (type == "2") {
                    return `${labels[type]} (${exp_years} Years)`;
                }
                return labels[type];
            });
            let displayText = displayList.join(", ");
           
            var data = typeof item.data === 'string' ? JSON.parse(item.data) : item.data;
            
            let statuBadge = '';
            let status = item.status;
            if (status == 0) {
                if( item.interview_schedule_status == 1){
                    statuBadge= `
                        <span class="badge border border-warning rounded bg-white text-black fw-semibold fs-7" data-bs-toggle="dropdown">
                            Waiting For Resource Start
                        </span>
                        <div class="dropdown-menu dropdown-menu-end" style="width: 200px;">
                            <a href="javascript:;" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#kt_modal_approve_job"onclick="updatelevelStatus('${item.job_role_name}','${item.sno}',1)">Resource Start</a>
                            <a href="javascript:;" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#kt_modal_reject_job"onclick="updatelevelStatus('${item.job_role_name}','${item.sno}',3)">On Hold</a>
                        </div>
                        
                    `;
                }else{
                    statuBadge=  
                    `<a href="javascript:;" class="position-relative" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#kt_modal_alert_schedule_create" onclick="openAlertModel('${item.job_role_name}','${item.short_encrypt_id}')">
                        <span class="badge border border-warning rounded bg-white text-black fw-semibold fs-7">Waiting For Resource Start
                        ${item.applicants_count > 0 ? `
                            <span class="badge bg-danger badge-pill position-absolute count_badge translate-middle animate__animated animate__pulse animate__infinite rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Applied Counts">
                            ${item.applicants_count > 0 ? item.applicants_count : ''}
                            </span>`:''}
                        </span>
                    </a>
                    `;
                }
            }else if (status == 1) {
                if( item.interview_schedule_status == 1){
                    statuBadge=  item.applicants_count > 0 ? 
                    `<a href="javascript:;" class="position-relative" data-bs-toggle="dropdown">
                        <span class="badge rounded bg-success text-white fs-7 fw-semibold">Resource Started
                        </span>
                    </a>
                    
                    ` 
                    :
                    `<a href="javascript:;" class="position-relative">
                        <span class="badge rounded bg-success text-white fs-7 fw-semibold">Resource Started</span>
                    </a>`;
                }else{
                    statuBadge=  
                    `<a href="javascript:;" class="position-relative" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#kt_modal_alert_schedule_create" onclick="openAlertModel('${item.job_role_name}','${item.short_encrypt_id}')">
                        <span class="badge rounded bg-success text-white fs-7 fw-semibold">Resource Started
                        </span>
                    </a>
                    `;
                }
                
            }
            else if (status == 3) {
                statuBadge= `<span class="badge rounded bg-danger text-white fs-7 fw-semibold position-relative">On Hold </span>`;
            }
            else if (status == 4) {
                statuBadge= `<span class="badge rounded bg-warning text-black fs-7 fw-semibold position-relative">Processing</span>`;
            }
             else if (status == 5) {
                statuBadge=`<span class="badge rounded bg-success text-white fs-7 fw-semibold position-relative">Completed</span>`;
            }
            else{
               statuBadge=`
                <span class="badge border border-warning rounded bg-white text-black fw-semibold fs-7" data-bs-toggle="dropdown">
                        Waiting For Approval
                    </span>
                    <div class="dropdown-menu dropdown-menu-end" style="width: 200px;">
                        <a href="javascript:;" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#kt_modal_approve_job" onclick="updatelevelStatus('${item.job_role_name}','${item.sno}',1)">Resource Start</a>
                        <a href="javascript:;" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#kt_modal_reject_job"onclick="updatelevelStatus('${item.job_role_name}','${item.sno}',3)">On Hold</a>
                    </div>
                `;
            }
            
        return `
            <tr id="webhook-${item.sno}">
                <td style="position:relative;">
                    <div style="position:absolute; left:0; top:0; bottom:0; width:5px; background:${item.company_base_color || ''};"></div>
                    <label class="fs-7 fw-semibold text-black mb-2">${item.job_role_name}</label>
                    <div>
                        <label class="badge bg-warning text-black fw-bold">
                            <span class="mdi mdi-currency-rupee text-black fw-bold fs-8"></span>
                            <span class="fs-8 list_salary">${item.min_salary} - ${item.max_salary}</span>
                        </label>
                    </div>
                </td>
                <td>
                    <div class="d-flex align-items-start justify-content-center flex-column">
                        <label class="fw-semibold text-black fs-7 text-truncate d-block"
                            style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px;"
                            data-bs-toggle="tooltip" data-bs-placement="bottom"
                            title="${item.company_name}">
                            ${item.company_name}
                        </label>

                        <label class="fw-semibold fs-7 text-truncate badge bg-label-slack d-block"
                            style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px;"
                            data-bs-toggle="tooltip" data-bs-placement="bottom"
                            title="${item.entity_name}">
                            ${item.entity_name}
                        </label>
                    </div>
                </td>
                <td class="text-center">
                    <label class="fw-semibold text-center text-white fs-7 rounded-circle py-2 badge bg-google-plus">${item.vacancy_count >=10 ? item.vacancy_count :'0'+item.vacancy_count}</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"></i></span>
                        ${item.closing_date ? formatDate(item.closing_date) : '-'}
                    </label>
                    <label class="fs-7 d-block text-danger fw-semibold d-flex align-items-center justify-content-start gap-1 text-nowrap " data-bs-toggle="tooltip" data-bs-placement="bottom" title="Last Apply Date">
                        <span><i class="mdi mdi-calendar"></i></span>
                        ${item.last_apply_date ? formatDate(item.last_apply_date) : '-'}
                    </label>

                </td>
                <td class ="position-relative">
                    ${statuBadge}
                    
                </td>
                <td>
                    <a href="javascript:;" class="btn btn-icon btn-sm me-2 position-relative" data-bs-toggle="modal" data-bs-target="#kt_modal_add_paticipants" onclick="add_particpant_func('${item.sno}','${item.job_role_name}')">
                        <span data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add Candidate">
                            <i class="mdi mdi-account-multiple-plus fs-3 text-black"></i>
                                ${item.applicants_count > 0 ?
                                `<span class="badge bg-danger badge-pill position-absolute top-0 start-250 translate-middle animate__animated animate__pulse animate__infinite rounded-circle">
                                     ${item.applicants_count > 0 ? item.applicants_count : ''}
                                </span>`
                                :""
                                }
                            </span>
                    </a>
                    ${
                        item.interview_schedule_status == 0 ?
                        ` <a href="/hr_recruitment/interview_schedule/${item.short_encrypt_id}" class="btn btn-icon btn-sm" id="" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Interview Schedule">
                            <i class="mdi mdi-account-clock-outline fs-3 text-black"></i>
                        </a>`
                        :
                        `
                        <a href="javascript:;"  class="btn btn-icon btn-sm" id="" data-bs-toggle="modal" data-bs-target="#kt_modal_interview_schedule_view" onclick="interview_schedule_view_func('${item.sno}')">
                            <i class="mdi mdi-account-clock-outline fs-3 text-success"></i>
                        </a>
                        `
                    }
                    <span class="text-end">
                        <a href="javascript:;" class="btn btn-icon btn-sm" id="" data-bs-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                            <i class="mdi mdi-dots-vertical fs-3 text-black"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end" style="width: 200px !important;">
                        
                            <a href="{{ url('/apply_job/${item.short_encrypt_id}') }}" class="dropdown-item" >
                                <span> <i class="mdi mdi-briefcase-check-outline fs-3 text-black me-1"></i>Job Application</span>
                            </a>

                            <a href="javascript:;"
                            class="dropdown-item generate-qr-btn"
                            data-bs-toggle="modal"
                            data-bs-target="#kt_modal_qr_generate"
                            onclick="generateQr('${item.sno}', '${item.job_role_name}','${item.entity_name}','${item.last_apply_date}','${item.closing_date}','${item.company_base_color}')">
                                <span>
                                    <i class="mdi mdi-qrcode-scan fs-3 text-black me-1"></i>
                                    QR Download
                                </span>
                            </a>
                            <a href="javascript:;" onclick="MultiLocation('${item.sno}','${item.job_role_name}')" data-bs-toggle="modal" data-bs-target="#kt_modal_qr_multi_location_popup" class="dropdown-item">
                                <span><i class="mdi mdi-map-marker-radius fs-3 text-black me-1"></i></span>Map View                              
                            </a>
                            ${item.applicants_count > 0 ?
                            `<a href="javascript:;" onclick="candidateListView('${item.job_role_name}','${item.vacancy_count}','${item.entity_name}','${item.applicants_count}','${item.sno}','${item.short_encrypt_id}')" data-bs-toggle="modal" data-bs-target="#kt_modal_shortlist_candidate_view" class="dropdown-item">
                                <span><i class="mdi mdi-account-multiple-outline fs-3 text-black me-1"></i></span>Applied candidate                              
                            </a>`
                            :""
                            }
                            <a href="javascript:;" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#kt_modal_view_scanner" onclick="ScannerModel('${item.sno}','${item.job_role_name}','${item.entity_name}')" >
                                <span >
                                    <i class="mdi mdi-cog-counterclockwise fs-3 text-black"></i> Scanner View
                                </span>
                            </a>
                            <a href="javascript:;" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#kt_modal_interview_schedule_view" onclick="interview_schedule_view_func('${item.sno}')" >
                                <span >
                                    <i class="mdi mdi-calendar-month-outline fs-3 text-black"></i> Schedule View
                                </span>
                            </a>
                        </div>
                    </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;

        const url = `/hr_recruitment/job_request?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}`;

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

                // 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();
                $('[data-bs-toggle="tooltip"]').tooltip();
            })
            .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>
            </tr>
            `;
    }

    function NoDataFound(){
        return `
             <tr class="no-data-found">
                <td colspan="6" 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>
       
        $(document).ready(function () {
            $('.common_datepicker').datepicker({
                todayHighlight: true,
                autoclose: true,
                format: 'dd-M-yyyy'
            });
        });
     
    </script>

    <!-- status Change -->
 <script>
  function updatelevelStatus(name,Id, isChecked) {
    console.log(name)
        $('#update_status_name').text(name)
        $('#update_status_onhold_name').text(name)
        $('#update_status_id').val(Id)
        $('#update_status').val(isChecked)
    }
    function updateStatus() {
         var Id = $('#update_status_id').val()
         const status =$('#update_status').val()
         const last_apply_date =$('#last_apply_date').val()
        // const status = isChecked ? 0 : 1;
        fetch(`/job_request_status/${Id}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}' // Include CSRF token
                },
                body: JSON.stringify({
                    status: status,
                    last_apply_date: last_apply_date,
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 200) {
                    toastr.success('Status Updated successfully!');
                       window.location.href = '/hr_recruitment/job_request';
                }
            })
            .catch(error => {});
    }

    
</script>

<script>
    function EditModal(id){
        $('#edit_id').val(id);
        fetch(`/job_request_edit/${id}`)
            .then(response => response.json())
            .then(data => {
                if (data.status === 200) {
                    const job = data.data;
                    $('#job_role_name_edit').val(job.job_role_name);
                    $('#vacancy_count_edit').val(job.vacancy_count);
                    $('#experience_year_edit').val(job.experience);
                    $('#min_salary_edit').val(job.min_salary);
                    $('#max_salary_edit').val(job.max_salary);
                    if (job.closing_date) {
                        $('#closing_date_edit').val(formatDate(job.closing_date));
                    }
                    let expTypes = JSON.parse(job.exp_type_ids);
                    $('#exp_type_edit').val(expTypes).trigger('change'); 
                    let skillRaw = job.skill_required;
                    let skill1 = safeJsonParse(skillRaw);
                    let skill2 = safeJsonParse(skill1);      // second decode

                let skillsText = "";

                if (Array.isArray(skill2)) {
                    skillsText = skill2.map(s => s.value).join(", "); 
                }
                    $('#skill_KnowledgeTag_edit').val(skill1);

                    
                    $('#job_description_edit_text').val(job.job_description);


                } else {
                    console.error('Error fetching Job Request:', data.message);
                }
            })
            .catch(error => {
                console.error('Error fetching Job Request:', error);
            });
    }
</script>

<script>
//   function generateQr(id, event_name) {
//     $('#qr_job_role_name').text(event_name)
//     if (id) {
//       console.log("Working");
//       fetch(`/gen_job_qr/${id}/generate-qr`)
//         .then(res => res.json())
//         .then(data => {
//           if (data.status === 200) {
//             const qrImage = document.getElementById('qrImage');
//             qrImage.src = data.qr_base64;
//             qrImage.style.display = "block";
            
//             $('#download_qr_code_name').removeClass('d-none');
//             document.querySelector('#download_qr_code_name').textContent = data.link;

//             setTimeout(() => {
//               if (data.qr_base64) {
//                 const dataUrl = data.qr_base64 || "";
//                 const link = document.createElement("a");
//                 link.href = dataUrl;
//                 link.download = `${event_name}-qr-code.png`;
//                 link.click();
//               }
//             }, 500);
//           } else {
//             console.error("QR generation failed");
//           }
//         })
//         .catch(err => console.error(err));
//     }
//   }

        function generateQr(id, event_name,company_name,last_date,closing_date,base_color) {

            if (!id) return;

            // Reset UI
            $('#qr_job_company_name').text(company_name);
            $('#qr_job_role_name').text(event_name);
            $('#qr_job_last_apply_date').text(last_date ? formatDate(last_date) : '-');
            $('#qr_job_closing_date').text(closing_date ? formatDate(closing_date) : '-');
            $('#download_qr_code_name').addClass('d-none').text('');
            $('#qrImage').attr('src', '{{ asset("assets/egc_images/qr_code.png") }}');
            document.getElementById('qr_job_company_name').style.background=base_color;

            fetch(`/gen_job_qr/${id}/generate-qr`)
                .then(res => res.json())
                .then(data => {

                    if (data.status !== 200 || !data.qr_base64) {
                        toastr.error('QR generation failed');
                        return;
                    }

                    // Show QR
                    $('#qrImage')
                        .attr('src', data.qr_base64)
                        .fadeIn(200);

                    // Store link for copy
                    $('#download_qr_code_name')
                        .removeClass('d-none')
                        .text(data.link);

                    // Auto download (optional UX)
                    setTimeout(() => {
                        const link = document.createElement('a');
                        link.href = data.qr_base64;
                        link.download = `${event_name}-qr-code.png`;
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                    }, 400);
                })
                .catch(err => {
                    console.error(err);
                    toastr.error('Something went wrong');
                });
        }


    function copyText(element) {

        const targetId = element.getAttribute('data-target');
        const targetEl = document.getElementById(targetId);

        if (!targetEl || !targetEl.textContent.trim()) {
            toastr.warning('Nothing to copy');
            return;
        }

        const text = targetEl.textContent.trim();

        if (navigator.clipboard && window.isSecureContext) {
            navigator.clipboard.writeText(text)
                .then(() => successCopy(element))
                .catch(() => fallbackCopy(text, element));
        } else {
            fallbackCopy(text, element);
        }
    }

    function fallbackCopy(text, element) {
        const textarea = document.createElement('textarea');
        textarea.value = text;
        textarea.style.position = 'fixed';
        textarea.style.opacity = '0';

        document.body.appendChild(textarea);
        textarea.select();

        try {
            document.execCommand('copy');
            successCopy(element);
        } catch {
            toastr.error('Copy failed');
        }

        document.body.removeChild(textarea);
    }

    function successCopy(element) {
        toastr.success('Link copied');

        // Small UX feedback
        const icon = element.querySelector('i');
        icon.classList.replace('mdi-content-copy', 'mdi-check');
        icon.classList.add('text-success');

        setTimeout(() => {
            icon.classList.replace('mdi-check', 'mdi-content-copy');
            icon.classList.remove('text-success');
        }, 1200);
    }


//     document.addEventListener('DOMContentLoaded', function () {
//     document.querySelectorAll('.cpy-btn').forEach(btn => {
//         btn.addEventListener('click', function () {
//             const targetId = this.getAttribute('data-target');
//             const text = document.getElementById(targetId).textContent;
//              console.log(text)
//             // Copy text to clipboard
//             navigator.clipboard.writeText(text).then(() => {
//                 // ✅ Optional: show toast/alert
//                 toastr.success('Copied: ' + text);
//             }).catch(err => {
//                 console.error('Failed to copy text: ', err);
//             });
//         });
//     });
// });

</script>

<script>
    function candidateListView(role_name,vacancy_count,entity_name,applied_count,request_id,encrypt_id) {
       
        $("#shortlist_job_role_name_view").text(role_name || '-');
        $('#shortlist_vacancy_count_view').text(vacancy_count || '0');
        $('#shortlist_applied_count_view').text(applied_count || '0');
        $('#shortlist_company_name_view').text(entity_name || '-');

        $.ajax({
            url: '/applicant_list_by_job_request/',
            type: 'GET',
            data: { request_id: encrypt_id },
            success: function (response) {

                let tbody = $('#studs_table_event_attendance_view tbody');
                tbody.empty();

                if (response.status === 200 && response.data.length > 0) {

                    

                    response.data.forEach((student, index) => {

                        /* AI Match Score */
                        let matchScore = parseInt(student.match_score || 0);
                        let rowClass = '';
                        let defaultCheck = '';

                        if (matchScore >= 80) rowClass = 'table-success';
                        else if (matchScore >= 60) rowClass = 'table-info';
                        else if (matchScore >= 40) rowClass = 'table-warning';
                        else rowClass = '';

                        if (matchScore >= 80) defaultCheck = 'checked';
                        else if (matchScore >= 60) defaultCheck = 'checked';
                        else if (matchScore >= 40) defaultCheck = '';
                        else defaultCheck = '';

                        /* AI Summary */
                        let aiSummary = student.ai_summary
                            ? student.ai_summary
                            : 'AI analysis not available';

                        let row = `
                            <tr class="${rowClass}">
                                <td>
                                    <div class="d-flex gap-2 align-items-center">
                                        <div>
                                            <div class="fw-semibold">${student.applicant_name}</div>
                                            <small class="text-muted">Match: ${matchScore}%</small>
                                            <div>
                                             
                                            </div> 
                                        </div>
                                    </div>
                                </td>

                                <td>${student.mobile || '-'}</td>

                                <td class="text-truncate max-w-150px" 
                                    title="${student.email || '-'}">
                                    ${student.email || '-'}
                                </td>
                                <td>${formatDate(student.created_at) || '-'}</td>
                                <td>
                                    <div class="p-2 rounded bg-white">
                                        <strong>AI Insight:</strong>
                                        <p class="mb-0 small text-muted">
                                            ${aiSummary}
                                        </p>
                                    </div>
                                </td>
                            </tr>
                        `;

                        tbody.append(row);
                    });

                } else {
                    tbody.append(`
                        <tr>
                            <td colspan="5" class="text-center text-muted">
                                No candidates found
                            </td>
                        </tr>
                    `);
                }
            },
            error: function () {
                console.error('Failed to fetch applicant list');
            }
        });
    }

    function candidateList(role_name,vacancy_count,entity_name,applied_count,request_id,encrypt_id) {

        $('#shortlist_job_request_id').val(request_id);
        $("#shortlist_job_role_name").text(role_name || '-');
        $('#shortlist_vacancy_count').text(vacancy_count || '0');
        $('#shortlist_applied_count').text(applied_count || '0');
        $('#shortlist_company_name').text(entity_name || '-');
        $('#updateShortlistBtn').prop('disabled', true);

        $.ajax({
            url: '/applicant_list_by_job_request/',
            type: 'GET',
            data: { request_id: encrypt_id },
            success: function (response) {

                let tbody = $('#studs_table_event_attendance tbody');
                tbody.empty();

                if (response.status === 200 && response.data.length > 0) {

                    $('#updateShortlistBtn').prop('disabled', false);

                    response.data.forEach((student, index) => {

                        /* AI Match Score */
                        let matchScore = parseInt(student.match_score || 0);
                        let rowClass = '';
                        let defaultCheck = '';

                        if (matchScore >= 80) rowClass = 'table-success';
                        else if (matchScore >= 60) rowClass = 'table-info';
                        else if (matchScore >= 40) rowClass = 'table-warning';
                        else rowClass = '';

                        if (matchScore >= 80) defaultCheck = 'checked';
                        else if (matchScore >= 60) defaultCheck = 'checked';
                        else if (matchScore >= 40) defaultCheck = '';
                        else defaultCheck = '';

                        /* AI Summary */
                        let aiSummary = student.ai_summary
                            ? student.ai_summary
                            : 'AI analysis not available';

                        let row = `
                            <tr class="${rowClass}">
                                <td>
                                    <div class="d-flex gap-2 align-items-center">
                                        <div>
                                            <input class="form-check-input"
                                                type="checkbox"
                                            ${defaultCheck}
                                                name="shortlist_check_${student.sno}"
                                                id="shortlist_check_${student.sno}"
                                                value="1">
                                        </div>
                                        <div>
                                            <div class="fw-semibold">${student.applicant_name}</div>
                                            <small class="text-muted">Match: ${matchScore}%</small>
                                            <div>
                                            ${defaultCheck == 'checked' ? 
                                            `<label class="form-check-label text-success shortlistcheckbox-label">
                                                Eligible
                                            </label>`
                                            :
                                            ` <label class="form-check-label text-danger shortlistcheckbox-label">
                                                Not Eligible
                                            </label>
                                            `
                                            }  
                                            </div> 
                                        </div>
                                    </div>
                                </td>

                                <td>${student.mobile || '-'}</td>

                                <td class="text-truncate max-w-150px" 
                                    title="${student.email || '-'}">
                                    ${student.email || '-'}
                                </td>
                                <td>
                                    <div class="p-2 rounded bg-white">
                                        <strong>AI Insight:</strong>
                                        <p class="mb-0 small text-muted">
                                            ${aiSummary}
                                        </p>
                                    </div>
                                </td>
                            </tr>
                        `;

                        tbody.append(row);
                    });

                } else {
                    tbody.append(`
                        <tr>
                            <td colspan="5" class="text-center text-muted">
                                No candidates found
                            </td>
                        </tr>
                    `);
                }
            },
            error: function () {
                console.error('Failed to fetch applicant list');
            }
        });
    }


    $(document).ready(function() {
    // Handle the "Check All" checkbox
    $('#checkAll').on('change', function() {
        let isChecked = $(this).prop('checked');
        $('#studs_table_event_attendance tbody input[type="checkbox"]').each(function() {
        $(this).prop('checked', isChecked);
            toggleCheckboxText($(this)); // Update color for each checkbox
        });
    });

    // Handle individual checkboxes
    $('#studs_table_event_attendance tbody').on('change', 'input[type="checkbox"]', function() {
        let isChecked = $(this).prop('checked');
        toggleCheckboxText($(this));  // Update color for the changed checkbox

        // Check if all checkboxes are checked to toggle the "Check All" checkbox
        let allChecked = $('#studs_table_event_attendance tbody input[type="checkbox"]').length === $('#studs_table_event_attendance tbody input[type="checkbox"]:checked').length;
        $('#checkAll').prop('checked', allChecked);
    });

    // Function to toggle the checkbox color
    function toggleCheckboxText(checkbox) {
        let label = checkbox.closest('td').find('.shortlistcheckbox-label'); // Find the span that contains the text (Present/Absent)
        if (checkbox.prop('checked')) {
        label.text('Eligible').removeClass('text-danger').addClass('text-success');
        } else {
        label.text('No Eligible').removeClass('text-success').addClass('text-danger');
        }
    }

     $('#updateShortlistBtn').on('click', function() {
        $(this).prop('disabled', true); // Disable button to prevent multiple clicks
        let shortlistData = [];
        $('#studs_table_event_attendance tbody input[type="checkbox"]').each(function() {
        let studentSno = $(this).attr('id').split('_')[2];  // Extract student sno from checkbox id
        let shortListStatus = $(this).prop('checked') ? 1 : 0;
        shortlistData.push({
            sno: studentSno,
            shortListStatus: shortListStatus
        });
        });
        
        var shortlist_job_request_id = $('#shortlist_job_request_id').val();
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

        // Send updated shortlist data to the backend
        $.ajax({
        url: '/update_shortlist_candidate',  // Your API endpoint
        type: 'POST',
        headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
        data: JSON.stringify({ shortlist_data: shortlistData , job_request_id:shortlist_job_request_id }),
        contentType: 'application/json',
        success: function(response) {
            if (response.success) {
                window.location.reload();
            toastr.success('Shortlist updated successfully!');
            } else {
            toastr.error('Error updating shortlist.');
            $('#updateShortlistBtn').prop('disabled', false);
            }
        },
        error: function(xhr, status, error) {
            console.error('Error updating shortlist:', error);
            $('#updateShortlistBtn').prop('disabled', false);
        }
        });
    });
    }); 
</script>

<script>
document.getElementById("downloadPng").addEventListener("click", function (e) {
  e.preventDefault();

  const svg = document.querySelector("#downloadPng svg");
  const serializer = new XMLSerializer();
  const svgStr = serializer.serializeToString(svg);

  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");

  const img = new Image();
  const svgBlob = new Blob([svgStr], { type: "image/svg+xml;charset=utf-8" });
  const url = URL.createObjectURL(svgBlob);

  img.onload = function () {
    canvas.width = img.width;
    canvas.height = img.height;

    // 🔹 NO background fill → transparent PNG
    ctx.drawImage(img, 0, 0);

    URL.revokeObjectURL(url);

    const pngUrl = canvas.toDataURL("image/png");

    const a = document.createElement("a");
    a.href = pngUrl;
    a.download = "huggingface-logo.png";
    a.click();
  };

  img.src = url;
});
</script>


<script>
    function openAlertModel(name, encrypt_id){
        $('#alert_job_request_name').text(name);
    }
</script>

<script>
    let offset = 0;
    let isLoadingCandidate = false;
    let hasMore = true;
    function loadCandidatesLazy(jobId, reset = false) {

    if (isLoadingCandidate || !hasMore) return;
    isLoadingCandidate = true;

    if (reset) {
        offset = 0;
        hasMore = true;
        $('#candidateList').empty();
    }

    $('#candidateList').append('<div id="loader" class="text-center py-2">Loading...</div>');

    $.get('/not_apply_list_by_job_request', {
        request_id: jobId,
        offset: offset,
        search: $('#candidateSearch').val()
    }, function (res) {

        $('#loader').remove();

        if (res.data.length === 0) {
            hasMore = false;
            return;
        }

        res.data.forEach(candidate => {
            $('#candidateList').append(`
                <a href="javascript:void(0)"
                   class="list-group-item candidate-item"
                   data-candidate='${JSON.stringify(candidate)}'>
                    <strong>${candidate.applicant_name}</strong><br>
                    <small>${candidate.mobile}</small>
                </a>
            `);
        });

        offset = res.next_offset;
        isLoadingCandidate = false;
    });
}
    // function add_particpant_func(id,eventName){
    //     resetCandidateForm()
    //     $('#apply_job_request_id').val(id)
    //     // $('#add_part_event_category').text(eventCategory)
    //     $('#job_name').text(eventName)
    //     $('#candidateList').html('<div class="text-center">Loading...</div>');
    //     $.ajax({
    //         url: '/not_apply_list_by_job_request',
    //         type: 'GET',
    //         data: { request_id: id },
    //         success: function (response) {

    //             let html = '';
    //             if (response.status === 200 && response.data.length > 0) {
    //                 response.data.forEach((candidate, index) => {

    //                     html += `
    //                             <a href="javascript:void(0)"
    //                             class="list-group-item list-group-item-action candidate-item" 
    //                             data-search="${candidate.applicant_name.toLowerCase()} ${candidate.mobile} ${candidate.email}"
    //                             data-candidate='${JSON.stringify(candidate)}'
    //                             >
    //                                 <strong>${candidate.applicant_name}</strong><br>
    //                                 <small>${candidate.mobile}</small>
    //                             </a>
    //                         `;

    //                 });

    //             } else {
    //                html = '<div class="text-center text-muted">No candidates found</div>';
    //             }

    //             $('#candidateList').html(html);
    //         },
    //         error: function () {
    //             console.error('Failed to fetch applicant list');
    //         }
    //     });
        
    // }

    $('#candidateList').on('scroll', function () {
        const el = this;

        if (el.scrollTop + el.clientHeight >= el.scrollHeight - 40) {
            loadCandidatesLazy($('#apply_job_request_id').val());
        }
    });

let searchTimer;
$('#candidateSearch').on('input', function () {
    clearTimeout(searchTimer);

    searchTimer = setTimeout(() => {
        loadCandidatesLazy($('#apply_job_request_id').val(), true);
    }, 400);
});

function add_particpant_func(id, eventName) {
    resetCandidateForm();
    $('#apply_job_request_id').val(id);
    $('#job_name').text(eventName);

    offset = 0;
    hasMore = true;
    $('#candidateList').empty();

    loadCandidatesLazy(id);
}
</script>
<script>
    function MultiLocation(id, name) {
        $('#docu_map').html(name);
        $.ajax({
            url: "{{ route('qr.scanner.job_request.map') }}",
            method: "GET",
            data: { sno: id },
            beforeSend: function () {
                $('#multi_map').html('Loading map...');
            },
            success: function (locations) {
                if (locations.length > 0) {
                    $('#multi_map').html('<div id="map" style="height:700px; width:100%;"></div>');

                    const firstLoc = locations[0];
                    const map = L.map('map').setView([firstLoc.latitude, firstLoc.longitude], 5);

                    // --- Street (default OSM) ---
                    const streetLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                        attribution: ''
                    });

                    // --- Satellite (Esri) ---
                    const satelliteLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
                        attribution: ''
                    });

                    // Add default layer
                    streetLayer.addTo(map);

                    // Layer control (toggle)
                    const baseMaps = {
                        "Street View": streetLayer,
                        "Satellite View": satelliteLayer
                    };
                    L.control.layers(baseMaps).addTo(map);

                    const bounds = [];

                    locations.forEach(loc => {
                        const marker = L.marker([loc.latitude, loc.longitude]).addTo(map);
                        var applicant_name = loc.applicant_name;
                        marker.bindPopup(`${applicant_name ? '<b>' + applicant_name + '</b><br>' : ''}<b>IP: ${loc.name}</b><br>Lat: ${loc.latitude}, Lng: ${loc.longitude}`);
                        bounds.push([loc.latitude, loc.longitude]);
                    });

                    map.fitBounds(bounds);

                } else {
                    $('#multi_map').html('<p class="text-center text-danger mt-4 fs-4 fw-bold">No locations found</p>');
                }
            },
            error: function (xhr) {
                console.error(xhr.responseText);
            }
        });
    }
    function ScannerModel(id,event,branch) {
            $('#qr_event_name_scan').text('');
            $('#branchId_scan').text('');
            $('#qr_event_name_scan').text(event);
            $('#branchId_scan').text(branch);
            $.ajax({
                url: "{{ route('qr.scanner.job_request') }}",
                method: "GET",
                data: {
                    sno: id
                },
                beforeSend: function () {
                    $('#scanner_list_table_view').html('<tr><td colspan="7" class="text-center">Loading...</td></tr>');
                },
                success: function (response) {
                    if (response) {
                    $('#scanner_list_table_view').html(response);
                    } else {
                        $('#scanner_list_table_view').html('<tr><td colspan="7" class="text-center">No Record found</td></tr>');
                    }
                    // $('[data-bs-toggle="tooltip"]').tooltip();
                },
                error: function (xhr) {
                    console.error(xhr.responseText);
                }
            });
    }

    function ViewLocation(ip, lat, long) {
        if (lat && long) { // check if lat and long exist
            // Show the modal
            const mapModal = new bootstrap.Modal(document.getElementById('kt_modal_qr_location_popup'), {
                backdrop: 'static',
                keyboard: false
            });
            mapModal.show();

            // Insert a satellite map iframe inside the modal
            const modalContent = document.getElementById('Map_view');
            modalContent.innerHTML = `
                <div class="mb-4 text-center">
                    <h3 class="text-center text-danger fs-5 fw-bold mb-4">IP Address: ${ip}</h3>
                </div>
                <iframe
                    width="100%"
                    height="400"
                    style="border:0"
                    loading="lazy"
                    allowfullscreen
                    src="https://maps.google.com/maps?q=${lat},${long}&t=k&z=15&output=embed">
                </iframe>
            
            `;
        }
    }

    function toggleExperience() {
        var experType = document.getElementById('candidate_exper_type').value;
        var experienceDiv = document.getElementById('experience_div');

        if (experType === '2') { // Experience selected
            experienceDiv.style.display = 'block';
        } else {
            experienceDiv.style.display = 'none';
            document.getElementById('candidate_exper_count').value = ''; // Clear experience input
        }
    }
</script>
<script>
$(document).on('click', '.candidate-item', function () {

    const isActive = $(this).hasClass('active');

    $('.candidate-item').removeClass('active');

    if (isActive) {
        resetCandidateForm();
        return;
    }

    $(this).addClass('active');

    $('#candidate_name_err').text('');
    $('#candidate_mobile_err').text('');
    $('#candidate_email_err').text('');
    $('#candidate_gender_err').text('');
    $('#candidate_qualification_err').text('');
    $('#candidate_marital_status_err').text('');
    $('#candidate_major_err').text('');
    $('#candidate_exper_type_err').text('');
    $('#candidate_exper_count_err').text('');
    $('#source_name_err').text('');
    $('#resume_err').text('');

    let candidate = $(this).data('candidate');

    if(candidate.recruitment_id != 0) {
        candidate = mapOldCandidateData(candidate);
    }
    $('#apply_candidate_id').val(candidate.candidate_id);
    $('#apply_applicant_id').val(candidate.applicant_id);
    $('#candidate_name').val(candidate.applicant_name);
    $('#candidate_mobile').val(candidate.mobile);
    $('#candidate_email').val(candidate.email);
    $('#candidate_gender').val(candidate.gender).trigger('change');
    $('#candidate_marital_status').val(candidate.marital_status_id).trigger('change');
    $('#candidate_qualification').val(candidate.qualification_id).trigger('change');
    $('#source_name').val(candidate.source_id).trigger('change');
    $('#candidate_major').val(candidate.major);
    $('#candidate_exper_type').val(candidate.experience_id).trigger('change');
    $('#candidate_exper_count').val(candidate.experience_count);
  
    if(candidate.drive_data){
        $('#resume_div').hide();
        $('#resume_check').val(1);
    }else{
        $('#resume_div').show();
        $('#resume_check').val(0);
    }
    console.log(candidate)
    window.selectedCandidate = candidate;
});

function resetCandidateForm() {
    $('#candidate_name_err').text('');
    $('#candidate_mobile_err').text('');
    $('#candidate_email_err').text('');
    $('#candidate_gender_err').text('');
    $('#candidate_qualification_err').text('');
    $('#candidate_marital_status_err').text('');
    $('#candidate_major_err').text('');
    $('#candidate_exper_type_err').text('');
    $('#candidate_exper_count_err').text('');
    $('#source_name_err').text('');
    $('#resume_err').text('');

    $('#apply_candidate_id').val('');
    $('#apply_applicant_id').val('');
    $('#candidate_name').val('');
    $('#candidate_mobile').val('');
    $('#candidate_email').val('');
    $('#candidate_gender').val('').trigger('change');
    $('#candidate_marital_status').val('').trigger('change');
    $('#candidate_qualification').val('').trigger('change');
    $('#candidate_major').val('');
    $('#candidate_exper_type').val('').trigger('change');
    $('#candidate_exper_count').val('');
    $('#resume_div').show();
    $('#resume_check').val(0);
    window.selectedCandidate = "";
}
</script>


<script>
    // $('#candidateSearch').on('keyup', function () {

    //     let value = $(this).val().toLowerCase().trim();
    //     let visibleCount = 0;

    //     $('#candidateList .candidate-item').each(function () {

    //         const searchText = $(this).data('search');

    //         if (searchText.includes(value)) {
    //             $(this).show();
    //             visibleCount++;
    //         } else {
    //             $(this).hide();
    //         }
    //     });
    
    //     if (visibleCount === 0) {
    //         if (!$('#noCandidateFound').length) {
    //             $('#candidateList').append(
    //                 '<div id="noCandidateFound" class="text-center text-muted py-2">No candidate found</div>'
    //             );
    //         }
    //     } else {
    //         $('#noCandidateFound').remove();
    //     }
    // });
</script>
<script>
function validation_func() {
    let err = false; 

    // Full Name
    if (!$('#candidate_name').val().trim()) {
        $('#candidate_name_err').text('Full Name is required.');
        err = true;
    } else {
        $('#candidate_name_err').text('');
    }

    // Gender
    if (!$('#candidate_gender').val()) {
        $('#candidate_gender_err').text('Gender is required.');
        err = true;
    } else {
        $('#candidate_gender_err').text('');
    }

    // Mobile Number (must be exactly 10 digits)
    const mobile = $('#candidate_mobile').val().trim();
    const mobilePattern = /^[0-9]{10}$/;

    if (!mobile) {
        $('#candidate_mobile_err').text('Mobile Number is required.');
        err = true;
    } else if (!mobilePattern.test(mobile)) {
        $('#candidate_mobile_err').text('Mobile Number must be exactly 10 digits.');
        err = true;
    } else {
        $('#candidate_mobile_err').text('');
    }

    // Email
    const email = $('#candidate_email').val().trim();
    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

    if (!email) {
        $('#candidate_email_err').text('Email ID is required.');
        err = true;
    } else if (!emailPattern.test(email)) {
        $('#candidate_email_err').text('Enter a valid Email ID.');
        err = true;
    } else {
        $('#candidate_email_err').text('');
    }

    // Marital Status
    if (!$('#candidate_marital_status').val()) {
        $('#candidate_marital_status_err').text('Marital Status is required.');
        err = true;
    } else {
        $('#candidate_marital_status_err').text('');
    }

    // Qualification
    if (!$('#candidate_qualification').val()) {
        $('#candidate_qualification_err').text('Qualification is required.');
        err = true;
    } else {
        $('#candidate_qualification_err').text('');
    }
    if (!$('#candidate_major').val()) {
        $('#candidate_major_err').text('Major is required.');
        err = true;
    } else {
        if($('#candidate_major').val() =='Others'){
            if (!$('#candidate_other_qualify').val()) {
                $('#candidate_other_qualify_err').text('Qualification is required.');
                err = true;
            } else {
                $('#candidate_other_qualify_err').text('');
            }
        }else{
            $('#candidate_major_err').text('');
        }
        
    }

    // Experience Type
    const experType = $('#candidate_exper_type').val();
    if (!experType) {
        $('#candidate_exper_type_err').text('Please select Fresher or Experience.');
        err = true;
    } else {
        $('#candidate_exper_type_err').text('');
    }

    // Experience Count (only if Experience selected)
    if (experType === '2') {
        const experCount = $('#candidate_exper_count').val().trim();
        if (!experCount) {
            $('#candidate_exper_count_err').text('Experience is required.');
            err = true;
        } else {
            $('#candidate_exper_count_err').text('');
        }
    } else {
        $('#candidate_exper_count_err').text('');
    }

    // Resume
    if($('#resume_check').val() == '1'){
         $('#resume_err').text('');
    }else{
        if (!$('#upload_resume').val()) {
            $('#resume_err').text('Resume is required.');
            err = true;
        } else {
            $('#resume_err').text('');
        }
    }
    

    // Source
    if (!$('#source_name').val()) {
        $('#source_name_err').text('Source is required.');
        err = true;
    } else {
        $('#source_name_err').text('');
    }

    // Submit if no errors
    if (!err) {
        submit_form();
    }
}
</script>
<script>
    function submit_form() {
        const form = document.getElementById("jobApplyForm");
        const submitBtn = document.getElementById("addApplicantBtn");
        const submitBtnText = document.getElementById("yesBtnText");
        const submitBtnLoader = document.getElementById("yesBtnLoader");

        if (form) {
            submitBtn.disabled = true;
            submitBtnText.style.display = "none"; // Hide "Yes"
            submitBtnLoader.style.display = "inline-block"; // Show loader

            // Create FormData manually
            const formData = new FormData(form);
           
            $.ajax({
                url: form.action,
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    console.log("Success:", response);
                    if(response.status == '200'){
                        window.location.href = '/hr_recruitment/job_request/';
                        submitBtn.disabled = false;
                        submitBtnText.style.display = "inline-block"; // Show "Yes" again
                        submitBtnLoader.style.display = "none"; // Hide loader
                    } else {
                        toastr.error(response.message);
                        // Re-enable the button and reset the text
                        submitBtn.disabled = false;
                        submitBtnText.style.display = "inline-block"; // Show "Yes" again
                        submitBtnLoader.style.display = "none"; // Hide loader
                    }
                },
                error: function(err) {
                    console.error("Error:", err);
                    toastr.error(err.responseJSON.message || 'An error occurred while submitting the form.');
                    // In case of an error, re-enable the button and reset the text
                    submitBtn.disabled = false;
                    submitBtnText.style.display = "inline-block"; // Show "Yes" again
                    submitBtnLoader.style.display = "none"; // Hide loader
                }
            });
        }
    }

    function qualification_change(){
       var qualification_id= $('#candidate_qualification').val();

        var majorDropdown = $('#candidate_major');
        majorDropdown.empty().append('<option value="">Select Major</option>');

        if (qualification_id) {
            $.ajax({
                url: "{{ route('major_list_by_qualification') }}",
                type: "GET",
                data: {
                    qualification_id: qualification_id
                },
                success: function(response) {
                    if (response.status === 200 && response.data) {
                        response.data.forEach(function(state) {
                            majorDropdown.append($('<option></option>').attr(
                                'value', state.sno).text(state
                                .major_name));
                        });
                         majorDropdown.append('<option value="Others">Others</option>');
                         var candidate= window.selectedCandidate;
                         if (window.selectedCandidate && window.selectedCandidate.major_name_from_old) {
                            const oldMajor = window.selectedCandidate.major_name_from_old;
                            const matchVal = fuzzyMatchOption('#candidate_major option', oldMajor);
                            $('#candidate_major').val(matchVal || oldMajor).trigger('change');
                        }
                    }
                },
                error: function(error) {
                    console.error('Error fetching major:', error);
                }
            });

        }
    }
    major_change_func()
    function major_change_func(){
            var candidate_major =$('#candidate_major').val();
            if(candidate_major == 'Others'){
                $('#candidate_other_qualify_div').show();
            }else{
                $('#candidate_other_qualify_div').hide();
            }
       
        }

    function mapOldCandidateData(candidate) {
        if (!candidate.old_data) return candidate;

        try {
            const oldData = JSON.parse(candidate.old_data);

            // Helper function for fuzzy match
            function fuzzyMatchOption(selector, oldName) {
                oldName = oldName.toLowerCase().replace(/\./g, '').trim(); // normalize
                let matchVal = null;
                $(selector).each(function() {
                    const optionText = $(this).text().toLowerCase().replace(/\./g, '').trim();
                    if (optionText.includes(oldName) || oldName.includes(optionText)) {
                        matchVal = $(this).val();
                        return false; // break loop
                    }
                });
                return matchVal;
            }

            // Map qualification, source, experience
            candidate.qualification_id = fuzzyMatchOption('#candidate_qualification option', oldData.qualification_name);
            candidate.source_id = fuzzyMatchOption('#source_name option', oldData.source_name);
            candidate.experience_id = oldData.experience_id > 1 ? 2 : 1;

            // Experience count
            candidate.experience_count = oldData.experience_name.match(/\d+/) ? parseInt(oldData.experience_name.match(/\d+/)[0]) : 0;

            // Major name (we will select after qualification dropdown is loaded)
            candidate.major_name_from_old = oldData.major_name;

        } catch (err) {
            console.error('Failed to parse old_data', err);
        }

        return candidate;
    }

    function fuzzyMatchOption(selector, oldName) {
        oldName = oldName.toLowerCase().replace(/\./g, '').trim();
        let matchVal = null;
        $(selector).each(function() {
            const optionText = $(this).text().toLowerCase().replace(/\./g, '').trim();
            if (optionText.includes(oldName) || oldName.includes(optionText)) {
                matchVal = $(this).val();
                return false;
            }
        });
        return matchVal;
    }
</script>

<script>

        // function interview_schedule_view_func(id) {

        //     const container = document.getElementById('confirmStageList');
        //     container.innerHTML = '';
        //     let lastScheduledDate = new Date();

        //     if(id){
        //         $.ajax({
        //             url: "{{ route('get_interview_schedule_by_job_id') }}",
        //             type: "GET",
        //             data: {
        //                 job_request_id: id
        //             },
        //             success: function(response) {

        //                 if (response.status === 200 && response.data) {
        //                      [...selectedTypes].forEach((type, indextype) => {
        //                     const info = interviewTypes[type];
        //                     const selectedQuestionIds = questions[type] || [];
        //                     const questionBank = questionBankByCategory[type] || [];
        //                     let modeInfo = modeOptions.find(m => m.value == configs[type].mode);
        //                     const questionHTML = selectedQuestionIds.length
        //                         ? selectedQuestionIds.map((qid, i) => {
        //                             const qObj = questionBank.find(q => q.id === qid);

        //                             return `
        //                                 <li class="small text-muted">
        //                                     <div class="fw-medium text-dark">
        //                                         Q${i + 1}. ${qObj?.text || 'Question not found'}
        //                                     </div>
        //                                     <div class="ps-3">
        //                                         Thinking: ${questionConfigs[qid]?.thinking || '30 Seconds'} ·
        //                                         Allowed: ${questionConfigs[qid]?.allowed || '1 Minutes'} ·
        //                                         Retakes: ${questionConfigs[qid]?.retakes ?? 3}
        //                                     </div>
        //                                 </li>
        //                             `;
        //                         }).join('')
        //                         : `<li class="small text-muted fst-italic">No questions assigned</li>`;

                            
        //                     let scheduled;
        //                     if (indextype === 0) {
        //                         scheduled = getScheduledDateTime(configs[type], new Date());
        //                     } else {
        //                         scheduled = getScheduledDateTime(configs[type], lastScheduledDate);
        //                     }

        //                     lastScheduledDate = scheduled; // update for next iteration

        //                     const { date, time } = formatDateTime(scheduled);

        //                     container.insertAdjacentHTML('beforeend', `
        //                         <div class="card border-0 shadow-sm rounded-3 mb-3">
        //                             <div class="card-body">

        //                                 <div class="d-flex justify-content-between align-items-center mb-2">
        //                                     <div class="fw-semibold">
        //                                         ${info.title}
        //                                     </div>
        //                                     <div>
        //                                         <span class="badge bg-info-subtle text-dark">
        //                                             <span><i class=" ${modeInfo.icon} me-1"></i>${modeInfo.label}</span>
        //                                         </span>
        //                                         ${indextype == 0 ? '':
        //                                         `<span class="badge bg-primary-subtle text-primary">
        //                                             ${date}${configs[type].mode != 4 ? '' : ` · ${configs[type].schedule_time}`}
        //                                         </span>`
        //                                         }
                                                
        //                                     </div>
        //                                 </div>

        //                                 <div class="mt-3">
        //                                     <div class="fw-semibold small mb-2">Questions</div>
        //                                     <ul class="ps-3 mb-0">
        //                                         ${questionHTML}
        //                                     </ul>
        //                                 </div>

        //                             </div>
        //                         </div>
        //                     `);
        //                 });
        //                 }
        //             },
        //             error: function(error) {
        //                 console.error('Error fetching Schedule:', error);
        //             }
        //         });
        //     }
            

           

            
        // }

        function interview_schedule_view_func(jobRequestId) {
            const container = document.getElementById('confirmStageList');
            container.innerHTML = '';

            if (!jobRequestId) return;

            $.ajax({
                url: "{{ route('get_interview_schedule_by_job_id') }}",
                type: "GET",
                data: { job_request_id: jobRequestId },

                success: function (response) {
                    if (response.status !== 200 || !response.data) return;

                    const schedule = response.data;
                    let lastScheduledDate = null;

                    $('#schedule_job_entity').text(schedule.entity_name);
                    $('#schedule_job_role').text(schedule.job_role_name);
                     document.getElementById('schedule_job_entity').style.background=schedule.entity_base_color || '#ab2b22';
                    schedule.stages.forEach((stage, index) => {

                        // let scheduledDate = stage.schedule_date
                        //     ? new Date(stage.schedule_date)
                        //     : lastScheduledDate || new Date();

                        // lastScheduledDate = scheduledDate;

                        // const dateStr = scheduledDate.toLocaleDateString();
                        // const timeStr = stage.schedule_time ?? '';

                            let scheduledDate = null;
                            let dateLabel = '';

                            if (index === 0) {
                                // First stage starts when candidate attempts
                                
                                lastScheduledDate = new Date(); // base reference
                               const { date, time } = formatDateTime(lastScheduledDate);
                                dateLabel = `${date}*`;
                            } else {
                                scheduledDate = getScheduledDateTime(stage, lastScheduledDate);
                                lastScheduledDate = scheduledDate;

                                const { date, time } = formatDateTime(scheduledDate);
                                // dateLabel = `${date}`;
                                dateLabel = `After ${stage.duration_value} ${stage.duration_unit} · ${date}*`;
                            }
                          

                        const questionsHTML = stage.questions.length
                            ? stage.questions.map((q, i) => `
                                <li class="small text-muted">
                                    <div class="fw-medium text-dark">
                                        Q${i + 1}. ${q.question}
                                    </div>
                                    <div class="ps-3">
                                        Thinking: ${q.thinking_time ?? '30s'} ·
                                        Allowed: ${q.allowed_time ?? '1m'} ·
                                        Retakes: ${q.retakes ?? 3}
                                    </div>
                                </li>
                            `).join('')
                            : `<li class="small fst-italic text-muted">No questions assigned</li>`;

                        container.insertAdjacentHTML('beforeend', `
                            <div class="card border-0 shadow-sm rounded-3 mb-3">
                                <div class="card-body">

                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <div class="fw-semibold">
                                            ${stage.interview_category_name} 
                                            <span class="ms-2">
                                                <a href="${stage.shareLink}" target="_blank" >
                                                    <span><i class="mdi mdi-link fs-5 text-primary fw-bold "></i></span>
                                                </a>
                                            </span>
                                        </div>

                                        <div>
                                            <span class="badge bg-info-subtle text-dark">
                                                ${stage.interview_mode_name}
                                            </span>

                                         
                                            <span class="badge bg-primary-subtle text-primary">
                                                ${dateLabel}${stage.mode != 4 ? '' : ` · ${formatTime(stage.interview_time)}`}
                                            </span>
                                        </div>
                                    </div>

                                    <div class="mt-3">
                                        <div class="fw-semibold small mb-2">Questions</div>
                                        <ul class="ps-3 mb-0">
                                            ${questionsHTML}
                                        </ul>
                                    </div>

                                </div>
                            </div>
                        `);
                    });
                },

                error: function (xhr) {
                    console.error('Error fetching interview schedule', xhr);
                }
            });
        }


    function getScheduledDateTime(config, baseDate = new Date()) {
        let result = new Date(baseDate);

        const value = Number(config.duration_value);
        const unit = config.duration_unit;

        switch (unit) {
            case 'Minutes':
                result.setMinutes(result.getMinutes() + value);
                break;
            case 'Hours':
                result.setHours(result.getHours() + value);
                break;
            case 'Days':
                result.setDate(result.getDate() + value);
                break;
            case 'Weeks':
                result.setDate(result.getDate() + value * 7);
                break;
        }

        // Only move Sunday to Monday
        if (result.getDay() === 0) {
            result.setDate(result.getDate() + 1);
        }

        return result;
    }


    function formatDateTime(date) {
        return {
            date: date.toLocaleDateString('en-GB', {
                day: '2-digit',
                month: 'short',
                year: 'numeric'
            }),
            time: date.toLocaleTimeString([], {
                hour: '2-digit',
                minute: '2-digit'
            })
        };
    }

    function formatTime(timeString) {
        if (!timeString) return "00:00";

        const [h, m = "00", s = "00"] = timeString.split(":");

        let hours = parseInt(h, 10);
        let minutes = m.padStart(2, "0");
        let seconds = s.padStart(2, "0");

        let ampm = hours >= 12 ? "PM" : "AM";

        hours = hours % 12 || 12;

        return `${hours.toString().padStart(2, "0")}:${minutes} ${ampm}`;
    }


</script>
@endsection