@extends('layouts.appv2')

@section('content')

<style>
    .section-card {
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        margin-bottom: 20px;
        border: 1px solid #e0e0e0;
        background: white;
    }
    
    .section-header {
        background-color: #f8f9fa;
        padding: 15px 20px;
        border-bottom: 1px solid #e0e0e0;
        border-radius: 12px 12px 0 0;
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #333;
    }
    
    .section-body {
        padding: 25px 20px;
    }
    
    .form-control {
        border-radius: 8px;
        border: 1px solid #d0d0d0;
        padding: 10px 12px;
        font-size: 14px;
    }
    
    .form-control:focus {
        border-color: #4a90e2;
        box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.15);
    }
    
    .btn {
        border-radius: 8px;
        padding: 8px 20px;
        font-size: 14px;
        font-weight: 500;
    }
    
    .btn-primary {
        background-color: #4a90e2;
        border-color: #4a90e2;
    }
    
    .btn-info {
        background-color: #17a2b8;
        border-color: #17a2b8;
    }
    
    .btn-secondary {
        background-color: #6c757d;
        border-color: #6c757d;
    }
    
    label {
        font-weight: 500;
        color: #555;
        margin-bottom: 6px;
        font-size: 13px;
    }
    
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
        padding-bottom: 15px;
        border-bottom: 2px solid #e0e0e0;
    }
    
    .page-title {
        font-size: 24px;
        font-weight: 600;
        color: #333;
        margin: 0;
    }
    
    small.text-danger {
        font-size: 11px;
    }
</style>

<div class="container-fluid">
    <!-- Page Header -->
    <div class="page-header">
        <h3 class="page-title">EDIT USER INFO</h3>
        <a href="{{ route('admins.employees')}}" class="btn btn-secondary">
            Back
        </a>
    </div>

    @if ($message = Session::get('success'))
        <div class="alert alert-success" role="alert">
            {{ $message }}
        </div>
    @endif

    @if ($message = Session::get('error'))
        <div class="alert alert-danger" role="alert">
            {{ $message }}
        </div>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger" role="alert">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <!-- Personal Data Information -->
    <form action="{{ route('employees.saveeditemployee', $employees->employee_id) }}" method="POST">
        @csrf
        
        <div class="card section-card">
            <h4 class="section-header">Personal Data Information</h4>
            <div class="section-body">
                <div class="row">
                    <!-- Left Column -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="employee_salutation">Salutation</label>
                            <select type="text" name="employee_salutation" class="form-control">
                                <option value="">{{ $employees->employee_salutation ?? 'N/A' }}</option>
                                <option value="DATO'">DATO'</option>
                                <option value="Tuan">Tuan</option>
                                <option value="Puan">Puan</option>
                                <option value="Encik">Encik</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="employee_first_name">Name</label>
                            <input type="text" name="employee_first_name" class="form-control" id="employee_first_name" value="{{ $employees->employee_first_name ?? 'N/A' }}">
                        </div>

                        <div class="form-group">
                            <label for="active">Employment Status</label>
                            <select name="active" id="active" class="form-control" onchange="toggleResignDate(this)">
                                <option value="1" {{ $employees->user->active ? 'selected' : '' }}>Employed</option>
                                <option value="0" {{ !$employees->user->active ? 'selected' : '' }}>Unemployed</option>
                            </select>
                        </div>

                        <div class="form-group" id="resignation-date-group" style="display: {{ $employees->user->active ? 'none' : 'block' }}">
                            <label for="employee_resigned_at">Resignation Date</label>
                            <input type="date" name="employee_resigned_at" class="form-control" 
                                value="{{ old('employee_resigned_at', $employees->employee_resigned_at) }}">
                        </div>

                        <script>
                        function toggleResignDate(select) {
                            const resignGroup = document.getElementById('resignation-date-group');
                            const input = resignGroup.querySelector('input');
                            if (select.value == '0') {
                                resignGroup.style.display = 'block';
                            } else {
                                resignGroup.style.display = 'none';
                                input.value = ''; // clear if switching back to employed
                            }
                        }
                        </script>


                        <div class="form-group">
                            <label for="employee_ic_no">MyKAD / Passport No</label>
                            <input type="text" name="employee_ic_no" class="form-control" value="{{ $employees->employee_ic_no ?? 'N/A' }}">
                        </div>

                        <div class="form-group">
                            <label for="employee_gender">Gender</label>
                            <select name="employee_gender" class="form-control" id="employee_gender">
                                <option value="">Select Gender</option>
                                <option value="1" {{ old('employee_gender', $employees->employee_gender) == 1 ? 'selected' : '' }}>Male</option>
                                <option value="2" {{ old('employee_gender', $employees->employee_gender) == 2 ? 'selected' : '' }}>Female</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="state_id">State</label>
                            <select name="state_id" class="form-control">
                                <option value="">{{ $employees->state->name ?? 'Selangor' }}</option>
                                @foreach($states as $state)
                                    <option value="{{ $state->id }}" 
                                        {{ old('state_id', $employees->state_id) == $state->id ? 'selected' : '' }}>
                                        {{ $state->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <!-- Right Column -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="employee_mobile">Mobile Number</label>
                            <input type="text" name="employee_mobile" class="form-control" value="{{ $employees->employee_mobile ?? 'N/A' }}">
                        </div>

                        <div class="form-group">
                            <label for="employee_dob">Birthdate</label>
                            <input type="date" class="form-control" id="employee_dob" name="employee_dob" value="{{ $employees->employee_dob }}">
                        </div>

                        <div class="form-group">
                            <label for="employee_email">Email</label>
                            <input type="text" name="employee_email" class="form-control" id="employee_email" 
                                value="{{ $employees->employee_email ?? 'N/A' }}">
                        </div>

                        <div class="form-group">
                            <label for="employee_alt_email">Personal Email</label>
                            <input type="text" name="employee_alt_email" class="form-control" 
                                value="{{ $employees->employee_alt_email ?? 'N/A' }}">
                        </div>
                    </div>
                </div>
                
                <div class="text-right mt-3">
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
            </div>
        </div>
    </form>

    <!-- Employment Information -->
    <form action="{{ route('employees.saveeditemployee', $employees->employee_id) }}" method="POST">
        @csrf
        
        <div class="card section-card">
            <h4 class="section-header">Employment Information</h4>
            <div class="section-body">
                <div class="row">
                    <!-- Left Column -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="employee_no">Employee No.</label>
                            <input type="text" name="employee_no" class="form-control" id="employee_no" 
                                value="{{ $employees->employee_no }}">
                        </div>

                        <div class="form-group">
                            <label for="employee_company_id">Company</label>
                            <select name="employee_company_id" class="form-control">
                                <option value="">{{ $employees->company->company_name ?? 'N/A' }}</option>
                                @foreach($companies as $company)
                                    <option value="{{ $company->company_id }}">{{ $company->company_name ?? 'N/A' }}</option>
                                @endforeach                                                             
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="employee_department_id">Department</label>
                            <select name="employee_department_id" class="form-control">
                                <option value="">{{ $employees->department->department_name ?? 'N/A' }}</option>
                                @foreach($departments as $department)
                                    <option value="{{ $department->department_id }}">{{ $department->department_name ?? 'N/A' }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="employee_grade_id">Grade</label>
                            <select name="employee_grade_id" class="form-control">
                                <option value="">{{ $employees->grade->grade_name ?? 'N/A' }}</option>
                                @foreach($grades as $grades)
                                    <option value="{{ $grades->grade_id }}">{{ $grades->grade_name ?? 'N/A' }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="employee_joined_at">Joined Date</label>
                            <input type="date" class="form-control" name="employee_joined_at" value="{{ $employees->employee_joined_at }}">
                        </div>

                        <div class="form-group">
                            <label for="user_is_approver">Set as Approver</label>
                            <select name="user_is_approver" class="form-control">
                                <option value="">NO</option>
                                <option value="1">YES</option>
                            </select>
                        </div>

                        @if($employees->emptype->emptype_id !== 1)
                        <div class="form-group d-flex align-items-end">
                            <div style="flex: 1;">
                                <label for="contract_no">Contract No.</label>
                                <input type="text" name="contract_no" class="form-control" id="contract_no" 
                                    value="{{ $employees->contract_no }}">
                            </div>
                            <a href="{{ route('employees.contractdetail', $employees->employee_id) }}" class="btn btn-info ml-2">
                                Renew Contract
                            </a>
                        </div>
                        @endif
                    </div>

                    <!-- Right Column -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="employee_designation">Employee Designation</label>
                            <select name="employee_designation" class="form-control">
                                <option value="">-- Select Designation --</option>
                                @foreach($designation as $item)
                                    <option value="{{ $item->designation_id }}"
                                        {{ (old('employee_designation', $employees->employee_designation) == $item->designation_id) ? 'selected' : '' }}>
                                        {{ $item->designation_name ?? 'N/A' }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="employee_office_id">Office</label>
                            <select name="employee_office_id" class="form-control">
                                <option value="">{{ $employees->office->office_name ?? 'N/A' }}</option>
                                @foreach($offices as $office)
                                    <option value="{{ $office->office_id }}">{{ $office->office_name ?? 'N/A' }}</option>
                                @endforeach                                                          
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="employee_unit_id">Unit</label>
                            <select name="employee_unit_id" class="form-control">
                                @foreach($units as $unit)
                                    <option value="{{ $unit->unit_id }}" 
                                        {{ (old('employee_unit_id', $employees->employee_unit_id) == $unit->unit_id) ? 'selected' : '' }}>
                                        {{ $unit->unit_name ?? 'N/A' }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="employee_emptype_id">Employment Type</label>
                            <select name="employee_emptype_id" class="form-control">
                                <option value="">{{ $employees->emptype->emptype_name ?? 'N/A' }}</option>
                                @foreach($types as $type)
                                    <option value="{{ $type->emptype_id }}">{{ $type->emptype_name ?? 'N/A' }}</option>
                                @endforeach                                                          
                            </select>
                        </div>

                        <div class="form-group">
    <label for="employee_resigned_at">Resigned Date</label>
    <input type="date" class="form-control" name="employee_resigned_at_display" 
        value="{{ $employees->employee_resigned_at }}" readonly>
</div>



                        <div class="form-group">
                            <label for="hou_hod_select">Set as HOU/HOD</label>
                            <select id="hou_hod_select" class="form-control">
                                <option value="none" selected>None</option>
                                <option value="HOU">HOU</option>
                                <option value="HOD">HOD</option>
                            </select>
                        </div>
                    </div>
                </div>

                <input type="hidden" id="employee_is_hou" name="employee_is_hou" value="0">
                <input type="hidden" id="employee_is_hod" name="employee_is_hod" value="0">
                
                <div class="text-right mt-3">
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
            </div>
        </div>
    </form>

    <!-- Login Information -->
    <form action="{{ route('employees.saveeditemployee', $employees->employee_id) }}" method="POST">
        @csrf
        
        <div class="card section-card">
            <h4 class="section-header">Login Information</h4>
            <div class="section-body">
                <div class="form-row">
                    <div class="form-group col-md-12">
                        <label for="username">Username</label>
                        <input type="text" name="userlogin" class="form-control" id="username" value="{{ $employees->user->userlogin ?? 'N/A' }}">
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group col-md-12">
                        <label for="password">{{ __('Password') }}</label>
                        <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" 
                            value="{{ $employees->user->password }}" name="password" required autocomplete="new-password">

                        @error('password')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group col-md-12">
                        <label for="password-confirm">{{ __('Confirm Password') }}</label>
                        <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                    </div>
                </div>
                
                <div class="text-right mt-3">
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
            </div>
        </div>
    </form>

    <!-- Attendance Information -->
    <form action="{{ route('employees.saveeditemployee', $employees->employee_id) }}" method="POST">
        @csrf
        
        <div class="card section-card">
            <h4 class="section-header">Attendance Information</h4>
            <div class="section-body">
                <div class="row">
                    <!-- Left Column -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="working_hours">
                                Working Hours
                                <small class="text-info d-block">*You can select multiple working hours</small>
                            </label>
                            <select name="employee_time_schedule[]" id="working_hours" class="form-control" multiple disabled>
                                @foreach($workhours as $workhour)
                                    <option value="{{ $workhour->time_schedule_id }}" 
                                        data-flex="{{ $workhour->time_schedule_flex ?? 0 }}"
                                        @if($employees->employeeSchedules && $employees->employeeSchedules->pluck('employees_schedule_time_schedule_id')->contains($workhour->time_schedule_id))
                                            selected
                                        @endif>
                                        {{ $workhour->time_schedule_name ?? 'N/A' }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <!-- Right Column -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="flexible_time">Flexible Time</label>
                            <select name="employee_time_flexibility" id="flexible_time" class="form-control">
                                <option value="">Select Yes/No</option>
                                <option value="1" {{ $employees->employee_time_flexibility == '1' ? 'selected' : '' }}>Yes</option>
                                <option value="0" {{ $employees->employee_time_flexibility == '0' ? 'selected' : '' }}>No</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="flexible_limit">
                                Flexible Limit
                                <small class="text-danger d-block">*Not above 31 days</small>
                            </label>
                            <input type="text" name="employee_flex_limit" class="form-control" id="flexible_limit" 
                                placeholder="Enter limit" value="{{ $employees->employee_flex_limit ?? '' }}" disabled>
                        </div>
                    </div>

                    <div class="col-md-6">
                        
                    </div>
                </div>
                
                <div class="text-right mt-3">
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
            </div>
        </div>
    </form>

    <!-- Leaves Approver / Verifiers -->
    <div class="card section-card">
        <h4 class="section-header">Leaves Approver / Verifiers</h4>
        <div class="section-body">
            <div class="row">
                <!-- Left Column -->
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="approver">Approver</label>
                        <input type="text" class="form-control" value="{{ $approver->employee_first_name ?? 'N/A' }}" readonly>
                    </div>
                </div>
            
                <!-- Right Column -->
                <div class="col-md-6">
                    <div class="form-group d-flex align-items-end">
                        <div style="flex: 1;">
                            <label for="verifier">Verifier</label>
                            <input type="text" class="form-control" value="{{ $verifier ?? 'N/A' }}" readonly>
                        </div>
                        <a href="{{ route('employees.setapprover', $employees->employee_id)}}" class="btn btn-info ml-2">
                            SET VERIFIER/APPROVER
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Leaves Entitled -->
    <div class="card section-card">
        <h4 class="section-header">Leaves Entitled</h4>
        <div class="section-body">
            <div class="row">
                <!-- First Row -->
                <div class="col-md-4">
                    <div class="form-group">
                        <label>AL Entitled</label>
                        <input type="text" class="form-control" value="{{ $employees->leaveEntitled->AL ?? 'N/A' }}" readonly>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label>EL Entitled</label>
                        <input type="text" class="form-control" value="{{ $employees->leaveEntitled->EL ?? 'N/A' }}" readonly>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label>ML Entitled</label>
                        <input type="text" class="form-control" value="{{ $employees->leaveEntitled->ML ?? 'N/A' }}" readonly>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- Second Row -->
                <div class="col-md-4">
                    <div class="form-group">
                        <label>RL Entitled</label>
                        <input type="text" class="form-control" value="{{ $employees->leaveEntitled->RL ?? 'N/A' }}" readonly>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label>Carried Forward</label>
                        <input type="text" class="form-control" value="{{ $employees->leaveEntitled->carry_forward ?? 'N/A' }}" readonly>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group d-flex align-items-end" style="height: 100%;">
                        <a href="{{ route('admins.editleavestaff', $employees->employee_id) }}" class="btn btn-info w-100">
                            CHANGE LEAVE DETAILS
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    // ===== STATUS CHANGE BUTTON =====
    const statusButton       = document.getElementById('changeStatusButton');
    const statusDisplay      = document.getElementById('statusDisplay');
    const activeStatusHidden = document.getElementById('activeStatusHidden');
    const resignedDateInput  = document.getElementById('resignedDateInput');

    if (statusButton && statusDisplay && activeStatusHidden) {
        statusButton.addEventListener('click', function () {
            if (activeStatusHidden.value === '1') {
                // Employed -> Unemployed
                activeStatusHidden.value = '0';
                statusDisplay.value = 'Unemployed';

                if (resignedDateInput) {
                    resignedDateInput.disabled = false;
                    // let HR key in the date manually (don't auto-clear if they already set one)
                    if (!resignedDateInput.value) {
                        resignedDateInput.focus();
                    }
                }
            } else {
                // Unemployed -> Employed
                activeStatusHidden.value = '1';
                statusDisplay.value = 'Employed';

                if (resignedDateInput) {
                    resignedDateInput.disabled = true;
                    resignedDateInput.value = ''; // clear resigned date when rehired
                }
            }
        });

        // Initial state on page load
        if (resignedDateInput) {
            if (activeStatusHidden.value === '1') {
                resignedDateInput.disabled = true;   // current staff
            } else {
                resignedDateInput.disabled = false;  // ex-staff
            }
        }
    }

    // ===== HOU / HOD SELECTION =====
    const selectElement = document.getElementById('hou_hod_select');
    const isHOUInput    = document.getElementById('employee_is_hou');
    const isHODInput    = document.getElementById('employee_is_hod');

    if (selectElement && isHOUInput && isHODInput) {
        selectElement.addEventListener('change', function () {
            const selectedValue = this.value;

            if (selectedValue === 'HOU') {
                isHOUInput.value = '1';
                isHODInput.value = '0';
            } else if (selectedValue === 'HOD') {
                isHOUInput.value = '0';
                isHODInput.value = '1';
            } else {
                isHOUInput.value = '0';
                isHODInput.value = '0';
            }
        });
    }

    // ===== FLEXIBLE TIME TOGGLE =====
    const flexibleTime  = document.getElementById('flexible_time');
    const flexibleLimit = document.getElementById('flexible_limit');
    const workingHours  = document.getElementById('working_hours');

    function toggleFlexibleFields() {
        if (!flexibleTime || !flexibleLimit || !workingHours) return;

        const flexValue = flexibleTime.value;
        
        if (flexValue === '') {
            // No selection yet - disable working hours
            workingHours.disabled = true;
            flexibleLimit.disabled = true;
        } else if (flexValue === '1') {
            // Flexible Time = Yes: Enable multi-select and show all working hours
            workingHours.disabled = false;
            workingHours.multiple = true; // Allow multiple selections
            flexibleLimit.disabled = false;
            
            // Update label hint
            const label = document.querySelector('label[for="working_hours"] small');
            if (label) label.textContent = '*You can select multiple working hours';
            
            // Show all options in working hours
            Array.from(workingHours.options).forEach(function(option) {
                option.style.display = '';
                option.disabled = false;
            });
        } else {
            // Flexible Time = No: Enable single-select, show only non-flexible working hours
            workingHours.disabled = false;
            workingHours.multiple = false; // Only allow ONE selection
            flexibleLimit.disabled = true;
            flexibleLimit.value = '';
            
            // Update label hint
            const label = document.querySelector('label[for="working_hours"] small');
            if (label) label.textContent = '*You can only select one working hour';
            
            // Filter options: hide flexible, show non-flexible
            let firstNonFlexFound = false;
            Array.from(workingHours.options).forEach(function(option) {
                const isFlex = option.getAttribute('data-flex');
                if (isFlex === '1' || isFlex === 1) {
                    // Hide and deselect flexible options
                    option.selected = false;
                    option.style.display = 'none';
                    option.disabled = true;
                } else {
                    // Show non-flexible options
                    option.style.display = '';
                    option.disabled = false;
                    
                    // Keep only first selected option for single-select
                    if (option.selected) {
                        if (!firstNonFlexFound) {
                            firstNonFlexFound = true;
                        } else {
                            option.selected = false; // Deselect additional options
                        }
                    }
                }
            });
        }
        
        // Refresh Select2 to reflect changes
        if (typeof $.fn.select2 !== 'undefined' && $('#working_hours').data('select2')) {
            $('#working_hours').select2('destroy');
            $('#working_hours').select2({
                placeholder: 'Select working hours',
                allowClear: true,
                width: '100%',
                multiple: workingHours.multiple
            });
        }
    }

    if (flexibleTime) {
        // Set correct initial state on load
        toggleFlexibleFields();
        // React to user changes
        flexibleTime.addEventListener('change', toggleFlexibleFields);
    }
    
    // ===== SELECT2 FOR WORKING HOURS MULTI-SELECT =====
    $(document).ready(function() {
        // Check if Select2 is loaded, if not load it
        if (typeof $.fn.select2 === 'undefined') {
            // Add Select2 CSS
            $('<link>')
                .appendTo('head')
                .attr({
                    type: 'text/css',
                    rel: 'stylesheet',
                    href: 'https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css'
                });
            // Add Select2 JS
            $.getScript('https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js', function() {
                initializeSelect2();
            });
        } else {
            initializeSelect2();
        }
        
        function initializeSelect2() {
            $('#working_hours').select2({
                placeholder: 'Select working hours',
                allowClear: true,
                width: '100%'
            });
        }
    });
});
</script>





{{-- <script>
   // Status change button (old version )

        // // Status change button(old version)
        // document.getElementById('changeStatusButton').addEventListener('click', function () {
        //     const statusInput = document.getElementById('statusInput');
        //     const resignedDateInput = document.getElementById('resignedDateInput');

        //     if (statusInput.placeholder === 'Employed') {
        //         statusInput.placeholder = 'Unemployed';
        //         statusInput.value = 'Unemployed';
        //         resignedDateInput.disabled = false;
                
        //         let hiddenInput = document.getElementById('activeStatusHidden');
        //         if (!hiddenInput) {
        //             hiddenInput = document.createElement('input');
        //             hiddenInput.type = 'hidden';
        //             hiddenInput.id = 'activeStatusHidden';
        //             hiddenInput.name = 'active';
        //             statusInput.form.appendChild(hiddenInput);
        //         }
        //         hiddenInput.value = '0';
        //     } else {
        //         statusInput.placeholder = 'Employed';
        //         statusInput.value = 'Employed';
        //         resignedDateInput.disabled = true;
                
        //         let hiddenInput = document.getElementById('activeStatusHidden');
        //         if (!hiddenInput) {
        //             hiddenInput = document.createElement('input');
        //             hiddenInput.type = 'hidden';
        //             hiddenInput.id = 'activeStatusHidden';
        //             hiddenInput.name = 'active';
        //             statusInput.form.appendChild(hiddenInput);
        //         }
        //         hiddenInput.value = '1';
        //     }
        // });

        // HOU/HOD selection
        const selectElement = document.getElementById('hou_hod_select');
        const isHOUInput = document.getElementById('employee_is_hou');
        const isHODInput = document.getElementById('employee_is_hod');

        selectElement.addEventListener('change', function () {
            const selectedValue = this.value;

            if (selectedValue === 'HOU') {
                isHOUInput.value = '1';
                isHODInput.value = '0';
            } else if (selectedValue === 'HOD') {
                isHOUInput.value = '0';
                isHODInput.value = '1';
            } else {
                isHOUInput.value = '0';
                isHODInput.value = '0';
            }
        });

        // Flexible time toggle
        const flexibleTime = document.getElementById('flexible_time');
        const flexibleHours = document.getElementById('flexible_hours');
        const flexibleLimit = document.getElementById('flexible_limit');

        function toggleFlexibleFields() {
            if (flexibleTime.value === '1') {
                flexibleHours.disabled = false;
                flexibleLimit.disabled = false;
            } else {
                flexibleHours.disabled = true;
                flexibleLimit.disabled = true;
                flexibleHours.value = '';
                flexibleLimit.value = '';
            }
        }

        flexibleTime.addEventListener('change', toggleFlexibleFields);
   
</script> --}}

@endsection