{{-- <x-layouts.app :title="__('Individual Development Plan')"> --}}
    <style>
        .idp-container {
            max-width: 1400px;
            margin: 20px auto;
            background: white;
            padding: 30px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .idp-header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .idp-title {
            font-size: 18px;
            font-weight: bold;
            margin: 0;
        }
        
        .idp-subtitle {
            font-size: 14px;
            margin: 5px 0;
        }
        
        .section-header {
            background-color: #808080;
            color: white;
            padding: 10px;
            font-weight: bold;
            margin-top: 20px;
            margin-bottom: 0;
        }
        
        .employee-profile-table,
        .performance-table,
        .certification-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        
        .employee-profile-table td,
        .performance-table td,
        .performance-table th,
        .certification-table td {
            border: 1px solid #000;
            padding: 8px;
        }
        
        .employee-profile-table td:first-child {
            width: 200px;
            font-weight: bold;
            background-color: #f5f5f5;
        }
        
        .performance-header {
            background-color: #f4b084;
            font-weight: bold;
            text-align: center;
            padding: 8px;
            font-size: 12px;
        }
        
        .performance-subheader {
            background-color: #fce4d6;
            font-size: 11px;
            padding: 8px;
            text-align: center;
        }
        
        .checkbox-cell {
            text-align: center;
            width: 30px;
        }
        
        .checkbox-label {
            font-size: 12px;
        }
        
        .commitment-header {
            background-color: #70ad47;
            color: white;
            padding: 10px;
            text-align: center;
            font-weight: bold;
            margin-top: 20px;
        }
        
        .commitment-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .commitment-table td {
            border: 1px solid #000;
            padding: 15px;
            vertical-align: top;
        }
        
        .commitment-text {
            width: 70%;
            font-size: 12px;
            line-height: 1.6;
        }
        
        .signature-section {
            width: 30%;
        }
        
        .signature-block {
            margin-bottom: 20px;
        }
        
        .signature-name {
            font-weight: bold;
            margin-bottom: 3px;
        }
        
        .signature-title {
            font-size: 11px;
            color: #666;
        }
        
        .print-btn {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-bottom: 20px;
        }
        
        .print-btn:hover {
            background-color: #45a049;
        }
        
        @media print {
            .print-btn {
                display: none;
            }
            
            .idp-container {
                box-shadow: none;
                padding: 0;
            }
        }
    </style>

    <div class="idp-container">
        <button class="print-btn" onclick="window.print()">Print Report</button>
        
        <!-- Header -->
        <div class="idp-header">
            <h1 class="idp-title">Individual Development Plan</h1>
            <p class="idp-subtitle">CY {{ $idp->year ?? '2025' }}</p>
        </div>

        <!-- I. Employee Profile Section -->
        <div class="section-header">I. Employee Profile</div>
        <table class="employee-profile-table">
            <tr>
                <td>Name:</td>
                <td>{{ $idp->employee_name ?? 'LEAH SALONGA' }}</td>
            </tr>
            <tr>
                <td>Position</td>
                <td>{{ $idp->position ?? 'Administrative Officer IV (Human Resource Management Officer II)' }}</td>
            </tr>
            <tr>
                <td>Designation</td>
                <td>{{ $idp->designation ?? 'NOT APPLICABLE' }}</td>
            </tr>
            <tr>
                <td>Office/Division/Section</td>
                <td>{{ $idp->office_division ?? 'Human Resource Management and Development Service - HRPPMD PMS' }}</td>
            </tr>
            <tr>
                <td rowspan="3">Purpose</td>
                <td>
                    <input type="checkbox" {{ $idp->purpose == 'new_position' ? 'checked' : '' }}>
                    <span class="checkbox-label">New to position/role. I am new to my job or designated to a new role and would like to develop the required competencies</span>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" {{ $idp->purpose == 'development_in_place' ? 'checked' : '' }}>
                    <span class="checkbox-label">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.</span>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" {{ $idp->purpose == 'others' ? 'checked' : '' }}>
                    <span class="checkbox-label">Others (Please specify)</span>
                </td>
            </tr>
        </table>

        <!-- III. Performance-Based Section -->
        <div class="section-header">III. PERFORMANCE-BASED</div>
        <table class="performance-table">
            <thead>
                <tr>
                    <th class="performance-header">Areas for Improvement<br><span style="font-size: 10px; font-weight: normal;">(Based from IPCRF - Performance Feedback)</span></th>
                    <th class="performance-header">Development Activities<br><span style="font-size: 10px; font-weight: normal;">(What actions can you take to address the gaps or improve your knowledge, skills, and attitude? You may refer to development activity table below)</span></th>
                    <th class="performance-header">Support/Resources Needed<br><span style="font-size: 10px; font-weight: normal;">(What assistance do you need to complete the development activities? e.g. resources, tools, permissions)</span></th>
                    <th class="performance-header">Metrics of Success of Development Activities<br><span style="font-size: 10px; font-weight: normal;">(How will you measure the progress of the development activities or any proof that will indicate success?)</span></th>
                    <th class="performance-header">Target Start Date<br><span style="font-size: 10px; font-weight: normal;">(When should the development activities be started?)</span></th>
                    <th class="performance-header">Completion Date<br><span style="font-size: 10px; font-weight: normal;">(When are the development activities completed?)</span></th>
                </tr>
            </thead>
            <tbody>
                @forelse($idp->performanceBase ?? [] as $item)
                <tr>
                    <td>{{ $item['area_improvement'] }}</td>
                    <td style="font-size: 11px;">
                        @if(isset($item['activities']) && is_array($item['activities']))
                            <ol style="margin: 0; padding-left: 20px;">
                                @foreach($item['activities'] as $activity)
                                    <li>{{ $activity }}</li>
                                @endforeach
                            </ol>
                        @else
                            {{ $item['activities'] }}
                        @endif
                    </td>
                    <td style="font-size: 11px;">
                        @if(isset($item['support']) && is_array($item['support']))
                            <ol style="margin: 0; padding-left: 20px;">
                                @foreach($item['support'] as $support)
                                    <li>{{ $support }}</li>
                                @endforeach
                            </ol>
                        @else
                            {{ $item['support'] }}
                        @endif
                    </td>
                    <td style="font-size: 11px;">
                        @if(isset($item['metrics']) && is_array($item['metrics']))
                            <ol style="margin: 0; padding-left: 20px;">
                                @foreach($item['metrics'] as $metric)
                                    <li>{{ $metric }}</li>
                                @endforeach
                            </ol>
                        @else
                            {{ $item['metrics'] }}
                        @endif
                    </td>
                    <td style="text-align: center;">{{ $item['target_date'] ?? '' }}</td>
                    <td style="text-align: center;">{{ $item['completion_date'] ?? '' }}</td>
                </tr>
                @empty
                <tr>
                    <td>Need to improve technical writing skills</td>
                    <td style="font-size: 11px;">
                        1. Attend technical writing workshops<br>
                        2. Coaching and mentoring
                    </td>
                    <td style="font-size: 11px;">
                        1. Fund for training/ workshops<br>
                        2. Superior's time and time-off to undergo coaching or mentoring
                    </td>
                    <td style="font-size: 11px;">
                        1. Certificate of Participation for attended training<br>
                        2. Coaching Journal
                    </td>
                    <td style="text-align: center;">20 June 2025</td>
                    <td></td>
                </tr>
                <tr>
                    <td>Need to improve knowledge on other policies of HR systems</td>
                    <td style="font-size: 11px;">
                        1. Study other HR system policies related to RSP, LDD and R&R<br>
                        2. Attend knowledge sharing & learning sessions of other HR divisions
                    </td>
                    <td style="font-size: 11px;">
                        1. Policies and other related references from different HR divisions<br>
                        2. Time-off to attend knowledge sharing sessions
                    </td>
                    <td style="font-size: 11px;">
                        1. Improved inputs on the draft HR policies/memorandum, with a wider scope of understanding and knowledge that is not only limited to the HR-PMS system.
                    </td>
                    <td style="text-align: center;">31 May 2025</td>
                    <td></td>
                </tr>
                @endforelse
            </tbody>
        </table>

        <!-- Commitment and Certification Section -->
        <div class="commitment-header">COMMITMENT AND CERTIFICATION</div>
        <table class="commitment-table">
            <tr>
                <td class="commitment-text">
                    <p>This is to certify that the development plan has been agreed upon between me and my immediate superior. I further commit to dedicate my time and effort to ensure that my Individual Development Plan (IDP) is achieved within the timelines.</p>
                    <br><br><br>
                    <p>I undertake to support and ensure that this agreed IDP is achieved within the timelines.</p>
                </td>
                <td class="signature-section">
                    <div class="signature-block">
                        <div class="signature-name">{{ $idp->employee_name ?? 'LEAH SALONGA' }}</div>
                        <div class="signature-title">Employee Name</div>
                    </div>
                    
                    <div class="signature-block">
                        <div class="signature-name">{{ $idp->division_chief ?? 'RYAN CAYABAB' }}</div>
                        <div class="signature-title">Division Chief, HRMDS-HRPPMD</div>
                    </div>
                    
                    <div class="signature-block">
                        <div class="signature-name">{{ $idp->director ?? 'KENNY ROGERS' }}</div>
                        <div class="signature-title">Director IV, HRMDS</div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
{{-- </x-layouts.app> --}}