@extends('layouts.app')

@section('title', 'Element 2: Recruitment and Management of Shore-Based Personnel')

@section('content')
    <div class="mb-8">
        <h2 class="text-2xl font-semibold text-black mb-2">Element 2: Recruitment and Management of Shore-Based Personnel</h2>
        <p class="text-gray-600">Competency requirements, recruitment, training records, performance monitoring, and secure personnel management</p>
    </div>

    <!-- Personnel Management Dashboard -->
    <div class="bg-white border border-gray-300 rounded-lg p-6 mb-8">
        <div class="bg-gradient-to-r from-blue-600 to-blue-500 text-white px-6 py-3 -mx-6 -mt-6 mb-6 rounded-t-lg">
            <h3 class="text-lg font-semibold">Personnel Management Dashboard</h3>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
            <!-- Total Personnel (E2-FR-02) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <p class="text-3xl font-bold text-blue-600">{{ $personnel->count() }}</p>
                <p class="text-xs text-gray-500 mt-1">Total shore personnel</p>
            </div>

            <!-- Active Personnel (E2-FR-02) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                @php
                    $activePersonnel = $personnel->where('status', 'active')->count();
                @endphp
                <p class="text-3xl font-bold text-green-600">{{ $activePersonnel }}</p>
                <p class="text-xs text-gray-500 mt-1">Active personnel</p>
            </div>

            <!-- Competency Requirements Defined (E2-FR-01) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <p class="text-3xl font-bold text-indigo-600">{{ $competencyRequirements->count() }}</p>
                <p class="text-xs text-gray-500 mt-1">Competency requirements</p>
            </div>

            <!-- Open Positions (E2-FR-02) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <p class="text-3xl font-bold text-orange-600">{{ $recruitmentPipeline->where('status', 'open')->count() }}</p>
                <p class="text-xs text-gray-500 mt-1">Open positions</p>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <!-- Training Records (E2-FR-03) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                @php
                    $totalTraining = $personnel->flatMap(fn($p) => $p->trainingRecords)->count();
                @endphp
                <p class="text-3xl font-bold text-cyan-600">{{ $totalTraining }}</p>
                <p class="text-xs text-gray-500 mt-1">Training records</p>
            </div>

            <!-- Performance Reviews Due (E2-FR-04) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <p class="text-3xl font-bold text-purple-600">{{ $performanceReviews->where('status', 'pending')->count() }}</p>
                <p class="text-xs text-gray-500 mt-1">Reviews pending</p>
            </div>

            <!-- Competency Reviews Due (E2-NFR-02) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                @php
                    $reviewsDue = $competencyReviews->where('next_review_date', '<=', now()->addDays(30))->count();
                @endphp
                <p class="text-3xl font-bold {{ $reviewsDue > 0 ? 'text-red-600' : 'text-green-600' }}">{{ $reviewsDue }}</p>
                <p class="text-xs text-gray-500 mt-1">Reviews due (30 days)</p>
            </div>

            <!-- Secure Records (E2-NFR-01) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <p class="text-3xl font-bold text-green-600">{{ $personnel->count() }}</p>
                <p class="text-xs text-gray-500 mt-1">Securely stored records</p>
            </div>
        </div>
    </div>

    <!-- Secure Personnel Records (E2-NFR-01: Personnel records shall be securely stored) -->
    <div class="bg-white border border-gray-300 rounded-lg p-6 mb-8">
        <div class="bg-gradient-to-r from-purple-600 to-purple-500 text-white px-6 py-3 -mx-6 -mt-6 mb-6 rounded-t-lg">
            <h3 class="text-lg font-semibold">Secure Personnel Records</h3>
        </div>

        <div class="bg-purple-50 border border-purple-200 rounded-lg p-4">
            <div class="flex items-start gap-3 mb-3">
                <svg class="w-6 h-6 text-purple-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                </svg>
                <div>
                    <h4 class="text-sm font-semibold text-purple-900 mb-2">Personnel Data Security Protocols</h4>
                    <ul class="text-xs text-purple-800 space-y-1">
                        <li class="flex items-center gap-2">
                            <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            All personnel records encrypted at rest and in transit
                        </li>
                        <li class="flex items-center gap-2">
                            <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            Role-based access control for sensitive information
                        </li>
                        <li class="flex items-center gap-2">
                            <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            Complete audit trail of all record access and modifications
                        </li>
                        <li class="flex items-center gap-2">
                            <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            Secure backup and disaster recovery procedures in place
                        </li>
                    </ul>
                </div>
            </div>
            <div class="mt-4 pt-3 border-t border-purple-200">
                <p class="text-xs text-purple-700">
                    <span class="font-semibold">Compliance:</span> All personnel data handling complies with data protection regulations and maritime HR standards
                </p>
            </div>
        </div>
    </div>

    <!-- Periodic Competency Reviews (E2-NFR-02: Competency reviews shall be periodic) -->
    <div class="bg-white border border-gray-300 rounded-lg p-6 mb-8">
        <div class="bg-gradient-to-r from-green-600 to-green-500 text-white px-6 py-3 -mx-6 -mt-6 mb-6 rounded-t-lg">
            <h3 class="text-lg font-semibold">Periodic Competency Reviews</h3>
        </div>

        <div class="mb-4 bg-green-50 border border-green-200 rounded-lg p-3">
            <div class="flex items-center gap-2 text-sm text-green-800">
                <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
                </svg>
                <span class="font-medium">Competency reviews are scheduled periodically (annually or bi-annually) for all shore personnel</span>
            </div>
        </div>

        @php
            $upcomingReviews = $competencyReviews->filter(function($r) {
                return $r->next_review_date && $r->next_review_date->lte(now()->addDays(60)) && $r->next_review_date->gte(now());
            })->sortBy('next_review_date');
        @endphp

        @if($upcomingReviews->count() > 0)
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b border-gray-300">
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Personnel</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Position</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Last Review</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Next Review</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @foreach($upcomingReviews as $review)
                            <tr class="hover:bg-blue-50 transition-colors">
                                <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $review->personnel->name }}</td>
                                <td class="py-4 px-6 text-sm text-gray-600">{{ $review->personnel->position }}</td>
                                <td class="py-4 px-6 text-sm text-gray-600">{{ $review->last_review_date ? $review->last_review_date->format('M d, Y') : 'N/A' }}</td>
                                <td class="py-4 px-6 text-sm text-gray-900">{{ $review->next_review_date->format('M d, Y') }}</td>
                                <td class="py-4 px-6 text-sm">
                                    @if($review->next_review_date->lte(now()->addDays(7)))
                                        <span class="px-2 py-1 rounded text-xs font-medium bg-red-100 text-red-800">Urgent</span>
                                    @elseif($review->next_review_date->lte(now()->addDays(30)))
                                        <span class="px-2 py-1 rounded text-xs font-medium bg-orange-100 text-orange-800">Due Soon</span>
                                    @else
                                        <span class="px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">Scheduled</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <p class="text-center text-gray-500 py-4">No competency reviews due in the next 60 days</p>
        @endif
    </div>

    <!-- Competency Requirements (E2-FR-01: Define competency requirements for shore staff) -->
    <div class="bg-white border border-gray-300 rounded-lg p-6 mb-8">
        <div class="bg-gradient-to-r from-blue-600 to-blue-500 text-white px-6 py-3 -mx-6 -mt-6 mb-6 rounded-t-lg flex items-center justify-between">
            <h3 class="text-lg font-semibold">Competency Requirements</h3>
            <button onclick="openModal('addCompetencyRequirementModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + Define Requirement
            </button>
        </div>

        @if($competencyRequirements->count() > 0)
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b border-gray-300">
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Position</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Competency</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Level Required</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Mandatory</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @foreach($competencyRequirements as $requirement)
                            <tr class="hover:bg-blue-50 transition-colors">
                                <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $requirement->position }}</td>
                                <td class="py-4 px-6 text-sm text-gray-900">{{ $requirement->competency_name }}</td>
                                <td class="py-4 px-6 text-sm text-gray-600">{{ ucfirst($requirement->level_required) }}</td>
                                <td class="py-4 px-6 text-sm">
                                    @if($requirement->is_mandatory)
                                        <span class="px-2 py-1 rounded text-xs font-medium bg-red-100 text-red-800">Required</span>
                                    @else
                                        <span class="px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">Optional</span>
                                    @endif
                                </td>
                                <td class="py-4 px-6 text-sm text-gray-600">{{ $requirement->description ?? 'N/A' }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <p class="text-center text-gray-500 py-8">No competency requirements defined yet</p>
        @endif
    </div>

    <!-- Recruitment Pipeline (E2-FR-02: Support recruitment aligned with competencies) -->
    <div class="bg-white border border-gray-300 rounded-lg p-6 mb-8">
        <div class="bg-gradient-to-r from-blue-600 to-blue-500 text-white px-6 py-3 -mx-6 -mt-6 mb-6 rounded-t-lg flex items-center justify-between">
            <h3 class="text-lg font-semibold">Recruitment Pipeline</h3>
            <button onclick="openModal('addRecruitmentModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + Add Position
            </button>
        </div>

        <!-- Recruitment Status Summary -->
        <div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-6">
            @php
                $open = $recruitmentPipeline->where('status', 'open')->count();
                $screening = $recruitmentPipeline->where('status', 'screening')->count();
                $interviewing = $recruitmentPipeline->where('status', 'interviewing')->count();
                $offered = $recruitmentPipeline->where('status', 'offered')->count();
                $closed = $recruitmentPipeline->where('status', 'closed')->count();
            @endphp
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-blue-600">{{ $open }}</p>
                <p class="text-xs text-blue-700 mt-1">Open</p>
            </div>
            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-yellow-600">{{ $screening }}</p>
                <p class="text-xs text-yellow-700 mt-1">Screening</p>
            </div>
            <div class="bg-purple-50 border border-purple-200 rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-purple-600">{{ $interviewing }}</p>
                <p class="text-xs text-purple-700 mt-1">Interviewing</p>
            </div>
            <div class="bg-orange-50 border border-orange-200 rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-orange-600">{{ $offered }}</p>
                <p class="text-xs text-orange-700 mt-1">Offered</p>
            </div>
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-gray-600">{{ $closed }}</p>
                <p class="text-xs text-gray-700 mt-1">Closed</p>
            </div>
        </div>

        @if($recruitmentPipeline->count() > 0)
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b border-gray-300">
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Position</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Department</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Required Competencies</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Posted Date</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Candidates</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @foreach($recruitmentPipeline->where('status', '!=', 'closed') as $position)
                            <tr class="hover:bg-blue-50 transition-colors">
                                <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $position->position_title }}</td>
                                <td class="py-4 px-6 text-sm text-gray-600">{{ $position->department }}</td>
                                <td class="py-4 px-6 text-sm text-gray-600">{{ $position->required_competencies }}</td>
                                <td class="py-4 px-6 text-sm text-gray-600">{{ $position->posted_date->format('M d, Y') }}</td>
                                <td class="py-4 px-6 text-sm text-gray-600">{{ $position->candidates_count ?? 0 }}</td>
                                <td class="py-4 px-6 text-sm">
                                    <span class="px-2 py-1 rounded text-xs font-medium
                                        {{ $position->status === 'open' ? 'bg-blue-100 text-blue-800' : '' }}
                                        {{ $position->status === 'screening' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                        {{ $position->status === 'interviewing' ? 'bg-purple-100 text-purple-800' : '' }}
                                        {{ $position->status === 'offered' ? 'bg-orange-100 text-orange-800' : '' }}">
                                        {{ ucfirst($position->status) }}
                                    </span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <p class="text-center text-gray-500 py-8">No active recruitment positions</p>
        @endif
    </div>

    <!-- Training and Competency Records (E2-FR-03: Maintain training and competency records) -->
    <div class="bg-white border border-gray-300 rounded-lg p-6 mb-8">
        <div class="bg-gradient-to-r from-blue-600 to-blue-500 text-white px-6 py-3 -mx-6 -mt-6 mb-6 rounded-t-lg flex items-center justify-between">
            <h3 class="text-lg font-semibold">Training & Competency Records</h3>
            <button onclick="openModal('addTrainingRecordModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + Add Training Record
            </button>
        </div>

        <!-- Training Statistics -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
            @php
                $allTraining = $personnel->flatMap(fn($p) => $p->trainingRecords);
                $certifications = $allTraining->where('training_type', 'Certification')->count();
                $courses = $allTraining->where('training_type', 'Course')->count();
                $workshops = $allTraining->where('training_type', 'Workshop')->count();
                $avgTrainingPerPerson = $personnel->count() > 0 ? round($allTraining->count() / $personnel->count(), 1) : 0;
            @endphp
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-blue-600">{{ $certifications }}</p>
                <p class="text-xs text-gray-500 mt-1">Certifications</p>
            </div>
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-green-600">{{ $courses }}</p>
                <p class="text-xs text-gray-500 mt-1">Courses</p>
            </div>
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-purple-600">{{ $workshops }}</p>
                <p class="text-xs text-gray-500 mt-1">Workshops</p>
            </div>
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-orange-600">{{ $avgTrainingPerPerson }}</p>
                <p class="text-xs text-gray-500 mt-1">Avg. per Person</p>
            </div>
        </div>

        @if($allTraining->count() > 0)
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b border-gray-300">
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Personnel</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Training Name</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Type</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Completion Date</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Expiry</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @foreach($allTraining->sortByDesc('completion_date')->take(10) as $training)
                            <tr class="hover:bg-blue-50 transition-colors">
                                <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $training->personnel->name }}</td>
                                <td class="py-4 px-6 text-sm text-gray-900">{{ $training->training_name }}</td>
                                <td class="py-4 px-6 text-sm text-gray-600">{{ $training->training_type }}</td>
                                <td class="py-4 px-6 text-sm text-gray-600">{{ $training->completion_date->format('M d, Y') }}</td>
                                <td class="py-4 px-6 text-sm text-gray-600">{{ $training->expiry_date ? $training->expiry_date->format('M d, Y') : 'N/A' }}</td>
                                <td class="py-4 px-6 text-sm">
                                    @if($training->expiry_date && $training->expiry_date->lt(now()))
                                        <span class="px-2 py-1 rounded text-xs font-medium bg-red-100 text-red-800">Expired</span>
                                    @elseif($training->expiry_date && $training->expiry_date->lte(now()->addDays(30)))
                                        <span class="px-2 py-1 rounded text-xs font-medium bg-orange-100 text-orange-800">Expiring Soon</span>
                                    @else
                                        <span class="px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">Valid</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <p class="text-center text-gray-500 py-8">No training records yet</p>
        @endif
    </div>

    <!-- Performance and Development Monitoring (E2-FR-04: Monitor performance and development) -->
    <div class="bg-white border border-gray-300 rounded-lg p-6 mb-8">
        <div class="bg-gradient-to-r from-blue-600 to-blue-500 text-white px-6 py-3 -mx-6 -mt-6 mb-6 rounded-t-lg flex items-center justify-between">
            <h3 class="text-lg font-semibold">Performance & Development Monitoring</h3>
            <button onclick="openModal('addPerformanceReviewModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + Add Review
            </button>
        </div>

        <!-- Performance Metrics -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
            @php
                $excellent = $performanceReviews->where('rating', 'excellent')->count();
                $good = $performanceReviews->where('rating', 'good')->count();
                $satisfactory = $performanceReviews->where('rating', 'satisfactory')->count();
                $needsImprovement = $performanceReviews->where('rating', 'needs_improvement')->count();
            @endphp
            <div class="bg-green-50 border border-green-200 rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-green-600">{{ $excellent }}</p>
                <p class="text-xs text-green-700 mt-1">Excellent</p>
            </div>
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-blue-600">{{ $good }}</p>
                <p class="text-xs text-blue-700 mt-1">Good</p>
            </div>
            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-yellow-600">{{ $satisfactory }}</p>
                <p class="text-xs text-yellow-700 mt-1">Satisfactory</p>
            </div>
            <div class="bg-red-50 border border-red-200 rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-red-600">{{ $needsImprovement }}</p>
                <p class="text-xs text-red-700 mt-1">Needs Improvement</p>
            </div>
        </div>

        @if($performanceReviews->count() > 0)
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b border-gray-300">
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Personnel</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Review Period</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Rating</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Reviewer</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Development Plan</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @foreach($performanceReviews->sortByDesc('review_date') as $review)
                            <tr class="hover:bg-blue-50 transition-colors">
                                <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $review->personnel->name }}</td>
                                <td class="py-4 px-6 text-sm text-gray-600">{{ $review->review_period }}</td>
                                <td class="py-4 px-6 text-sm">
                                    <span class="px-2 py-1 rounded text-xs font-medium
                                        {{ $review->rating === 'excellent' ? 'bg-green-100 text-green-800' : '' }}
                                        {{ $review->rating === 'good' ? 'bg-blue-100 text-blue-800' : '' }}
                                        {{ $review->rating === 'satisfactory' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                        {{ $review->rating === 'needs_improvement' ? 'bg-red-100 text-red-800' : '' }}">
                                        {{ ucfirst(str_replace('_', ' ', $review->rating)) }}
                                    </span>
                                </td>
                                <td class="py-4 px-6 text-sm text-gray-600">{{ $review->reviewer }}</td>
                                <td class="py-4 px-6 text-sm text-gray-600">{{ $review->has_development_plan ? 'Yes' : 'No' }}</td>
                                <td class="py-4 px-6 text-sm">
                                    <span class="px-2 py-1 rounded text-xs font-medium
                                        {{ $review->status === 'completed' ? 'bg-green-100 text-green-800' : '' }}
                                        {{ $review->status === 'pending' ? 'bg-orange-100 text-orange-800' : '' }}">
                                        {{ ucfirst($review->status) }}
                                    </span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <p class="text-center text-gray-500 py-8">No performance reviews yet</p>
        @endif
    </div>

    <!-- Personnel Profiles -->
    <div class="bg-white border border-gray-300 rounded-lg p-6 mb-8">
        <div class="bg-gradient-to-r from-blue-600 to-blue-500 text-white px-6 py-3 -mx-6 -mt-6 mb-6 rounded-t-lg flex items-center justify-between">
            <h3 class="text-lg font-semibold">Personnel Profiles</h3>
            <button onclick="openModal('addPersonnelModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + Add Personnel
            </button>
        </div>

        @if($personnel->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                @foreach($personnel as $person)
                    <div onclick='openPersonnelProfileModal(@json($person))' class="bg-white border border-gray-300 rounded-lg overflow-hidden hover:shadow-lg transition-shadow cursor-pointer">
                        <div class="h-32 bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center relative">
                            <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center">
                                <svg class="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                </svg>
                            </div>
                            <div class="absolute top-2 right-2">
                                <span class="px-2 py-1 text-xs rounded-md shadow-sm
                                    {{ $person->status === 'active' ? 'bg-green-500 text-white' : '' }}
                                    {{ $person->status === 'on_leave' ? 'bg-orange-500 text-white' : '' }}
                                    {{ $person->status === 'inactive' ? 'bg-gray-500 text-white' : '' }}">
                                    {{ ucfirst(str_replace('_', ' ', $person->status)) }}
                                </span>
                            </div>
                        </div>
                        <div class="p-4">
                            <h4 class="font-semibold text-sm text-gray-900 mb-1 truncate" title="{{ $person->name }}">{{ $person->name }}</h4>
                            <p class="text-xs text-gray-600 mb-3">{{ $person->position }}</p>
                            <div class="text-xs text-gray-600 space-y-1">
                                <div class="flex items-center gap-1">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                                    </svg>
                                    <span>{{ $person->department }}</span>
                                </div>
                                <div class="flex items-center gap-1">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    <span>{{ $person->trainingRecords->count() }} Training Records</span>
                                </div>
                                <div class="flex items-center gap-1">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                    </svg>
                                    <span>Hired: {{ $person->hire_date->format('M Y') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <p class="text-center text-gray-500 py-8">No personnel found</p>
        @endif
    </div>

    <!-- Add Personnel Modal -->
    <div id="addPersonnelModal" class="modal hidden">
        <div class="modal-content bg-white rounded-lg p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-semibold text-gray-900">Add Personnel</h3>
                <button onclick="closeModal('addPersonnelModal')" class="text-gray-500 hover:text-gray-700">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            <form action="{{ route('personnel.store') }}" method="POST">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Full Name *</label>
                        <input type="text" name="name" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Position *</label>
                        <input type="text" name="position" required placeholder="e.g., Safety Manager" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Department *</label>
                        <input type="text" name="department" required placeholder="e.g., Operations" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Email *</label>
                        <input type="email" name="email" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Phone</label>
                        <input type="tel" name="phone" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Hire Date *</label>
                        <input type="date" name="hire_date" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Status *</label>
                        <select name="status" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="active">Active</option>
                            <option value="on_leave">On Leave</option>
                            <option value="inactive">Inactive</option>
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Notes</label>
                        <textarea name="notes" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
                    </div>
                </div>
                <div class="flex justify-end gap-3 mt-6">
                    <button type="button" onclick="closeModal('addPersonnelModal')" class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
                        Cancel
                    </button>
                    <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors">
                        Add Personnel
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Add Competency Requirement Modal -->
    <div id="addCompetencyRequirementModal" class="modal hidden">
        <div class="modal-content bg-white rounded-lg p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-semibold text-gray-900">Define Competency Requirement</h3>
                <button onclick="closeModal('addCompetencyRequirementModal')" class="text-gray-500 hover:text-gray-700">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            <form action="{{ route('competency-requirements.store') }}" method="POST">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Position *</label>
                        <input type="text" name="position" required placeholder="e.g., Safety Manager" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Competency Name *</label>
                        <input type="text" name="competency_name" required placeholder="e.g., Risk Assessment" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Level Required *</label>
                        <select name="level_required" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="">Select Level</option>
                            <option value="basic">Basic</option>
                            <option value="intermediate">Intermediate</option>
                            <option value="advanced">Advanced</option>
                            <option value="expert">Expert</option>
                        </select>
                    </div>
                    <div class="flex items-center pt-6">
                        <label class="flex items-center gap-2">
                            <input type="checkbox" name="is_mandatory" value="1" checked class="rounded">
                            <span class="text-sm font-medium text-gray-700">Mandatory Requirement</span>
                        </label>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                        <textarea name="description" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
                    </div>
                </div>
                <div class="flex justify-end gap-3 mt-6">
                    <button type="button" onclick="closeModal('addCompetencyRequirementModal')" class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
                        Cancel
                    </button>
                    <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors">
                        Define Requirement
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Add Recruitment Position Modal -->
    <div id="addRecruitmentModal" class="modal hidden">
        <div class="modal-content bg-white rounded-lg p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-semibold text-gray-900">Add Recruitment Position</h3>
                <button onclick="closeModal('addRecruitmentModal')" class="text-gray-500 hover:text-gray-700">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            <form action="{{ route('recruitment-pipeline.store') }}" method="POST">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Position Title *</label>
                        <input type="text" name="position_title" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Department *</label>
                        <input type="text" name="department" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Posted Date *</label>
                        <input type="date" name="posted_date" required value="{{ date('Y-m-d') }}" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Required Competencies *</label>
                        <textarea name="required_competencies" rows="2" required placeholder="List required competencies..." class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Job Description</label>
                        <textarea name="job_description" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
                    </div>
                </div>
                <div class="flex justify-end gap-3 mt-6">
                    <button type="button" onclick="closeModal('addRecruitmentModal')" class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
                        Cancel
                    </button>
                    <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors">
                        Add Position
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Add Training Record Modal -->
    <div id="addTrainingRecordModal" class="modal hidden">
        <div class="modal-content bg-white rounded-lg p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-semibold text-gray-900">Add Training Record</h3>
                <button onclick="closeModal('addTrainingRecordModal')" class="text-gray-500 hover:text-gray-700">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            <form action="{{ route('training.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Personnel *</label>
                        <select name="personnel_id" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="">Select Personnel</option>
                            @foreach($personnel as $person)
                                <option value="{{ $person->id }}">{{ $person->name }} - {{ $person->position }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Training Name *</label>
                        <input type="text" name="training_name" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Training Type *</label>
                        <select name="training_type" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="">Select Type</option>
                            <option value="Certification">Certification</option>
                            <option value="Course">Course</option>
                            <option value="Workshop">Workshop</option>
                            <option value="Seminar">Seminar</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Provider</label>
                        <input type="text" name="provider" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Completion Date *</label>
                        <input type="date" name="completion_date" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Expiry Date</label>
                        <input type="date" name="expiry_date" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Certificate</label>
                        <input type="file" name="certificate" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                </div>
                <div class="flex justify-end gap-3 mt-6">
                    <button type="button" onclick="closeModal('addTrainingRecordModal')" class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
                        Cancel
                    </button>
                    <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors">
                        Add Training
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Add Performance Review Modal -->
    <div id="addPerformanceReviewModal" class="modal hidden">
        <div class="modal-content bg-white rounded-lg p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-semibold text-gray-900">Add Performance Review</h3>
                <button onclick="closeModal('addPerformanceReviewModal')" class="text-gray-500 hover:text-gray-700">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            <form action="{{ route('performance-reviews.store') }}" method="POST">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Personnel *</label>
                        <select name="personnel_id" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="">Select Personnel</option>
                            @foreach($personnel as $person)
                                <option value="{{ $person->id }}">{{ $person->name }} - {{ $person->position }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Review Period *</label>
                        <input type="text" name="review_period" required placeholder="e.g., Q1 2026" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Review Date *</label>
                        <input type="date" name="review_date" required value="{{ date('Y-m-d') }}" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Rating *</label>
                        <select name="rating" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="">Select Rating</option>
                            <option value="excellent">Excellent</option>
                            <option value="good">Good</option>
                            <option value="satisfactory">Satisfactory</option>
                            <option value="needs_improvement">Needs Improvement</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Reviewer *</label>
                        <input type="text" name="reviewer" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div class="md:col-span-2">
                        <label class="flex items-center gap-2 mb-2">
                            <input type="checkbox" name="has_development_plan" value="1" class="rounded">
                            <span class="text-sm font-medium text-gray-700">Has Development Plan</span>
                        </label>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Comments</label>
                        <textarea name="comments" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
                    </div>
                </div>
                <div class="flex justify-end gap-3 mt-6">
                    <button type="button" onclick="closeModal('addPerformanceReviewModal')" class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
                        Cancel
                    </button>
                    <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors">
                        Add Review
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Personnel Profile Modal -->
    <div id="personnelProfileModal" class="modal hidden">
        <div class="modal-content bg-white rounded-lg p-0 max-w-3xl w-full max-h-[90vh] overflow-y-auto">
            <div class="bg-gradient-to-br from-blue-900 to-blue-700 px-6 py-6 rounded-t-lg flex items-center justify-between">
                <div class="flex items-center gap-4">
                    <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center">
                        <svg class="w-10 h-10 text-blue-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold text-white" id="profile_personnel_name"></h3>
                        <p class="text-blue-200" id="profile_personnel_position"></p>
                    </div>
                </div>
                <button onclick="closeModal('personnelProfileModal')" class="text-white hover:text-gray-300">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>

            <div class="p-6">
                <!-- Personal Information -->
                <div class="mb-6">
                    <h4 class="text-lg font-semibold mb-4 flex items-center gap-2">
                        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                        Contact Information
                    </h4>
                    <div class="grid grid-cols-2 gap-4 bg-gray-50 border border-gray-200 rounded-lg p-4">
                        <div>
                            <p class="text-xs text-gray-500 mb-1">Department</p>
                            <p class="font-medium" id="profile_department"></p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500 mb-1">Email</p>
                            <p class="font-medium text-sm" id="profile_email"></p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500 mb-1">Phone</p>
                            <p class="font-medium" id="profile_phone"></p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500 mb-1">Hire Date</p>
                            <p class="font-medium" id="profile_hire_date"></p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500 mb-1">Status</p>
                            <p class="font-medium" id="profile_status"></p>
                        </div>
                    </div>
                </div>

                <!-- Training Records -->
                <div class="mb-6">
                    <h4 class="text-lg font-semibold mb-4 flex items-center gap-2">
                        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        Training Records
                        <span class="ml-auto px-2 py-1 text-xs rounded-sm bg-blue-100 text-blue-800" id="profile_training_count"></span>
                    </h4>
                    <div id="profile_training_records" class="space-y-2">
                        <!-- Training records will be populated here -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function openModal(modalId) {
            document.getElementById(modalId).classList.remove('hidden');
        }

        function closeModal(modalId) {
            document.getElementById(modalId).classList.add('hidden');
        }

        function openPersonnelProfileModal(personnel) {
            document.getElementById('profile_personnel_name').textContent = personnel.name;
            document.getElementById('profile_personnel_position').textContent = personnel.position;
            document.getElementById('profile_department').textContent = personnel.department;
            document.getElementById('profile_email').textContent = personnel.email;
            document.getElementById('profile_phone').textContent = personnel.phone || 'N/A';

            const hireDate = new Date(personnel.hire_date);
            document.getElementById('profile_hire_date').textContent = hireDate.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });

            const statusColors = {
                'active': '<span class="px-2 py-1 text-xs rounded-sm bg-green-100 text-green-800">Active</span>',
                'on_leave': '<span class="px-2 py-1 text-xs rounded-sm bg-orange-100 text-orange-800">On Leave</span>',
                'inactive': '<span class="px-2 py-1 text-xs rounded-sm bg-gray-100 text-gray-800">Inactive</span>'
            };
            document.getElementById('profile_status').innerHTML = statusColors[personnel.status] || personnel.status;

            const trainingCount = personnel.training_records ? personnel.training_records.length : 0;
            document.getElementById('profile_training_count').textContent = trainingCount;

            const trainingContainer = document.getElementById('profile_training_records');
            if (trainingCount === 0) {
                trainingContainer.innerHTML = '<p class="text-sm text-gray-500 text-center py-4">No training records yet</p>';
            } else {
                trainingContainer.innerHTML = personnel.training_records.map(training => {
                    const completionDate = new Date(training.completion_date);
                    const expiryDate = training.expiry_date ? new Date(training.expiry_date) : null;

                    return `
                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                            <div class="flex items-start justify-between mb-2">
                                <div>
                                    <h5 class="font-medium">${training.training_name}</h5>
                                    <p class="text-sm text-gray-600">${training.training_type}</p>
                                </div>
                            </div>
                            <div class="text-xs text-gray-600 space-y-1">
                                ${training.provider ? `<p>Provider: ${training.provider}</p>` : ''}
                                <p>Completed: ${completionDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</p>
                                ${expiryDate ? `<p>Expires: ${expiryDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</p>` : ''}
                            </div>
                        </div>
                    `;
                }).join('');
            }

            openModal('personnelProfileModal');
        }

        // Close modal when clicking outside
        window.onclick = function(event) {
            if (event.target.classList.contains('modal')) {
                event.target.classList.add('hidden');
            }
        }
    </script>

    <style>
        .modal {
            position: fixed;
            z-index: 50;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-center;
        }

        .modal.hidden {
            display: none !important;
        }

        .modal-content {
            background-color: white;
            margin: auto;
            border-radius: 0.5rem;
            width: 90%;
            max-width: 600px;
            max-height: 90vh;
            overflow-y: auto;
        }
    </style>
@endsection