@extends('app-new')

@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/wizard/bs-stepper.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/pickadate/pickadate.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-validation.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-pickadate.css">
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">{{ trans('employee/employee_create.transfer_employee') }}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a
                            href="/{{ $alias }}/home">{{ trans('employee/employee_create.home') }}</a>
                    </li>
                    <li class="breadcrumb-item"><a
                            href="/{{ $alias }}/employees">{{ trans('employee/employee_create.employee') }}</a>
                    </li>
                    <li class="breadcrumb-item active">
                        {{ trans('employee/employee_create.transfer_employee') }}
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <div class="row">
        <div class="col-xl-3 col-lg-5 col-md-5 order-1 order-md-0">
            <div class="card">
                <div class="card-body">
                    <div class="user-avatar-section">
                        <div class="d-flex align-items-center flex-column">
                            <img class="img-fluid rounded mt-3 mb-2" src="{!! $employee->image !!}"
                                onerror="this.src='/assets/img/default-profile-3.png'" height="110" width="110"
                                alt="User avatar" />
                            <div class="user-info text-center">
                                <h4>{{ ucwords($employee->name) . ' (' . $employee->employee_code . ')' }}</h4>
                                <span class="badge bg-light-info">{{ ucwords($employee->employee_type) }}</span>
                            </div>
                        </div>
                    </div>
                    <h4 class="fw-bolder border-bottom pb-50 mb-1"></h4>
                    <div class="info-container">
                        <ul class="list-unstyled">
                            <li class="mb-75">
                                <span class="fw-bolder me-25">Name:</span>
                                <span>{{ ucwords($employee->name) }}</span>
                            </li>
                            <li class="mb-75">
                                <span class="fw-bolder me-25">Email:</span>
                                <span> {{ ucwords($employee->email) }}</span>
                            </li>
                            <li class="mb-75">
                                <span class="fw-bolder me-25">Mobile Number:</span>
                                <span>{{ ucwords($employee->mobile) }}</span>
                            </li>
                            <li class="mb-75">
                                <span class="fw-bolder me-25">Manager:</span>
                                <span>{{ !is_null($employee->hod) ? ucwords($employee->hod->name) : '-' }}</span>
                            </li>
                            <li class="mb-75">
                                <span class="fw-bolder me-25">Status:</span>
                                @if ($employee->status == App\Helpers\ConstantHelper::ACTIVE)
                                    <span
                                        class="badge rounded-pill badge-light-success badgeborder-radius">{{ ucfirst($employee->status) }}</span>
                                @elseif(
                                    $employee->status == App\Helpers\ConstantHelper::IN_ACTIVE ||
                                        $employee->status == App\Helpers\ConstantHelper::BLACKLIST)
                                    <span
                                        class="badge rounded-pill badge-light-danger badgeborder-radius">{{ ucfirst($employee->status) }}</span>
                                @else
                                    <span
                                        class="badge rounded-pill badge-light-warning badgeborder-radius">{{ ucfirst($employee->status) }}</span>
                                @endif
                            </li>
                            @if ($employee->transfer_date)
                                <li class="mb-75">
                                    <span class="fw-bolder me-25">Transfer Date:</span>
                                    <span
                                        class="badge bg-light-warning">{{ $employee->transfer_date ? date('d/m/Y', strtotime($employee->transfer_date)) : '' }}</span>
                                </li>
                            @endif
                            @if ($employee->status == 'transfer')
                                <span style="float: right;"><button type="button"
                                        class="btn btn-warning badgeborder-radius"
                                        data-toggle="modal">{{ trans('employee/employee.transferred') }}
                                    </button>
                                </span>
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-9 col-lg-7 col-md-7 order-0 order-md-1">
            <div class="card">
                <ul class="nav nav-pills mt-1" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="step-one-tab" data-bs-toggle="tab" data-bs-target="#step-one"
                            type="button" role="tab" aria-controls="step-one" aria-selected="true">Step 1</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="step-two-tab" data-bs-toggle="tab" data-bs-target="#step-two"
                            type="button" role="tab" aria-controls="step-two" aria-selected="false">Step 2</button>
                    </li>
                </ul>
            </div>
            <form role="post-data" method="POST" action="{{ $orgUrl . '/employee/' . $employee->id . '/transfer' }}"
                redirect="{{ $orgUrl . '/employee/' . $employee->id . '/profile' }}">
                <div class="tab-content" id="myTabContent">
                    <!-- Step 1 -->
                    <div class="tab-pane fade show active" id="step-one" role="tabpanel"
                        aria-labelledby="step-one-tab">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="mb-1 col-md-12 form-group">
                                        <label>Select Organization<span
                                                class="mendatory-field text-danger">*</span></label>
                                        <select class="form-control select2" name="organization_id">
                                            <option value=""></option>
                                            @foreach ($organizations as $organizationData)
                                                <option value="{{ $organizationData->id }}">
                                                    {{ $organizationData->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb-1 col-md-6 form-group">
                                        <label>{{ trans('employee/employee_create.employee_type') }}<span
                                                class="mendatory-field text-danger">*</span></label>
                                        <select class="form-control" name="employee_type" id="employee_type">
                                            <option value="">--{{ trans('employee/employee.select') }}--</option>
                                            <option value="employee">Employee</option>
                                            <option value="workman">Workman</option>
                                        </select>
                                    </div>
                                    <div class="mb-1 col-md-6 form-group">
                                        <label>{{ trans('employee/employee_create.new_employee_code') }}<span
                                                class="mendatory-field text-danger">*</span></label>
                                        <input type="text" class="form-control" name="employee_code">
                                    </div>

                                    <div class="mb-1 col-md-6">
                                        <label class="form-label"
                                            for="user_type">{{ trans('employee/employee_create.user_type') }}<span
                                                class="mendatory-field text-danger">*</span></label>
                                        <select class="form-control select2" id="user_type" name="user_type">
                                            <option value="">Select </option>
                                            @foreach ($userType as $val)
                                                <option value="{{ $val->id }}">
                                                    {{ $val->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb-1 col-md-6">
                                        <label class="form-label"
                                            for="card_no">{{ trans('employee/employee_create.card_no') }}</label>
                                        <input type="text" id="card_no" name="card_no" class="form-control"
                                            placeholder="Enter Your Card No" value="" />
                                    </div>

                                    <div class="mb-1 form-password-toggle col-md-6">
                                        <label class="form-label"
                                            for="password">{{ trans('employee/employee_create.password') }}<span
                                                class="mendatory-field text-danger">*</span></label>
                                        <div class="input-group input-group-merge form-password-toggle">
                                            <input type="password" name="password" id="password" class="form-control"
                                                autocomplete="nope" value="Welcome@123"
                                                placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" />
                                            <span class="input-group-text cursor-pointer"><i
                                                    data-feather="eye"></i></span>
                                        </div>
                                    </div>
                                    <div class="mb-1 form-password-toggle col-md-6">
                                        <label class="form-label"
                                            for="password_confirmation">{{ trans('employee/employee_create.confirm_password') }}<span
                                                class="mendatory-field text-danger">*</span></label>
                                        <div class="input-group input-group-merge form-password-toggle">
                                            <input type="password" name="password_confirmation"
                                                id="password_confirmation" class="form-control" autocomplete="nope"
                                                value=""
                                                placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" />
                                            <span class="input-group-text cursor-pointer"><i
                                                    data-feather="eye"></i></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-outline-secondary btn-next" id="next">
                                    <span
                                        class="align-middle d-sm-inline-block d-none">{{ trans('employee/employee_create.next') }}</span>
                                    <i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Step 2 -->
                    <div class="tab-pane fade" id="step-two" role="tabpanel" aria-labelledby="step-two-tab">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="form-group row mb-1">
                                        <label class="col-md-3 col-form-label font-weight-bold">
                                            <strong>
                                                Location Preference:
                                            </strong>
                                        </label>
                                        <div class="col-md-9 form-control">
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="free_location"
                                                    id="free_location_1" value="1"
                                                    @if ($employee->free_location == 1) checked @endif>
                                                <label class="form-check-label" for="free_location_1">Free
                                                    Location</label>
                                            </div>

                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="free_location"
                                                    id="free_location_2" value="2"
                                                    @if ($employee->free_location == 2) checked @endif>
                                                <label class="form-check-label" for="free_location_2">PunchIn Free
                                                    Location</label>
                                            </div>

                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="free_location"
                                                    id="free_location_3" value="3"
                                                    @if ($employee->free_location == 3) checked @endif>
                                                <label class="form-check-label" for="free_location_3">PunchOut Free
                                                    Location</label>
                                            </div>

                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="free_location"
                                                    id="free_location_0" value="0"
                                                    @if ($employee->free_location == 0) checked @endif>
                                                <label class="form-check-label" for="free_location_0">Strict
                                                    Location</label>
                                            </div>
                                        </div>

                                        <!-- Validation Error Message -->
                                        <div class="col-md-9 offset-md-3">
                                            {!! $errors->first('free_location', '<label class="text-danger small">:message</label>') !!}
                                        </div>
                                    </div>
                                    <div class="mb-1 col-md-6" style="display: none;" id="contractor_div">
                                        <label class="form-label" for="contractor_id"
                                            class="required">{{ trans('employee/employee_create.contractor') }}</label>
                                        <select class="form-control select2" id="contractor_id" name="contractor_id">
                                            <option value="">Select Contractor</option>
                                            @foreach ($contractors as $contractor)
                                                <option value="{{ $contractor->id }}">{{ $contractor->name }}
                                                    ({{ $contractor->email }})
                                                    ({{ $contractor->status }})</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb-1 col-md-6" id="location_div">
                                        <label class="form-label" for="location_id"
                                            class="required">{{ trans('employee/employee_create.location') }}</label>
                                        <select
                                            class="form-control select2 {{ $errors->has('locations') ? 'error' : '' }} selected_fields"
                                            id="location_id" name="locations[]"
                                            onchange="getsubLocations(this, 'sublocations')" multiple>
                                        </select>
                                    </div>
                                    <div class="mb-1 col-md-6 sublocations" id="sublocation_div">
                                        <label class="form-label" for="sub_location_id"
                                            class="required">{{ trans('employee/employee_create.sub_location') }}</label>
                                        <label class="form-label" style="float: right">
                                            <input type="checkbox" class="select_all" id="select_all_sub_location_id">
                                            Select All
                                        </label>
                                        <select
                                            class="form-control select2 {{ $errors->has('sub_locations') ? 'error' : '' }} selected_fields"
                                            id="sub_location_id" name="sub_locations">
                                            <option value="">Select Sub Locations</option>
                                        </select>
                                    </div>
                                    <hr>
                                    <div class="mb-1 col-md-6">
                                        <label class="form-label" for="department_id"
                                            class="required">{{ trans('employee/employee_create.department') }}</label>
                                        <select class="form-control select2" id="department_id" name="department_id"
                                            required>
                                            <option value="">Select </option>
                                            @foreach ($departments as $department)
                                                <option value="{{ $department->id }}">
                                                    {{ $department->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb-1 col-md-6">
                                        <label class="form-label" for="sub_department_id"
                                            class="required">{{ trans('employee/employee_create.sub_department') }}</label>
                                        <select class="form-control select2" id="sub_department_id"
                                            name="sub_department_id">
                                            <option value="">Select </option>
                                            @foreach ($subDepartments as $subDepartment)
                                                <option value="{{ $subDepartment->id }}">
                                                    {{ $subDepartment->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb-1 col-md-6">
                                        <label class="form-label" for="designation_id"
                                            class="required">{{ trans('employee/employee_create.designation') }}</label>
                                        <select class="form-control select2" id="designation_id" name="designation_id"
                                            required>
                                            <option value="">Select </option>
                                            @foreach ($designations as $designation)
                                                <option value="{{ $designation->id }}">
                                                    {{ $designation->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb-1 col-md-6">
                                        <label class="form-label" for="work_station_id"
                                            class="required">WorkStation</label>
                                        <select class="form-control select2" id="work_station_id" name="work_station_id">
                                            <option value="">Select </option>
                                            @foreach ($workstations as $workstation)
                                                <option value="{{ $workstation->id }}">
                                                    {{ $workstation->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb-1 col-md-6">
                                        <label class="form-label" for="category_id" class="required">Category</label>
                                        <select class="form-control select2" id="category_id" name="category_id">
                                            <option value="">Select </option>
                                            @foreach ($categories as $category)
                                                <option value="{{ $category->id }}">
                                                    {{ $category->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb-1 col-md-6">
                                        <label class="form-label" for="grade_id">Grade</label>
                                        <select class="form-control select2" id="grade_id" name="grade_id">
                                            <option value="">Select </option>
                                            @foreach ($grades as $grade)
                                                <option value="{{ $grade->id }}">{{ $grade->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb-1 col-md-12">
                                        <label class="form-label" for="manager_id"
                                            class="required">{{ trans('employee/employee_create.manager') }}</label>
                                        <select class="form-control select2" id="manager_id" name="manager_id">
                                            <option value="">Select Manager</option>
                                            {{-- Rest will be set by JS --}}
                                        </select>
                                    </div>
                                    {{-- <div class="mb-1 form-password-toggle col-md-6">
                                        <label class="form-label" for="date_of_joining">{{ trans('employee/employee_create.date_of_joining') }}</label>
                                        <input type="date" name="date_of_joining" id="date_of_joining" class="form-control" value="" />
                                    </div> --}}
                                    <div class="mb-1 form-password-toggle col-md-6">
                                        <label class="form-label"
                                            for="transfer_date">{{ trans('employee/employee_create.date_of_transfer') }}</label>
                                        <input type="date" name="transfer_date" id="transfer_date"
                                            class="form-control" value="" />
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check form-check-primary">
                                            <label class="mt-2 form-label" for="transfer_date">{{ trans('employee/employee_create.transfer_leaves') }}</label>
                                            <input class="mt-2 form-check-input HeaderCheck StatusDetailsCheck" type="checkbox" name="transfer_leaves" id="transfer_leaves" value="1">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" id="previous" class="btn btn-outline-secondary btn-prev">
                                    <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                    <span
                                        class="align-middle d-sm-inline-block d-none">{{ trans('employee/employee_create.previous') }}</span>
                                </button>
                                @if ($employee->status == 'active')
                                    <button type="button" data-request="ajax-submit" data-target="[role=post-data]"
                                        class="btn btn-primary waves-effect waves-float waves-light">
                                        {{ trans('employee/employee.transfer') }}
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection
@push('footer-script')
    <script src="/app-assets/vendors/js/forms/wizard/bs-stepper.min.js"></script>
    <script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
    <script src="/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
    <script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/picker.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/picker.date.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/picker.time.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/legacy.js"></script>
    <script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
    <script src="/app-assets/js/scripts/forms/form-validation.js"></script>
    <script src="/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>
    <script src="{{ asset('js/common-script.js') }}"></script>
    <script>
        const gradesData = {!! json_encode($grades) !!};
        const userTypeData = {!! json_encode($userType) !!};
        const categoriesData = {!! json_encode($categories) !!};
        const departmentsData = {!! json_encode($departments) !!};
        const contractorsData = {!! json_encode($contractors) !!};
        const designationsData = {!! json_encode($designations) !!};
        const workstationsData = {!! json_encode($workstations) !!};
        const subDepartmentsData = {!! json_encode($subDepartments) !!};

        function getsubLocations() {
            var locationId = $('#location_id').val();
            var sublocationIds = $('#sub_location_id').val() || [];

            var data = {
                location_id: locationId,
                '_token': '{{ csrf_token() }}'
            };

            $.ajax({
                url: '/{{ $organization->alias }}/location/sub-locations',
                type: 'POST',
                data: data,
                success: function(response) {
                    var selectbox = '';

                    if (response) {

                        selectbox += `
                    <label class="form-label" for="sub_location_id">Sub Location</label>
                    <div class="form-label-group">
                        <select name="sub_locations[]" class="form-control select2" id="sub_location_id" multiple>
                `;
                        $.each(response, function(i, item) {
                            var isSelected = sublocationIds.includes(i.toString()) ?
                                'selected="selected"' : '';
                            selectbox += `<option value="${i}" ${isSelected}>${item}</option>`;
                        });

                        selectbox += '</select></div>';
                    } else {
                        selectbox += '<p>No sublocations available.</p>';
                    }

                    $('#sublocation_div').html(selectbox);

                    $('#sub_location_id').select2({
                        multiple: true
                    });
                },
                error: function() {
                    console.error('Failed to fetch sublocations.');
                }
            });
        }
        $('input[name="free_location"]').click(function() {
            if ($('input[name="free_location"]').is(':checked')) {
                if ($(this).val() == 0 || $(this).val() == 2 || $(this).val() == 3) {
                    $('#location_div').show();
                    $('#sublocation_div').show();
                } else {
                    $('#location_div').hide();
                    $('#sublocation_div').hide();
                }
            }
        })

        $(document).on('click', '.btn-next', function() {
            $('#step-two-tab').click();
        });

        $(document).on('click', '.btn-prev', function() {
            $('#step-one-tab').click();
        });

        function fetchLocations(organizationId) {

            $.ajax({
                url: '/ajax/locations-v2',
                method: 'GET',
                data: {
                    organization_id: organizationId
                },
                success: function(response) {

                    if (response.data) populateLocations(response.data);
                },
                error: function() {
                    console.error('Failed to fetch locations.');
                }
            });
        }

        function populateLocations(locations) {
            var optionsHtml = '';
            var locationSelect = $('#location_id');
            $.each(locations, function(index, location) {
                optionsHtml += '<option value="' + location.id + '">' + location.name + '</option>';
            });
            locationSelect.html(optionsHtml);
        }

        function filterDropdownsByOrganization(orgId) {
            var filteredGrades = gradesData.filter(function(item) {
                return item.organization_id == orgId;
            });
            populateDropdown('select[name="grade_id"]', filteredGrades);

            var filteredUserTypes = userTypeData.filter(function(item) {
                return item.organization_id == orgId;
            });
            populateDropdown('select[name="user_type"]', filteredUserTypes);

            var filteredCategories = categoriesData.filter(function(item) {
                return item.organization_id == orgId;
            });
            populateDropdown('select[name="category_id"]', filteredCategories);

            var filteredDepartments = departmentsData.filter(function(item) {
                return item.organization_id == orgId;
            });
            populateDropdown('select[name="department_id"]', filteredDepartments);

            var filteredContractors = contractorsData.filter(function(item) {
                return item.organization_id == orgId;
            });
            populateDropdown('select[name="contractor_id"]', filteredContractors);

            var filteredDesignations = designationsData.filter(function(item) {
                return item.organization_id == orgId;
            });
            populateDropdown('select[name="designation_id"]', filteredDesignations);

            var filteredWorkstations = workstationsData.filter(function(item) {
                return item.organization_id == orgId;
            });
            populateDropdown('select[name="work_station_id"]', filteredWorkstations);

            var filteredSubDepartments = subDepartmentsData.filter(function(item) {
                return item.organization_id == orgId;
            });
            populateDropdown('select[name="sub_department_id"]', filteredSubDepartments);
        }

        function populateDropdown(dropdownSelector, data) {
            var dropdown = $(dropdownSelector);
            dropdown.empty();
            dropdown.append('<option value="">Select an option</option>');
            $.each(data, function(index, item) {
                dropdown.append('<option value="' + item.id + '">' + item.name + '</option>');
            });
        }

        $(document).ready(function() {
            let activeTab = "{{ session('active_tab', 'step-one') }}";
            $('#myTab a[href="#' + activeTab + '"]').tab('show');

            function updateTabState() {
                var orgId = $('select[name="organization_id"]').val();
                if (orgId) {
                    $('#step-two-tab').removeClass('disabled');
                    $('#step-two-tab').off('click');
                } else {
                    $('#step-two-tab').addClass('disabled');
                    $('#step-two-tab').on('click', function(e) {
                        e.preventDefault();
                        e.stopPropagation();

                        Swal.fire({
                            title: 'Organization Required',
                            text: 'Please select an organization before proceeding to Step 2.',
                            icon: 'warning',
                            confirmButtonText: 'OK'
                        }).then(() => {
                            $('select[name="organization_id"]').focus();
                        });

                        return false;
                    });
                }
            }

            updateTabState();

            $('#step-two-tab').on('click', function(e) {
                if ($(this).hasClass('disabled')) {
                    e.preventDefault();
                    e.stopPropagation();
                }
            });

            $('select[name="organization_id"]').change(function() {
                var orgId = $(this).val();
                if (orgId) {
                    $('#location_id').empty();
                    $('#sub_location_id').empty();
                    updateTabState();
                    fetchLocations(orgId);
                    filterDropdownsByOrganization(orgId);
                }
            });

            $('#employee_type').change(function() {
                var selectedType = $(this).val();
                if (selectedType === 'workman') {
                    $('#contractor_div').show();
                } else {
                    $('#contractor_div').hide();
                }
            });

            $('#manager_id').select2({
                ajax: {
                    url: '/ajax/hod-list',
                    dataType: 'json',
                    data: function(params) {
                        return {
                            alias: '{{ $organization->alias }}',
                            organization_id: $('select[name="organization_id"]').val(),
                            exclude_user_id: '{{ $exclude_user_id ?? \Auth::user()->id }}',
                            has_contractor_employees: true,
                            employee_type: '',
                            search: params.term,
                            status: "active"
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: $.map(data.data, function(item) {
                                return {
                                    id: item.id,
                                    text: item.name + ' (' + item.employee_code + ')' + ' (' +
                                        item.email + ')',
                                };
                            })
                        };
                    },
                    cache: true
                },
                placeholder: 'Search with name',
                minimumInputLength: 1,
                allowClear: true
            });
        });
    </script>
@endpush