{{-- <x-layouts.app :title="__('Create Individual Development Plan')"> --}}
    <style>
        .idp-form-container {
            max-width: 1400px;
            margin: 20px auto;
            background: white;
            padding: 30px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .form-header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .form-title {
            font-size: 18px;
            font-weight: bold;
            margin: 5px 0;
        }
        
        .section-header {
            background-color: #808080;
            color: white;
            padding: 10px;
            font-weight: bold;
            margin-top: 20px;
            margin-bottom: 15px;
        }
        
        .performance-header {
            background-color: #f4b084;
            color: #000;
            padding: 10px;
            font-weight: bold;
            margin-top: 20px;
            margin-bottom: 15px;
        }
        
        .commitment-header {
            background-color: #70ad47;
            color: white;
            padding: 10px;
            font-weight: bold;
            margin-top: 20px;
            margin-bottom: 15px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            font-weight: bold;
            margin-bottom: 8px;
            color: #333;
        }
        
        .form-group input[type="text"],
        .form-group input[type="date"],
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
            box-sizing: border-box;
        }
        
        .form-group textarea {
            min-height: 80px;
            resize: vertical;
        }
        
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        
        .checkbox-group {
            margin: 10px 0;
        }
        
        .checkbox-group label {
            display: flex;
            align-items: flex-start;
            font-weight: normal;
            margin-bottom: 10px;
        }
        
        .checkbox-group input[type="checkbox"],
        .checkbox-group input[type="radio"] {
            margin-right: 10px;
            margin-top: 3px;
        }
        
        .performance-item {
            border: 1px solid #ddd;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 4px;
            background-color: #fafafa;
        }
        
        .performance-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
        
        .btn-add-performance {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-bottom: 20px;
        }
        
        .btn-add-performance:hover {
            background-color: #45a049;
        }
        
        .btn-remove {
            background-color: #f44336;
            color: white;
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
        }
        
        .btn-remove:hover {
            background-color: #da190b;
        }
        
        .btn-submit {
            background-color: #2196F3;
            color: white;
            padding: 12px 30px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            margin-top: 20px;
        }
        
        .btn-submit:hover {
            background-color: #0b7dda;
        }
        
        .error-message {
            color: #f44336;
            font-size: 12px;
            margin-top: 5px;
        }
        
        .success-message {
            background-color: #4CAF50;
            color: white;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 20px;
        }
       #performance-table th, #performance-table td {
            border: 1px solid #000;
            padding: 5px;
            font-size: 11px;
            vertical-align: top;
        }

        #performance-table textarea {
            width: 100%;
            min-height: 50px;
            border: none;
            resize: none;
            background: transparent;
        }

        #performance-table input {
            width: 100%;
            border: 1px solid #eee;
            font-size: 11px;
        }
        #development-plan-table th, #development-plan-table td {
            border: 1px solid #000;
            padding: 4px;
            font-size: 11px;
        }

        #development-plan-table textarea {
            width: 100%;
            border: 1px solid #ccc;
            border-radius: 4px;
            min-height: 40px;
            font-size: 11px;
            background: transparent;
            resize: vertical;
        }

        #development-plan-table input, #development-plan-table select {
          width: 100%;
            /* border: none; */
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
            box-sizing: border-box;
            background: transparent;
            outline: none;
            font-family: inherit;
        }
        /* Match header colors from image_f57463.png */
        .performance-header {
            background-color: #ed7d31;
            color: white;
            padding: 10px;
            font-weight: bold;
            margin-top: 20px;
        }
        .competency-table th, .competency-table td {
            border: 1px solid #000;
            padding: 8px;
            text-align: center;
            font-size: 13px;
        }

        .competency-table input, .competency-table select, .competency-table textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
            box-sizing: border-box;
            background: transparent;
            outline: none;
            font-family: inherit;
        }

        .competency-table tr:nth-child(even) {
            background-color: #f2f2f2;
        }
    </style>

    <div class="idp-form-container">
        @if(session('success'))
            <div class="success-message">
                {{ session('success') }}
            </div>
        @endif
        <h1>Create Individual Development Plan</h1>

        <form id="idp-form" method="POST" action="{{ route('reports.generateExcel') }}">
            @csrf

            <!-- I. Employee Profile Section -->
            <div class="section-header">I. Employee Profile</div>
            <div class="form-row">
                <div class="form-group">
                    <label for="year">Year:</label>
                    <select name="year" id="year" required>
                        <option value="">Select Year</option>
                        @foreach(range(date('Y'), 1900) as $y)
                            <option value="{{ $y }}" {{ old('year') == $y ? 'selected' : '' }}>
                                {{ $y }}
                            </option>
                        @endforeach
                    </select>

                    @if($errors && $errors->has('year'))
                        <div class="error-message">{{ $errors->first('year') }}</div>
                    @endif
                </div>
                <div class="form-group">
                    <label>Name:</label>
                   <select name="employee_id" id="employee_id" class="form-control" required>
                        <option value="">Select Employee</option>
                        @foreach($employees as $employee)
                            <option value="{{ $employee->id }}" {{ old('employee_id') == $employee->id ? 'selected' : '' }}>
                                {{ $employee->full_name }}
                            </option>
                        @endforeach
                    </select>
                    @if($errors && $errors->has('employee_id'))
                        <div class="error-message">{{ $errors->first('employee_id') }}</div>
                    @endif
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label>Position:</label>
                    <input type="text" name="position" value="{{ old('position') }}" id="position_title" required>
                    @if($errors && $errors->has('position'))
                        <div class="error-message">{{ $errors->first('position') }}</div>
                    @endif
                </div>

                <div class="form-group">
                    <label>Designation:</label>
                    <input type="text" name="designation" value="{{ old('designation') }}" id="designation">
                    @if($errors && $errors->has('designation'))
                        <div class="error-message">{{ $errors->first('designation') }}</div>
                    @endif
                </div>
            </div>

            <div class="form-group">
                <label>Office/Division/Section:</label>
                <input type="text" name="office_division"  value="{{ old('office_division') }}" id="division" required>
                @if($errors && $errors->has('office_division'))
                    <div class="error-message">{{ $errors->first('office_division') }}</div>
                @endif
            </div>

            <div class="form-group">
                <label>Purpose:</label>
                <div class="checkbox-group">
                    <label>
                        <input type="radio" name="purpose" value="new_position" {{ old('purpose') == 'new_position' ? 'checked' : '' }}>
                        New to position/role. I am new to my job or designated to a new role and would like to develop the required competencies
                    </label>
                    <label>
                        <input type="radio" name="purpose" value="development_in_place" {{ old('purpose') == 'development_in_place' ? 'checked' : '' }}>
                        Development in place. I would like to address the identified performance/competency gaps and/or continue to develop the required competencies for my current position/role.
                    </label>
                    <label>
                        <input type="radio" name="purpose" value="others" {{ old('purpose') == 'others' ? 'checked' : '' }}>
                        Others (Please specify)
                    </label>
                </div>

                <div id="purpose-others-container" style="display: {{ old('purpose') == 'others' ? 'block' : 'none' }}; margin-top: 10px;">
                    <input type="text" 
                        name="purpose_others" 
                        id="purpose_others" 
                        placeholder="Please specify your purpose" 
                        value="{{ old('purpose_others') }}"
                        class="form-control">
                </div>

                @if($errors && $errors->has('purpose'))
                    <div class="error-message">{{ $errors->first('purpose') }}</div>
                @endif
            </div>
           <div class="form-group">
                <label>Current Qualifications</label>
                <div class="checkbox-group" style="border: 1px solid #ddd; padding: 15px; border-radius: 4px;">
                    
                    <div class="form-group">
                        <label>Highest Educational Attainment:</label>
                        <input type="text" name="highest_education_attainment" value="{{ old('highest_education_attainment') }}" id="highest_education_attainment_id">
                    </div>

                    <div class="form-group">
                        <label>Training:</label>
                        <input type="text" name="training" value="{{ old('training') }}" id="training_id">
                        <small style="color: #666; font-style: italic;">*No. of hours acquired for Managerial/ Supervisory/ Technical learning developments</small>
                    </div>

                    <div class="form-group">
                        <label>Experience:</label>
                        <input type="text" name="experience" value="{{ old('experience') }}" id="experience_id">
                    </div>

                    <div class="form-group">
                        <label>Eligibility:</label>
                        <div style="margin-left: 10px;">
                            <label style="font-weight: normal; display: block; margin-bottom: 5px;">
                                <input type="checkbox" name="eligibility[]" value="Career Service Subprofessional" {{ is_array(old('eligibility')) && in_array('Career Service Subprofessional', old('eligibility')) ? 'checked' : '' }}> 
                                Career Service Subprofessional
                            </label>
                            <label style="font-weight: normal; display: block; margin-bottom: 5px;">
                                <input type="checkbox" name="eligibility[]" value="Career Service Professional" {{ is_array(old('eligibility')) && in_array('Career Service Professional', old('eligibility')) ? 'checked' : '' }}> 
                                Career Service Professional
                            </label>
                            <label style="font-weight: normal; display: block; margin-bottom: 5px;">
                                <input type="checkbox" name="eligibility[]" value="Career Service Executive Eligibility" {{ is_array(old('eligibility')) && in_array('Career Service Executive Eligibility', old('eligibility')) ? 'checked' : '' }}> 
                                Career Service Executive Eligibility
                            </label>
                            <label style="font-weight: normal; display: block; margin-bottom: 5px;">
                                <input type="checkbox" id="eligibility-others-checkbox" name="eligibility[]" value="Others" {{ is_array(old('eligibility')) && in_array('Others', old('eligibility')) ? 'checked' : '' }}> 
                                Others:
                            </label>
                            
                            <div id="eligibility-others-container" style="display: {{ is_array(old('eligibility')) && in_array('Others', old('eligibility')) ? 'block' : 'none' }}; margin-left: 25px; margin-top: 5px;">
                                <input type="text" name="eligibility_others_specify" id="eligibility_others_specify" value="{{ old('eligibility_others_specify') }}" placeholder="Please specify eligibility" class="form-control">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="section-header">II. JOB REQUIREMENTS</div>

            <h4 style="background-color: #deeaf6; padding: 5px;">A. Current Position</h4>
            <table class="competency-table" style="width:100%; border-collapse: collapse; margin-bottom: 20px;">
                <thead>
                    <tr style="background-color: #2f5597; color: white;">
                        <th colspan="2">REQUIRED COMPETENCY</th>
                        <th rowspan="2">CURRENT LEVEL</th>
                        <th rowspan="2">STATUS</th>
                        <th rowspan="2">REMARKS</th>
                    </tr>
                    <tr style="background-color: #2f5597; color: white;">
                        <th>Competency Title</th>
                        <th>Level</th>
                    </tr>
                </thead>
                <tbody>
                    @for($i = 1; $i <= 3; $i++)
                    <tr>
                        <td><input type="text" name="competency[{{ $i }}][title]" placeholder="e.g. Training Admin"></td>
                        <td style="width: 80px;"><input type="number" name="competency[{{ $i }}][required_level]"></td>
                        <td style="width: 80px;"><input type="number" name="competency[{{ $i }}][current_level]"></td>
                        <td>
                            <select name="competency[{{ $i }}][status]">
                                <option value="met">Met Competency Level</option>
                                <option value="not_met">Did not meet Competency Level</option>
                            </select>
                        </td>
                        <td><textarea name="competency[{{ $i }}][remarks]" style="min-height: 40px;"></textarea></td>
                    </tr>
                    @endfor
                </tbody>
            </table>
            <h4 style="background-color: #deeaf6; padding: 5px;">B. Designated Position/ Next Level Position (accomplish this portion ONLY IF APPLICABLE) :_______________________</h4>
            <table class="competency-table" style="width:100%; border-collapse: collapse; margin-bottom: 20px;">
                <thead>
                    <tr style="background-color: #2f5597; color: white;">
                        <th colspan="2">REQUIRED COMPETENCY</th>
                        <th rowspan="2">CURRENT LEVEL</th>
                        <th rowspan="2">STATUS</th>
                        <th rowspan="2">REMARKS</th>
                    </tr>
                    <tr style="background-color: #2f5597; color: white;">
                        <th>Competency Title</th>
                        <th>Level</th>
                    </tr>
                </thead>
                <tbody>
                    @for($i = 1; $i <= 3; $i++)
                    <tr>
                        <td><input type="text" name="competency[{{ $i }}][title]" placeholder="e.g. Training Admin"></td>
                        <td style="width: 80px;"><input type="number" name="competency[{{ $i }}][required_level]"></td>
                        <td style="width: 80px;"><input type="number" name="competency[{{ $i }}][current_level]"></td>
                        <td>
                            <select name="competency[{{ $i }}][status]">
                                <option value="met">Met Competency Level</option>
                                <option value="not_met">Did not meet Competency Level</option>
                            </select>
                        </td>
                        <td><textarea name="competency[{{ $i }}][remarks]" style="min-height: 40px;"></textarea></td>
                    </tr>
                    @endfor
                </tbody>
            </table>
            <div style="background-color: #c6e0b4; padding: 10px; font-weight: bold; margin-top: 20px;">
                III. PERFORMANCE EVALUATION (Based on latest IPCR)
            </div>
            <div style="border: 1px solid #000; padding: 10px; background-color: #fff;">
                <div class="form-group">
                    <label>STRENGTHS:</label>
                    <textarea name="strengths" placeholder="Enter strengths..."></textarea>
                </div>
                <div class="form-group">
                    <label>AREAS FOR IMPROVEMENTS:</label>
                    <textarea name="areas_improvement_eval" placeholder="Enter areas for improvement..."></textarea>
                </div>
                <div class="form-group">
                    <label>RECOMMENDATIONS & COMMENDATIONS:</label>
                    <textarea name="recommendations" placeholder="Enter recommendations..."></textarea>
                </div>
            </div>

            <div class="performance-header" style="background-color: #ed7d31;">IV. DEVELOPMENT PLAN</div>

                <div style="overflow-x: auto;">
                    <table id="development-plan-table" style="width:100%; border-collapse: collapse; margin-bottom: 10px; border: 1px solid #000;">
                        <thead>
                            <tr style="background-color: #f4b084; color: black; font-size: 11px;">
                                <th rowspan="3" style="width: 15%;">Priority Competencies</th>
                                <th rowspan="3" style="width: 5%;">Target Level</th>
                                <th colspan="6" style="width: 45%;">Proposed Interventions to be Undertaken (70-20-10 learning model)</th>
                                <th colspan="2" style="width: 15%;">Status of Targets</th>
                                <th rowspan="3" style="width: 20%;">Results of Target/ Remarks/ Next Steps</th>
                                <th rowspan="3" style="width: 5%;">Action</th>
                            </tr>
                            <tr style="background-color: #fce4d6; font-size: 10px;">
                                <th colspan="2">70% (Workplace Learning)</th>
                                <th colspan="2">20% (Social Learning)</th>
                                <th colspan="2">10% (Formal Learning)</th>
                                <th rowspan="2">EO 1st Semester</th>
                                <th rowspan="2">EO 2nd Semester</th>
                            </tr>
                            <tr style="background-color: #fce4d6; font-size: 10px;">
                                <th>Interventions</th>
                                <th>Timeline</th>
                                <th>Interventions</th>
                                <th>Timeline</th>
                                <th>Interventions</th>
                                <th>Timeline</th>
                            </tr>
                        </thead>
                        <tbody id="dev-plan-container">
                            </tbody>
                    </table>
                </div>

            <div style="text-align: center; margin-top: 10px;">
                    <button type="button" class="btn-add-performance" onclick="addDevPlanRow()">+ Add Priority Competency</button>
                
            </div>

            <div style="overflow-x: auto;">
                <table id="development-plan-table" style="width:100%; border-collapse: collapse; margin-bottom: 10px; border: 1px solid #000;">
                    <thead>
                        <tr style="background-color: #f4b084; color: black; font-size: 11px;">
                            <th rowspan="3" style="width: 15%;">Other Areas</th>
                            <th rowspan="3" style="width: 5%;">Target Level</th>
                            <th colspan="6" style="width: 45%;">Proposed Interventions to be Undertaken (70-20-10 learning model)</th>
                            <th colspan="2" style="width: 15%;">Status of Targets</th>
                            <th rowspan="3" style="width: 20%;">Results of Target/ Remarks/ Next Steps</th>
                            <th rowspan="3" style="width: 5%;">Action</th>
                        </tr>
                        <tr style="background-color: #fce4d6; font-size: 10px;">
                            <th colspan="2">70% (Workplace Learning)</th>
                            <th colspan="2">20% (Social Learning)</th>
                            <th colspan="2">10% (Formal Learning)</th>
                            <th rowspan="2">EO 1st Semester</th>
                            <th rowspan="2">EO 2nd Semester</th>
                        </tr>
                        <tr style="background-color: #fce4d6; font-size: 10px;">
                            <th>Interventions</th>
                            <th>Timeline</th>
                            <th>Interventions</th>
                            <th>Timeline</th>
                            <th>Interventions</th>
                            <th>Timeline</th>
                        </tr>
                    </thead>
                    <tbody id="dev-plan-container-for-other">
                        </tbody>
                </table>
            </div>

            <div style="text-align: center; margin-bottom: 30px;">
                <button type="button" id="btn-add-item" class="btn-add-performance" onclick="addPerformanceItem()">+ Add Priority Competency</button>
            </div>
            <!-- Commitment and Certification Section -->
            <div class="commitment-header">COMMITMENT AND CERTIFICATION</div>

            <div class="form-row">
                <div class="form-group">
                    <label>Division Chief Name:</label>
                    <input type="text" name="division_chief" value="{{ old('division_chief') }}">
                    @error('division_chief')
                        <div class="error-message">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label>Date:</label>
                    <input type="date" name="division_chief_title" value="{{ old('division_chief_title', 'Division Chief, HRMDS-HRPPMD') }}">
                    @error('division_chief_title')
                        <div class="error-message">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label>Director Name:</label>
                    <input type="text" name="director" value="{{ old('director') }}">
                    @error('director')
                        <div class="error-message">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label>Date:</label>
                    <input type="date" name="director_title" value="{{ old('director_title', 'Director IV, HRMDS') }}">
                    @error('director_title')
                        <div class="error-message">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <div style="text-align: center; margin-top: 30px; margin-bottom: 20px;">
                <button type="submit" class="btn-submit">Submit Individual Development Plan</button>
            </div>
        </form>
    </div>

<script>
    const employeesData = @json($employee_data);
    console.log('Employee Data:', employeesData); // Check if data is loaded
    
    // Employee select change event
    document.getElementById('employee_id').addEventListener('change', function() {
        console.log('Employee changed!'); // Check if event fires
        
        const selectedEmployeeId = parseInt(this.value);
        console.log('Selected ID:', selectedEmployeeId); // Check selected ID
        
        if (!selectedEmployeeId) {
            console.log('No employee selected, clearing fields');
            document.getElementById('position_title').value = '';
            document.getElementById('division').value = '';
            document.getElementById('designation').value = '';
            return;
        }
        
        // Find employee
        const employee = employeesData.find(emp => emp.id === selectedEmployeeId);
        console.log('Found Employee:', employee);
        
            if (employee) {
            document.getElementById('position_title').value = employee.position_title || 'N/A';
            document.getElementById('division').value = employee.division || 'N/A';
            document.getElementById('designation').value = employee.designation || 'N/A';
            document.getElementById('experience_id').value = employee.csc_relevant_experience || '';
            document.getElementById('training_id').value = employee.csc_relevant_training || '';
            document.getElementById('highest_education_attainment_id').value = employee.csc_relevant_education || '';
            
            handleEligibilityCheckboxes(employee.csc_relevant_eligibility);
        } else {
            document.getElementById('position_title').value = 'N/A';
            document.getElementById('division').value = 'N/A';
            document.getElementById('designation').value = 'N/A';
            document.getElementById('experience_id').value = '';
            document.getElementById('training_id').value = '';
            document.getElementById('highest_education_attainment_id').value = '';
            clearEligibilityCheckboxes();
        }
    });
    function handleEligibilityCheckboxes(eligibilityString) {
        // First, clear all checkboxes
        clearEligibilityCheckboxes();
        
        // If no eligibility data, return
        if (!eligibilityString) {
            return;
        }
        
        // Split the eligibility string by line breaks or commas
        const eligibilities = eligibilityString.split(/[\n,]+/).map(e => e.trim()).filter(e => e);
        
        // Known eligibility options
        const knownEligibilities = [
            'Career Service Subprofessional',
            'Career Service Professional',
            'Career Service Professional / Second Level Eligibility',
            'Career Service Executive Eligibility',
            'None',
            'RA 1080 (Certified Public Accountant)',
            'RA (Registered Social Worker)'
        ];
        
        let othersText = [];
        
        eligibilities.forEach(eligibility => {
            const trimmedEligibility = eligibility.trim();
            
            // Check for Career Service Subprofessional
            if (trimmedEligibility.includes('Career Service Subprofessional')) {
                checkEligibilityBox('Career Service Subprofessional');
            }
            // Check for Career Service Professional (including Second Level)
            else if (trimmedEligibility.includes('Career Service Professional')) {
                checkEligibilityBox('Career Service Professional');
            }
            // Check for Career Service Executive
            else if (trimmedEligibility.includes('Career Service Executive')) {
                checkEligibilityBox('Career Service Executive Eligibility');
            }
            // Check if it's "None"
            else if (trimmedEligibility === 'None') {
                // Don't check any boxes for "None"
            }
            // Everything else goes to "Others"
            else {
                othersText.push(trimmedEligibility);
            }
        });
        
        // If there are "Others", check the Others checkbox and fill the text
        if (othersText.length > 0) {
            checkEligibilityBox('Others');
            document.getElementById('eligibility_others_specify').value = othersText.join(', ');
            document.getElementById('eligibility-others-container').style.display = 'block';
        }
    }
    // Function to check a specific eligibility checkbox
    function checkEligibilityBox(value) {
        const checkboxes = document.querySelectorAll('input[name="eligibility[]"]');
        checkboxes.forEach(checkbox => {
            if (checkbox.value === value) {
                checkbox.checked = true;
            }
        });
    }

    // Function to clear all eligibility checkboxes
    function clearEligibilityCheckboxes() {
        const checkboxes = document.querySelectorAll('input[name="eligibility[]"]');
        checkboxes.forEach(checkbox => {
            checkbox.checked = false;
        });
        document.getElementById('eligibility_others_specify').value = '';
        document.getElementById('eligibility-others-container').style.display = 'none';
    }

    // Handle "Others" checkbox to show/hide the specify field
    document.getElementById('eligibility-others-checkbox').addEventListener('change', function() {
        const container = document.getElementById('eligibility-others-container');
        if (this.checked) {
            container.style.display = 'block';
        } else {
            container.style.display = 'none';
            document.getElementById('eligibility_others_specify').value = '';
        }
    });


    // ===== ALTERNATIVE: SMARTER PARSING (Handles your exact DB format) =====

    function handleEligibilityCheckboxes(eligibilityString) {
        clearEligibilityCheckboxes();
        
        if (!eligibilityString) {
            return;
        }
        
        // Normalize the string
        const normalized = eligibilityString.toLowerCase();
        
        // Check for specific patterns
        if (normalized.includes('career service professional') && normalized.includes('second level')) {
            checkEligibilityBox('Career Service Professional');
        } else if (normalized.includes('career service professional')) {
            checkEligibilityBox('Career Service Professional');
        }
        
        if (normalized.includes('career service subprofessional')) {
            checkEligibilityBox('Career Service Subprofessional');
        }
        
        if (normalized.includes('career service executive')) {
            checkEligibilityBox('Career Service Executive Eligibility');
        }
        
        // Check for "Others" - RA 1080, Registered Social Worker, etc.
        const othersPatterns = [
            'ra 1080',
            'certified public accountant',
            'registered social worker',
            'ra ('
        ];
        
        let hasOthers = false;
        let othersText = [];
        
        // Split by lines
        const lines = eligibilityString.split('\n').map(l => l.trim()).filter(l => l);
        
        lines.forEach(line => {
            const lineLower = line.toLowerCase();
            
            // Check if this line is an "Others" eligibility
            const isOthers = othersPatterns.some(pattern => lineLower.includes(pattern));
            
            if (isOthers || (!lineLower.includes('career service') && line !== 'None')) {
                hasOthers = true;
                othersText.push(line);
            }
        });
        
        if (hasOthers) {
            checkEligibilityBox('Others');
            document.getElementById('eligibility_others_specify').value = othersText.join(', ');
            document.getElementById('eligibility-others-container').style.display = 'block';
        }
    }


    // ===== COMPLETE EXAMPLE WITH DEBUGGING =====

    document.getElementById('employee_id').addEventListener('change', function() {
        const selectedEmployeeId = parseInt(this.value);
        
        console.log('Selected Employee ID:', selectedEmployeeId);
        
        if (!selectedEmployeeId) {
            document.getElementById('position_title').value = 'N/A';
            document.getElementById('division').value = 'N/A';
            document.getElementById('designation').value = 'N/A';
            document.getElementById('experience_id').value = '';
            document.getElementById('training_id').value = '';
            document.getElementById('highest_education_attainment_id').value = '';
            clearEligibilityCheckboxes();
            return;
        }
        
        const employee = employeesData.find(emp => emp.id === selectedEmployeeId);
        console.log('Found Employee:', employee);
        
        if (employee) {
            document.getElementById('position_title').value = employee.position_title || 'N/A';
            document.getElementById('division').value = employee.division || 'N/A';
            document.getElementById('designation').value = employee.designation || 'N/A';
            document.getElementById('experience_id').value = employee.csc_relevant_experience || '';
            document.getElementById('training_id').value = employee.csc_relevant_training || '';
            document.getElementById('highest_education_attainment_id').value = employee.csc_relevant_education || '';
            
            console.log('Eligibility String:', employee.csc_relevant_eligibility);
            handleEligibilityCheckboxes(employee.csc_relevant_eligibility);
        }
    });

    function handleEligibilityCheckboxes(eligibilityString) {
        clearEligibilityCheckboxes();
        
        if (!eligibilityString) {
            console.log('No eligibility data');
            return;
        }
        
        console.log('Processing eligibility:', eligibilityString);
        
        const normalized = eligibilityString.toLowerCase();
        const lines = eligibilityString.split('\n').map(l => l.trim()).filter(l => l && l !== 'None');
        
        console.log('Lines:', lines);
        
        let othersItems = [];
        
        lines.forEach(line => {
            const lineLower = line.toLowerCase();
            
            if (lineLower.includes('career service professional') && lineLower.includes('second level')) {
                console.log('Checking: Career Service Professional');
                checkEligibilityBox('Career Service Professional');
            } else if (lineLower.includes('career service subprofessional')) {
                console.log('Checking: Career Service Subprofessional');
                checkEligibilityBox('Career Service Subprofessional');
            } else if (lineLower.includes('career service executive')) {
                console.log('Checking: Career Service Executive');
                checkEligibilityBox('Career Service Executive Eligibility');
            } else if (lineLower !== 'none') {
                // It's an "Others" item
                console.log('Adding to Others:', line);
                othersItems.push(line);
            }
        });
        
        if (othersItems.length > 0) {
            console.log('Checking Others with:', othersItems);
            checkEligibilityBox('Others');
            document.getElementById('eligibility_others_specify').value = othersItems.join(', ');
            document.getElementById('eligibility-others-container').style.display = 'block';
        }
    }

    function checkEligibilityBox(value) {
        const checkboxes = document.querySelectorAll('input[name="eligibility[]"]');
        checkboxes.forEach(checkbox => {
            if (checkbox.value === value) {
                checkbox.checked = true;
                console.log('Checked:', value);
            }
        });
    }

    function clearEligibilityCheckboxes() {
        const checkboxes = document.querySelectorAll('input[name="eligibility[]"]');
        checkboxes.forEach(checkbox => {
            checkbox.checked = false;
        });
        document.getElementById('eligibility_others_specify').value = '';
        document.getElementById('eligibility-others-container').style.display = 'none';
    }

    // Handle manual "Others" checkbox
    document.getElementById('eligibility-others-checkbox').addEventListener('change', function() {
        const container = document.getElementById('eligibility-others-container');
        if (this.checked) {
            container.style.display = 'block';
        } else {
            container.style.display = 'none';
            document.getElementById('eligibility_others_specify').value = '';
        }
    });
    document.addEventListener('DOMContentLoaded', function() {
        const eligibilityOthersCheckbox = document.getElementById('eligibility-others-checkbox');
        const eligibilityOthersContainer = document.getElementById('eligibility-others-container');
        const eligibilityOthersInput = document.getElementById('eligibility_others_specify');

        if (eligibilityOthersCheckbox) {
            eligibilityOthersCheckbox.addEventListener('change', function() {
                if (this.checked) {
                    eligibilityOthersContainer.style.display = 'block';
                    eligibilityOthersInput.focus();
                } else {
                    eligibilityOthersContainer.style.display = 'none';
                    eligibilityOthersInput.value = ''; // Clear text if unchecked
                }
            });
        }
    });
    document.addEventListener('DOMContentLoaded', function() {
        const radioButtons = document.querySelectorAll('input[name="purpose"]');
        const othersContainer = document.getElementById('purpose-others-container');
        const othersInput = document.getElementById('purpose_others');

        radioButtons.forEach(radio => {
            radio.addEventListener('change', function() {
                if (this.value === 'others') {
                    othersContainer.style.display = 'block';
                    othersInput.setAttribute('required', 'required'); // Optional: make it required if selected
                    othersInput.focus();
                } else {
                    othersContainer.style.display = 'none';
                    othersInput.removeAttribute('required');
                    othersInput.value = ''; // Clear text if user switches to a different radio
                }
            });
        });
    });
       let devPlanCount = 0;

        function addDevPlanRow() {
            devPlanCount++;
            const container = document.getElementById('dev-plan-container');
            
            const rowHtml = `
                <tr id="dev-row-${devPlanCount}">
                    <td><textarea name="dev_plan[${devPlanCount}][competency]" required></textarea></td>
                    <td><input type="number" name="dev_plan[${devPlanCount}][target_level]" style="width: 100%;"></td>
                    
                    <td><textarea name="dev_plan[${devPlanCount}][workplace_interventions]"></textarea></td>
                    <td><input type="text" name="dev_plan[${devPlanCount}][workplace_timeline]" placeholder="Q1/Q2"></td>
                    
                    <td><textarea name="dev_plan[${devPlanCount}][social_interventions]"></textarea></td>
                    <td><input type="text" name="dev_plan[${devPlanCount}][social_timeline]"></td>
                    
                    <td><textarea name="dev_plan[${devPlanCount}][formal_interventions]"></textarea></td>
                    <td><input type="text" name="dev_plan[${devPlanCount}][formal_timeline]"></td>
                    
                    <td>
                        <select name="dev_plan[${devPlanCount}][status_1st]">
                            <option value=""></option>
                            <option value="Met">Met</option>
                            <option value="Ongoing">Ongoing</option>
                        </select>
                    </td>
                    <td>
                        <select name="dev_plan[${devPlanCount}][status_2nd]">
                            <option value=""></option>
                            <option value="Met">Met</option>
                            <option value="Ongoing">Ongoing</option>
                        </select>
                    </td>
                    
                    <td><textarea name="dev_plan[${devPlanCount}][results_remarks]"></textarea></td>
                    
                    <td style="text-align: center;">
                        <button type="button" onclick="removeDevRow(${devPlanCount})" style="background:#ff4d4d; color:white; border:none; border-radius:3px; cursor:pointer;">Removed</button>
                    </td>
                </tr>
            `;
            
            container.insertAdjacentHTML('beforeend', rowHtml);
        }

        function removeDevRow(id) {
            document.getElementById(`dev-row-${id}`).remove();
        }
       let devPlanCountForOther = 0;

        function addPerformanceItem() {
            devPlanCountForOther++;
            const container = document.getElementById('dev-plan-container-for-other');
            
            const rowHtml = `
                <tr id="dev-rows-${devPlanCountForOther}">
                    <td><textarea name="dev_plan[${devPlanCountForOther}][competency]" required></textarea></td>
                    <td><input type="number" name="dev_plan[${devPlanCountForOther}][target_level]" style="width: 100%;"></td>
                    
                    <td><textarea name="dev_plan[${devPlanCountForOther}][workplace_interventions]"></textarea></td>
                    <td><input type="text" name="dev_plan[${devPlanCountForOther}][workplace_timeline]" placeholder="Q1/Q2"></td>
                    
                    <td><textarea name="dev_plan[${devPlanCountForOther}][social_interventions]"></textarea></td>
                    <td><input type="text" name="dev_plan[${devPlanCountForOther}][social_timeline]"></td>
                    
                    <td><textarea name="dev_plan[${devPlanCountForOther}][formal_interventions]"></textarea></td>
                    <td><input type="text" name="dev_plan[${devPlanCountForOther}][formal_timeline]"></td>
                    
                    <td>
                        <select name="dev_plan[${devPlanCountForOther}][status_1st]">
                            <option value=""></option>
                            <option value="Met">Met</option>
                            <option value="Ongoing">Ongoing</option>
                        </select>
                    </td>
                    <td>
                        <select name="dev_plan[${devPlanCountForOther}][status_2nd]">
                            <option value=""></option>
                            <option value="Met">Met</option>
                            <option value="Ongoing">Ongoing</option>
                        </select>
                    </td>
                    
                    <td><textarea name="dev_plan[${devPlanCountForOther}][results_remarks]"></textarea></td>
                    
                    <td style="text-align: center;">
                        <button type="button" onclick="removeDevRowforOther(${devPlanCountForOther})" style="background:#ff4d4d; color:white; border:none; border-radius:3px; cursor:pointer;">Removed</button>
                    </td>
                </tr>
            `;
            
            container.insertAdjacentHTML('beforeend', rowHtml);
        }

        function removeDevRowforOther(id) {
            document.getElementById(`dev-rows-${id}`).remove();
        }

        // Auto-load first row
        window.addEventListener('load', addDevPlanRow);
        window.addEventListener('load', addPerformanceItem);
</script>