@extends('admin.layouts.main')

@section('title')
Employee - Payroll
@endsection

@section('content')
<main>
    <div class="two-col">

        @include("admin.common.sidebar")

        <div class="right-sec">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    @if(Session::get('panel') == 'payroll-admin')
                        <li class="breadcrumb-item active" aria-current="page">{{ @trans('payroll.employees') }}</li>
                    @else
                        <li class="breadcrumb-item"><a href="javascript:void(0)">{{ @trans('company.directory') }}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">
                            <a href="{{ route('admin.companies.indexpageload', ['panel' => Session::get('panel')]) }}">{{ @trans('company.company') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page"><a href="{{ route('admin.companies.detail',['panel' => Session::get('panel'), 'id' => $id]) }}">{{ @trans('candidate.detail') }}</a> </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ @trans('payroll.employee') }}</li>
                    @endif
                </ol>
            </nav>

            <div class="form-sec">

                @include('payroll::employee_payroll.modules.store.common.form-step')

                <div class="container">
                    <div class="row">
                        <div class="col-xl-8 offset-xl-2 col-lg-8 offset-lg-1">
                            <div class="step-box">
                                <form method="post" action="{{ route('admin.payroll.storeEmployeeDetails',['panel' => Session::get('panel')]) }}" id="employeePersonalDetails">

                                    @csrf
                                    <input name="user_id" id="user_id" value="@if(isset($employeDetails)){{ $employeDetails->id }}@endif" type="hidden">
                                    <input name="user_type" id="user_type" value="@if(isset($employeDetails)){{ $employeDetails->user_type }}@endif" type="hidden">
                                    <input name="company_id" id="company_id" value="{{$id}}" type="hidden">
                                    <input type="hidden" name="edit" value="@if(isset($edit) && $edit == true) {{$edit ?? ''}} @endif" />
                                    <div class="tab">
                                        <h2 class="form-sec-title">{{ @trans('payroll.contact') }}</h2>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('payroll.personal_email') }}
                                                        <span class="required">*</span>
                                                    </label>
                                                    <input type="text" id="personal_email" name="personal_email" class="form-control" value="@if(isset($employeDetails)){{ $employeDetails->email }}@endif" placeholder="{{ @trans('payroll.personal_email') }}">
                                                    <span class="alert-info-email" id="alert-info-personal-email"></span>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('payroll.secondary_email') }}
                                                    </label>
                                                    <input type="text" id="secondary_email" name="secondary_email" class="form-control" value="@if(isset($employeDetails)){{ $employeDetails->secondary_email }}@endif" placeholder="{{ @trans('payroll.secondary_email') }}">
                                                    <span class="alert-info-email" id="alert-info-secondary-email"></span>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('payroll.office_email') }}
                                                    </label>
                                                    <input type="text" id="office_email" name="office_email" class="form-control" value="@if(isset($employeDetails)){{ $employeDetails->work_email }}@endif" placeholder="{{ @trans('payroll.office_email') }}">
                                                    <span class="alert-info-email" id="alert-info-office-email"></span>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('payroll.personal_mobile_number') }}
                                                        <span class="required">*</span>
                                                    </label>
                                                    <input type="text" id="personal_mobile_number" name="personal_mobile_number" class="form-control" value="@if(isset($employeDetails)){{ $employeDetails->mobile }}@endif" placeholder="{{ @trans('payroll.personal_mobile_number') }}">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('payroll.work_mobile_number') }}
                                                    </label>
                                                    <input type="text" id="work_mobile_number" name="work_mobile_number" class="form-control" value="@if(isset($employeDetails)){{ $employeDetails->secondary_mobile }}@endif" placeholder="{{ @trans('payroll.work_mobile_number') }}">
                                                </div>
                                            </div>
                                        </div>
                                        <h2 class="form-sec-title">{{ @trans('payroll.details') }}</h2>
                                        <div class="row">

                                            <div class="col-md-6">
                                                <div class="form-group btm-arrow select">
                                                    <input type="hidden" id="employee-prefix" name="employee-prefix" class="form-control" value="@if(isset($employeProfileDetails)){{ $employeProfileDetails->prefix }}@endif" placeholder="{{ @trans('payroll.work_mobile_number') }}">
                                                    <label class="control-label">{{ @trans('payroll.prefix') }}
                                                        <span class="required">*</span>
                                                    </label>
                                                    <select id="prefix" name="prefix" class="form-control">
                                                        <option value="" hidden="">Select Prefix</option>
                                                        <option value="Mr" {{ (isset($employeProfileDetails)) && $employeProfileDetails->prefix == 'Mr' ? 'selected' : '' }}>Mr</option>
                                                        <option value="Mrs" {{ (isset($employeProfileDetails)) && $employeProfileDetails->prefix == 'Mrs' ? 'selected' : '' }}>Mrs</option>
                                                        <option value="Miss" {{ (isset($employeProfileDetails)) && $employeProfileDetails->prefix == 'Miss' ? 'selected' : '' }}>Miss</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('payroll.first_name') }}
                                                        <span class="required">*</span>
                                                    </label>
                                                    <input type="text" id="first_name" name="first_name" class="form-control" value="@if(isset($employeDetails)){{ $employeDetails->first_name }}@endif" placeholder="{{ @trans('payroll.first_name') }}">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('payroll.middle_name') }}
                                                        <span class="required">*</span>
                                                    </label>
                                                    <input type="text" id="middle_name" name="middle_name" class="form-control" value="@if(isset($employeDetails)){{ $employeDetails->middle_name }}@endif" placeholder="{{ @trans('payroll.middle_name') }}">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('payroll.last_name') }}
                                                        <span class="required">*</span>
                                                    </label>
                                                    <input type="text" id="last_name" name="last_name" class="form-control" value="@if(isset($employeDetails)){{ $employeDetails->last_name }}@endif" placeholder="{{ @trans('payroll.last_name') }}">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group date">
                                                    <label class="control-label">{{ @trans('payroll.birth_date') }}
                                                        <span class="required">*</span>
                                                    </label>
                                                    <div class="input-group date">
                                                        <input type="text" class="form-control bg-white birth_date" value="@if(isset($employeProfileDetails)){{ $employeProfileDetails->birth_date }}@endif" placeholder="{{ @trans('payroll.birth_date') }}" id="birth_date" name="birth_date" readonly>
                                                        <div class="input-group-addon">
                                                            <span class="material-icons">date_range</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('payroll.birth_place') }}
                                                    </label>
                                                    <input type="text" id="birth_place" name="birth_place" class="form-control" value="@if(isset($employeProfileDetails)){{ $employeProfileDetails->birth_place }}@endif" placeholder="{{ @trans('payroll.birth_place') }}">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <input type="hidden" id="nationality-id" name="nationality-id" class="form-control" value="@if(isset($employeProfileDetails)){{ $employeProfileDetails->nationality }}@endif" placeholder="{{ @trans('payroll.nationality') }}">
                                                <div class="form-group btm-arrow select">
                                                    <label class="control-label">{{ @trans('payroll.nationality') }}
                                                        <span class="required">*</span>
                                                    </label>
                                                    <select id="nationality" name="nationality" class="form-control">
                                                        <option value="" hidden="">Select Nationality</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('payroll.jurisdiction') }}
                                                    </label>
                                                    <input type="text" id="jurisdiction" name="jurisdiction" value="@if(isset($employeProfileDetails)){{ $employeProfileDetails->jurisdiction }}@endif" class="form-control" placeholder="{{ @trans('payroll.jurisdiction') }}">
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('payroll.tin_number') }}
                                                        <span class="required">*</span>
                                                    </label>
                                                    <input type="text" id="tin_number" name="tin_number" value="@if(isset($employeProfileDetails)){{ $employeProfileDetails->tin_number }}@endif" class="form-control" placeholder="{{ @trans('payroll.tin_number') }}">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group btm-arrow select">
                                                    <label class="control-label">{{ @trans('payroll.gender') }}
                                                        <span class="required">*</span>
                                                    </label>
                                                    <select id="gender" name="gender" class="form-control">
                                                        <option value="" hidden="">Select Gender</option>
                                                        <option value="male" {{ (isset($employeProfileDetails)) && $employeProfileDetails->gender == 'male' ? 'selected' : '' }}>Male</option>
                                                        <option value="female" {{ (isset($employeProfileDetails)) && $employeProfileDetails->gender == 'female' ? 'selected' : '' }}>Female</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group btm-arrow select">
                                                    <input type="hidden" id="marital_status_id" name="marital_status_id" value="@if(isset($employeProfileDetails)){{ $employeProfileDetails->marital_status_id }}@endif" class="form-control" placeholder="{{ @trans('payroll.tin_number') }}">
                                                    <label class="control-label">{{ @trans('payroll.marital_status') }}
                                                        <span class="required">*</span>
                                                    </label>
                                                    <select id="marital_status" name="marital_status" class="form-control">
                                                        <option value="" hidden="">Select Marital Status</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-6">

                                                <div class="form-group btm-arrow select">
                                                    <label class="control-label">{{ @trans('payroll.education_level') }}
                                                        <span class="required">*</span>
                                                    </label>
                                                    <select id="education_level" name="education_level" class="form-control">
                                                        <option value="" hidden="">Select Education Level</option>
                                                        @foreach($qualification as $item)
                                                        <option value="{{ $item->id }}" {{ (isset($employeProfileDetails)) && $employeProfileDetails->education_level == $item->id ? 'selected' : '' }}> {{$item->name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-6"></div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('payroll.is_student_loan_deductible') }}
                                                        <span class="required">*</span>
                                                    </label>
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" class="custom-control-input"
                                                            id="is_student_loan_deductible_yes" name="is_student_loan_deductible" value="1"
                                                            @if(isset($employeProfileDetails) && $employeProfileDetails->is_student_loan_deductible == 1) checked="checked"
                                                        @endif>
                                                        <label class="custom-control-label" for="is_student_loan_deductible_yes">{{
                                                            @trans('payroll.yes') }}</label>
                                                    </div>
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" class="custom-control-input"
                                                            id="is_student_loan_deductible_no" name="is_student_loan_deductible" value="0"
                                                            @if(isset($employeProfileDetails) && $employeProfileDetails->is_student_loan_deductible == 0)
                                                            checked="checked" @endif>
                                                        <label class="custom-control-label" for="is_student_loan_deductible_no">{{
                                                            @trans('payroll.no') }}</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('payroll.secondary_education_index_number') }}
                                                    </label>
                                                    <input type="text" id="secondary_education_index_number" name="secondary_education_index_number" value="@if(isset($employeProfileDetails)){{ $employeProfileDetails->secondary_education_index_number }}@endif" class="form-control" placeholder="{{ @trans('payroll.secondary_education_index_number') }}">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('payroll.national_identification_number') }}
                                                    </label>
                                                    <input type="text" id="national_identification_number" name="national_identification_number" class="form-control" value="@if(isset($employeProfileDetails)){{ $employeProfileDetails->national_identification_number }}@endif" placeholder="{{ @trans('payroll.national_identification_number') }}">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('payroll.wcf_number') }}
                                                    </label>
                                                    <input type="text" id="wcf_number" name="wcf_number" class="form-control" value="@if(isset($employeProfileDetails)){{ $employeProfileDetails->wcf_number }}@endif" placeholder="{{ @trans('payroll.wcf_number') }}">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('payroll.employee_pension_number') }}
                                                    </label>
                                                    <input type="text" id="employee_pension_number" name="employee_pension_number" class="form-control" value="@if(isset($employeProfileDetails)){{ $employeProfileDetails->employee_pension_number }}@endif" placeholder="{{ @trans('payroll.employee_pension_number') }}">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('payroll.pension_contribution_value') }}
                                                    </label>
                                                    <input type="text" id="pension_contribution_value" name="pension_contribution_value" class="form-control" value="@if(isset($employeProfileDetails)){{ $employeProfileDetails->pension_contribution_value }}@endif" placeholder="{{ @trans('payroll.pension_contribution_value') }}">
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('payroll.reconnended_by') }}
                                                    </label>
                                                    <input type="text" id="reconnended_by" name="reconnended_by" class="form-control" value="@if(isset($employeProfileDetails)){{ $employeProfileDetails->reconnended_by }}@endif" placeholder="{{ @trans('payroll.reconnended_by') }}">
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('payroll.general_notes') }}
                                                    </label>
                                                    <input type="text" id="general_notes" name="general_notes" class="form-control" value="@if(isset($employeProfileDetails)){{ $employeProfileDetails->general_notes }}@endif" placeholder="{{ @trans('payroll.general_notes') }}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class=" tab-btn">

                                            @if (isset($edit) && $edit == true)
                                                @if(Session::get('panel') == 'payroll-admin')
                                                    <div style="float: left;">
                                                        <a class="btn btn-cncl" href="{{ route('payrollAdmin.employees.index',['panel' => Session::get('panel'), 'id' => $employeDetails->id, 'type' => 'details']) }}">{{ @trans('project::project.cancel') }}</a>
                                                    </div>
                                                @else
                                                    <div style="float: left;">
                                                        <a class="btn btn-cncl" href="{{ route('admin.payroll.tabs',['panel' => Session::get('panel'), 'id' => $id,'user_id' => $employeDetails->id, 'type' => 'detail']) }}">{{ @trans('project::project.cancel') }}</a>
                                                    </div>
                                                @endif
                                            <div style="float:right;">
                                                <button type="submit" id="employeePersonalBtn" class="btn step-btn employeePersonalBtn">{{ @trans('project::project.save') }}</button>
                                            </div>
                                            @else
                                                @if(Session::get('panel') == 'payroll-admin')
                                                    <div style="float: left;">
                                                        <a class="btn btn-cncl" href="{{ route('payrollAdmin.employees.index',['panel' => Session::get('panel')]) }}">{{ @trans('project::project.cancel') }}</a>
                                                    </div>
                                                @else
                                                    <div style="float: left;">
                                                        <a class="btn btn-cncl" href="{{ route('admin.companies.detail',['panel' => Session::get('panel'), 'id' => $id]) }}">{{ @trans('project::project.cancel') }}</a>
                                                    </div>
                                                @endif
                                                <div style="float:right;">
                                                    <button type="submit" id="employeePersonalBtn" class="btn step-btn employeePersonalBtn">{{ @trans('project::project.save_next') }}</button>
                                                </div>
                                            @endif
                                        </div>
                                    </div>

                                </form>

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

    </div>
</main>
@endsection

@push('pageJs')
{!! JsValidator::formRequest('Modules\Payroll\Http\Requests\StoreEmployeePersonalDetailsRequest', '#employeePersonalDetails') !!}

<script src="{{ asset('js/vendor/select2.customSelectionAdapter.js') }}"></script>
<script src="{{ asset('js/vendor/jquery.alphanum.min.js')}}"></script>
<script>
    $(document).ready(function() {
        $(".numeric-val").numeric({
            allowMinus: false,
            allowDecSep: false,
            maxDecimalPlaces: 2,
            allowThouSep: false,
            min: 1,
            max: 30
        })
        $(".age-numeric-val").numeric({
            allowMinus: false,
            allowDecSep: false,
            maxDecimalPlaces: 3,
            allowThouSep: false,
            min: 1,
            max: 100
        })
        $('#project_importance').numeric({
            allowMinus: false,
            allowDecSep: false,
            allowThouSep: false,
            min: 0,
            max: 10
        });
        $('#actualization').numeric({
            allowMinus: false,
            allowDecSep: false,
            allowThouSep: false,
            min: 0,
            max: 100
        });

    });
    $(document).ready(function() {
        var today = new Date();
        var $date = $('.dateselect').datepicker({
            autoHide: true,
            format: 'dd-mm-yyyy',
            zIndex: 2048,
            startDate: null,
            defaultViewDate: new Date(),
        });
        $('#date').change(function() {
            $(this).valid();
        })
    });
    $(document).ready(function() {
        // var today = new Date();

        var today = new Date();
        var maxDate = new Date();

        var $date = $('.birth_date').datepicker({
            autoHide: true,
            format: 'dd-mm-yyyy',
            zIndex: 2048,
            startDate: null, // Maximum selectable date
            endDate: today, // End date (today's date)
            defaultViewDate: today // Default date view starts at maxDate
        });
        $('#date').change(function() {
            $(this).valid();
        })
    });

    maritalStatus()
    country()
    $(document).ready(function() {
        var user_id = $('#user_id').val()
        var company_id = $('#company_id').val()

        if (user_id == '') {
            $('#personal_email').keyup(function(e) {
                var personal_email = $(this).val();

                if (personal_email.trim() !== '') {
                    if (isValidEmail(personal_email)) {
                        getEmployeeDetails(personal_email, 'personal_email', company_id)
                    } else {
                        resetEmployeeDetails()
                    }
                }
            });
        }
        var user_id = $('#user_id').val()
        if (user_id == '') {
            $('#office_email').keyup(function(e) {

                var office_email = $(this).val();
                var first_name = $('#first_name').val()

                if (first_name == "") {
                    if (office_email.trim() !== '') {
                        if (isValidEmail(office_email)) {
                            getEmployeeDetails(office_email, 'office_email', company_id)
                        } else {
                            resetEmployeeDetails()
                        }
                    }
                }
            });
        }
        var user_id = $('#user_id').val()
        if (user_id == '') {
            $('#secondary_email').keyup(function(e) {

                var secondary_email = $(this).val();
                var first_name = $('#first_name').val()

                if (first_name == "") {
                    if (secondary_email.trim() !== '') {
                        if (isValidEmail(secondary_email)) {
                            getEmployeeDetails(secondary_email, 'secondary_email', company_id)
                        } else {
                            resetEmployeeDetails()
                        }
                    }
                }
            });
        }

        function toggleSecondaryEducationIndex() {
            if ($('#is_student_loan_deductible_yes').is(':checked')) {
                $('#secondary_education_index_number').closest('.form-group').show();
            } else {
                $('#secondary_education_index_number').closest('.form-group').hide();
            }
        }

        $('input[name="is_student_loan_deductible"]').on('change', function () {
            toggleSecondaryEducationIndex()
        });

        toggleSecondaryEducationIndex()
    });

    function isValidEmail(email) {
        // Regular expression for email validation
        var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(email);
    }

    function getEmployeeDetails(email, type, company_id = null) {
        var csrfToken = $('meta[name="csrf-token"]').attr('content');

        // _.debounce(() => {
        $.ajax({
            url: '{{ route("admin.payroll.getUserDetails", ["panel" => session("panel")]) }}',
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': csrfToken
            },
            data: {
                'email': email,
                'email_type': type,
                'company_id': company_id
            },

            success: function(response) {
                // Handle the response from the server
                employeeDetailsAppend(response, type);

            },
            error: function(xhr, status, error) {
                // Handle errors
            }
        });
        // }, 500);
    }

    function employeeDetailsAppend(response, type) {

        if (response.status == true) {
            $employeeDetails = response.data

            $('#user_id').val($employeeDetails.id)
            $('#user_type').val($employeeDetails.user_type)
            $('#personal_email').val($employeeDetails.email)
            $('#secondary_email').val($employeeDetails.secondary_email)
            $('#office_email').val($employeeDetails.work_email)
            $('#personal_mobile_number').val($employeeDetails.mobile)
            $('#work_mobile_number').val($employeeDetails.secondary_mobile)
            $('#first_name').val($employeeDetails.first_name)
            $('#last_name').val($employeeDetails.last_name)
            $('#middle_name').val($employeeDetails.middle_name)
            $('#birth_date').val($employeeDetails.birth_date)
            $('#birth_place').val($employeeDetails?.profiles?.birth_place)
            $('#gender').val($employeeDetails?.profiles?.gender);
            $('#marital_status').val($employeeDetails?.profiles?.marital_status_id);
            $('#nationality').val($employeeDetails?.profiles?.nationality);
            $('#country_of_residence').val($employeeDetails?.profiles?.resident);
            $('#prefix').val($employeeDetails?.profiles?.prefix);
            $('#month_name').val($employeeDetails.month_name);
            $('#jurisdiction').val($employeeDetails?.profiles?.jurisdiction);
            $('#tin_number').val($employeeDetails?.profiles?.tin_number);
            $('#education_level').val($employeeDetails?.profiles?.education_level);
            $('#is_student_loan_deductible').val($employeeDetails?.profiles?.is_student_loan_deductible);
            $('#secondary_education_index_number').val($employeeDetails?.profiles?.secondary_education_index_number);
            $('#national_identification_number').val($employeeDetails?.profiles?.national_identification_number);
            $('#wcf_number').val($employeeDetails?.profiles?.wcf_number);
            $('#reconnended_by').val($employeeDetails?.profiles?.reconnended_by);
            $('#general_notes').val($employeeDetails?.profiles?.general_notes);
            $('#employee_pension_number').val($employeeDetails?.profiles?.employee_pension_number);

            if ($employeeDetails.email_type == 'personal_email') {
                $('#alert-info-personal-email').empty();
                $('#alert-info-personal-email').append($employeeDetails.message);
            } else if ($employeeDetails.email_type == 'office_email') {
                $('#alert-info-office-email').empty();
                $('#alert-info-office-email').append($employeeDetails.message);

            } else if ($employeeDetails.email_type == 'secondary_email') {
                $('#alert-info-secondary-email').empty();
                $('#alert-info-secondary-email').append($employeeDetails.message);
            }
        }
    }

    function resetEmployeeDetails() {
        // $('#personal_email').val('')
        // $('#office_email').val('')
        // $('#secondary_email').val('')
        $('#user_id').val('')
        $('#personal_mobile_number').val('')
        $('#work_mobile_number').val('')
        $('#first_name').val('')
        $('#last_name').val('')
        $('#middle_name').val('')
        $('#birth_date').val('')
        $('#birth_place').val('')
        $('#gender').val('')
        $('#marital_status').val('')
        $('#nationality').val('')
        $('#prefix').val('');
        $('#month_name').val('');
        $('#jurisdiction').val('');
        $('#tin_number').val('');
        $('#education_level').val('');
        $('#is_student_loan_deductible').val('');
        $('#secondary_education_index_number').val('');
        $('#national_identification_number').val('');
        $('#wcf_number').val('');
        $('#reconnended_by').val('');
        $('#general_notes').val('');
        $('#employee_pension_number').val('');
        $('#alert-info-personal-email').empty();
        $('#alert-info-secondary-email').empty();
        $('#alert-info-office-email').empty();
    }

    $(document).on('click', '.employeePersonalBtn', function(e) {
        e.preventDefault()

        if ($('#employeePersonalDetails').valid()) {
            $('.employeePersonalBtn').text('Please wait...');
            $('.employeePersonalBtn').attr('disabled', 'disabled');
            $('#employeePersonalDetails').submit();
        }
    });

    function country() {

        var company_id = $('#company_id').val();
        var csrfToken = $('meta[name="csrf-token"]').attr('content');

        $.ajax({
            url: '{{ route("admin.payroll.country", ["panel" => session("panel")]) }}',
            method: 'GET',
            data: {},
            success: function($response) {
                // Handle the response from the server

                // Append new HTML content to the element with ID 'container'
                $.each($response.data, function(index, item) {
                    $('#nationality').append('<option value="' + item.id + '">' + item.name + '</option>')
                });
                var user_id = $('#user_id').val()
                if (user_id != '') {
                    var nationality = $('#nationality-id').val();
                    $('#nationality').val(nationality);
                }
            },
            error: function(xhr, status, error) {}
        });
    }

    function maritalStatus() {

        var company_id = $('#company_id').val();
        var csrfToken = $('meta[name="csrf-token"]').attr('content');

        $.ajax({
            url: '{{ route("admin.payroll.maritalStatus", ["panel" => session("panel")]) }}',
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': csrfToken
            },
            data: {
                'company_id': company_id
            },
            success: function($response) {
                // Handle the response from the server
                $('#marital_status').empty();
                $('#marital_status').append('<option value="" hidden="">Select Marital Status</option>');

                // Append new HTML content to the element with ID 'container'

                $.each($response.data, function(index, item) {
                    $('#marital_status').append('<option value="' + item.id + '">' + item.name + '</option>')
                });

                var user_id = $('#user_id').val()
                if (user_id != '') {
                    var marital_status_id = $('#marital_status_id').val();
                    $('#marital_status').val(marital_status_id);
                }

            },
            error: function(xhr, status, error) {}
        });
    }
</script>
@endpush

@push('pageCss')
<link rel="stylesheet" href="{{ asset('css/vendor/select2.customSelectionAdapter.css') }}">
<link rel="stylesheet" href="{{ asset('css/admin/project/store.css') }}">
{{--<script src="{{ mix('js/employees.js') }}"></script>--}}
@endpush