{{-- <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 {
            background-color: #f4b084;
            padding: 10px;
            border: 1px solid #ccc;
            font-size: 13px;
        }

        #performance-table td {
            padding: 8px;
            border: 1px solid #ccc;
            vertical-align: top;
        }

        #performance-table textarea {
            width: 100%;
            min-height: 60px;
            border: 1px solid #ddd;
            font-family: inherit;
        }

        #performance-table input[type="date"] {
            width: 100%;
            font-size: 12px;
        }
    </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.generate') }}">
            @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>
                    <input type="text" name="employee_name" value="{{ old('employee_name') }}" required>
                    @if($errors && $errors->has('employee_name'))
                        <div class="error-message">{{ $errors->first('employee_name') }}</div>
                    @endif
                </div>
            </div>

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

            <div class="form-group" id="purpose-others-container" style="display: none;">
                <label>Please specify:</label>
                <input type="text" name="purpose_others" value="{{ old('purpose_others') }}">
            </div>

            <!-- III. Performance-Based Section -->
            <div class="performance-header">III. PERFORMANCE-BASED</div>

            <table id="performance-table" style="width:100%; border-collapse: collapse; margin-bottom: 10px;">
                <thead>
                    <tr>
                        <th style="width: 20%;">Areas for Improvement</th>
                        <th style="width: 20%;">Development Activities</th>
                        <th style="width: 15%;">Support/Resources</th>
                        <th style="width: 15%;">Metrics of Success</th>
                        <th style="width: 12%;">Target Start</th>
                        <th style="width: 12%;">Completion Date</th>
                        <th style="width: 6%;">Action</th>
                    </tr>
                </thead>
                <tbody id="performance-items-container">
                    </tbody>
            </table>
            <div style="text-align: center; margin-top: 30px; margin-bottom: 20px;">
                <button type="button" class="btn-add-performance" onclick="addPerformanceItem()">+ Add Performance Item</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') }}" required>
                    @error('division_chief')
                        <div class="error-message">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label>Division Chief Title:</label>
                    <input type="text" name="division_chief_title" value="{{ old('division_chief_title', 'Division Chief, HRMDS-HRPPMD') }}" required>
                    @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') }}" required>
                    @error('director')
                        <div class="error-message">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label>Director Title:</label>
                    <input type="text" name="director_title" value="{{ old('director_title', 'Director IV, HRMDS') }}" required>
                    @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>
       let performanceItemCount = 0;
        const MAX_PERFORMANCE_ITEMS = 2;

        function addPerformanceItem() {
            if (performanceItemCount >= MAX_PERFORMANCE_ITEMS) {
                alert("You can only add a maximum of " + MAX_PERFORMANCE_ITEMS + " performance items.");
                return;
            }

            performanceItemCount++;
            const container = document.getElementById('performance-items-container');
            
            const rowHtml = `
                <tr id="performance-item-${performanceItemCount}">
                    <td><textarea name="performance[${performanceItemCount}][area_improvement]" required></textarea></td>
                    <td>
                        <textarea name="performance[${performanceItemCount}][activities]" required></textarea>
                        <br><small style="font-size:10px; color:#666;">Use ; to separate</small>
                    </td>
                    <td><textarea name="performance[${performanceItemCount}][support]" required></textarea></td>
                    <td><textarea name="performance[${performanceItemCount}][metrics]" required></textarea></td>
                    <td><input type="date" name="performance[${performanceItemCount}][target_date]" required></td>
                    <td><input type="date" name="performance[${performanceItemCount}][completion_date]"></td>
                    <td style="text-align: center;">
                        <button type="button" class="btn-remove" onclick="removePerformanceItem(${performanceItemCount})" style="padding: 5px; background: #ff4d4d; color: white; border: none; border-radius: 4px; cursor: pointer;">✕</button>
                    </td>
                </tr>
            `;
            
            container.insertAdjacentHTML('beforeend', rowHtml);
            checkButtonStatus();
        }

        function removePerformanceItem(id) {
            const item = document.getElementById(`performance-item-${id}`);
            if (item) {
                item.remove();
                performanceItemCount--;
                checkButtonStatus();
            }
        }

        function checkButtonStatus() {
            const btnAdd = document.getElementById('btn-add-item');
            if (performanceItemCount >= MAX_PERFORMANCE_ITEMS) {
                btnAdd.style.display = 'none'; 
            } else {
                btnAdd.style.display = 'inline-block'; 
            }
        }

        // Initialize on load
        window.addEventListener('load', function() {
            addPerformanceItem();
        });
</script>