@extends('layouts.app')

@section('title', 'Element 7: Management of Change')

@section('content')
    <div class="mb-8">
        <h2 class="text-2xl font-semibold text-black mb-2">Element 7: Management of Change</h2>
        <p class="text-gray-600">Implement MOC process, assess risks before approval, document approvals and reviews with full traceability</p>
    </div>

    <!-- Management of Change 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">Management of Change Dashboard</h3>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mb-6">
            <!-- Total Change Requests (E7-FR-01) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <p class="text-3xl font-bold text-blue-600">{{ $changeRequests->count() }}</p>
                <p class="text-xs text-gray-500 mt-1">Total change requests</p>
            </div>

            <!-- Pending Review (E7-FR-01) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <p class="text-3xl font-bold text-yellow-600">{{ $changeRequests->whereIn('status', ['draft', 'submitted', 'under_review'])->count() }}</p>
                <p class="text-xs text-gray-500 mt-1">Pending review</p>
            </div>

            <!-- Risk Assessed (E7-FR-02) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                @php
                    $riskAssessed = $changeRequests->filter(fn($c) => $c->riskAssessment !== null)->count();
                    $riskAssessmentRate = $changeRequests->count() > 0 ? round(($riskAssessed / $changeRequests->count()) * 100) : 0;
                @endphp
                <p class="text-3xl font-bold text-purple-600">{{ $riskAssessmentRate }}%</p>
                <p class="text-xs text-gray-500 mt-1">Risk assessed before approval</p>
            </div>

            <!-- Documented Approvals (E7-FR-03) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                @php
                    $totalApprovals = $changeRequests->flatMap(fn($c) => $c->approvals)->count();
                    $approvedCount = $changeRequests->flatMap(fn($c) => $c->approvals)->where('approval_status', 'approved')->count();
                @endphp
                <p class="text-3xl font-bold text-green-600">{{ $totalApprovals }}</p>
                <p class="text-xs text-gray-500 mt-1">Documented approvals</p>
            </div>

            <!-- Implemented (E7-FR-01) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <p class="text-3xl font-bold text-indigo-600">{{ $changeRequests->whereIn('status', ['implemented', 'closed'])->count() }}</p>
                <p class="text-xs text-gray-500 mt-1">Successfully implemented</p>
            </div>
        </div>

        <!-- MOC Process Workflow Visualization (E7-FR-01) -->
        <div class="bg-gray-50 border border-gray-200 rounded-lg p-6">
            <h4 class="text-sm font-semibold text-gray-900 mb-4">Management of Change Process Workflow</h4>
            <div class="flex items-center justify-between mb-6">
                <div class="flex-1 text-center">
                    <div class="w-14 h-14 mx-auto bg-blue-500 text-white rounded-full flex items-center justify-center mb-2">
                        <span class="text-xl font-bold">1</span>
                    </div>
                    <h3 class="text-xs font-semibold text-gray-900 mb-1">Initiate</h3>
                    <p class="text-xs text-gray-600">Submit CR</p>
                </div>
                <svg class="w-6 h-6 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>

                <div class="flex-1 text-center">
                    <div class="w-14 h-14 mx-auto bg-purple-500 text-white rounded-full flex items-center justify-center mb-2">
                        <span class="text-xl font-bold">2</span>
                    </div>
                    <h3 class="text-xs font-semibold text-gray-900 mb-1">Risk Assess</h3>
                    <p class="text-xs text-gray-600">Evaluate impact</p>
                </div>
                <svg class="w-6 h-6 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>

                <div class="flex-1 text-center">
                    <div class="w-14 h-14 mx-auto bg-yellow-500 text-white rounded-full flex items-center justify-center mb-2">
                        <span class="text-xl font-bold">3</span>
                    </div>
                    <h3 class="text-xs font-semibold text-gray-900 mb-1">Review</h3>
                    <p class="text-xs text-gray-600">Stakeholders</p>
                </div>
                <svg class="w-6 h-6 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>

                <div class="flex-1 text-center">
                    <div class="w-14 h-14 mx-auto bg-green-500 text-white rounded-full flex items-center justify-center mb-2">
                        <span class="text-xl font-bold">4</span>
                    </div>
                    <h3 class="text-xs font-semibold text-gray-900 mb-1">Approve</h3>
                    <p class="text-xs text-gray-600">Management</p>
                </div>
                <svg class="w-6 h-6 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>

                <div class="flex-1 text-center">
                    <div class="w-14 h-14 mx-auto bg-indigo-500 text-white rounded-full flex items-center justify-center mb-2">
                        <span class="text-xl font-bold">5</span>
                    </div>
                    <h3 class="text-xs font-semibold text-gray-900 mb-1">Implement</h3>
                    <p class="text-xs text-gray-600">Execute</p>
                </div>
                <svg class="w-6 h-6 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>

                <div class="flex-1 text-center">
                    <div class="w-14 h-14 mx-auto bg-gray-700 text-white rounded-full flex items-center justify-center mb-2">
                        <span class="text-xl font-bold">6</span>
                    </div>
                    <h3 class="text-xs font-semibold text-gray-900 mb-1">Close</h3>
                    <p class="text-xs text-gray-600">Verify & Close</p>
                </div>
            </div>

            <!-- Process Stage Distribution -->
            <div class="border-t border-gray-300 pt-4 mt-4">
                <h4 class="text-xs font-semibold text-gray-700 mb-3">Changes by Stage</h4>
                <div class="grid grid-cols-2 md:grid-cols-6 gap-3">
                    @php
                        $stageMapping = [
                            'draft' => 'Initiate',
                            'submitted' => 'Initiate',
                            'under_review' => 'Review',
                            'risk_assessed' => 'Risk Assess',
                            'approved' => 'Approve',
                            'rejected' => 'Review',
                            'implemented' => 'Implement',
                            'closed' => 'Close'
                        ];

                        $stageCounts = [
                            'Initiate' => $changeRequests->whereIn('status', ['draft', 'submitted'])->count(),
                            'Risk Assess' => $changeRequests->where('status', 'risk_assessed')->count(),
                            'Review' => $changeRequests->whereIn('status', ['under_review', 'rejected'])->count(),
                            'Approve' => $changeRequests->where('status', 'approved')->count(),
                            'Implement' => $changeRequests->where('status', 'implemented')->count(),
                            'Close' => $changeRequests->where('status', 'closed')->count(),
                        ];
                    @endphp

                    <div class="bg-blue-50 border border-blue-200 rounded p-2 text-center">
                        <p class="text-lg font-bold text-blue-600">{{ $stageCounts['Initiate'] }}</p>
                        <p class="text-xs text-blue-700">Initiate</p>
                    </div>
                    <div class="bg-purple-50 border border-purple-200 rounded p-2 text-center">
                        <p class="text-lg font-bold text-purple-600">{{ $stageCounts['Risk Assess'] }}</p>
                        <p class="text-xs text-purple-700">Risk Assess</p>
                    </div>
                    <div class="bg-yellow-50 border border-yellow-200 rounded p-2 text-center">
                        <p class="text-lg font-bold text-yellow-600">{{ $stageCounts['Review'] }}</p>
                        <p class="text-xs text-yellow-700">Review</p>
                    </div>
                    <div class="bg-green-50 border border-green-200 rounded p-2 text-center">
                        <p class="text-lg font-bold text-green-600">{{ $stageCounts['Approve'] }}</p>
                        <p class="text-xs text-green-700">Approve</p>
                    </div>
                    <div class="bg-indigo-50 border border-indigo-200 rounded p-2 text-center">
                        <p class="text-lg font-bold text-indigo-600">{{ $stageCounts['Implement'] }}</p>
                        <p class="text-xs text-indigo-700">Implement</p>
                    </div>
                    <div class="bg-gray-50 border border-gray-300 rounded p-2 text-center">
                        <p class="text-lg font-bold text-gray-700">{{ $stageCounts['Close'] }}</p>
                        <p class="text-xs text-gray-600">Close</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Change Traceability Tracker (E7-NFR-01: Changes shall be traceable) -->
    <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">Change Traceability Tracker</h3>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <h4 class="text-sm font-semibold text-gray-900 mb-3">Traceability Metrics</h4>
                <div class="space-y-3">
                    <div class="flex items-center justify-between text-xs">
                        <span class="text-gray-700">Changes with unique IDs</span>
                        <span class="font-medium text-gray-900">{{ $changeRequests->count() }}/{{ $changeRequests->count() }}</span>
                    </div>
                    <div class="flex items-center justify-between text-xs">
                        <span class="text-gray-700">Changes with audit trail</span>
                        <span class="font-medium text-gray-900">{{ $changeRequests->count() }}</span>
                    </div>
                    <div class="flex items-center justify-between text-xs">
                        <span class="text-gray-700">Changes with approvals</span>
                        <span class="font-medium text-gray-900">{{ $changeRequests->filter(fn($c) => $c->approvals->count() > 0)->count() }}</span>
                    </div>
                </div>
            </div>

            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <h4 class="text-sm font-semibold text-gray-900 mb-3">Recent Activity Trail</h4>
                @php
                    $recentChanges = $changeRequests->sortByDesc('updated_at')->take(3);
                @endphp
                <div class="space-y-2">
                    @forelse($recentChanges as $change)
                        <div class="text-xs">
                            <p class="font-medium text-gray-900">{{ $change->change_number }}</p>
                            <p class="text-gray-600">Updated {{ $change->updated_at->diffForHumans() }}</p>
                        </div>
                    @empty
                        <p class="text-xs text-gray-500">No recent activity</p>
                    @endforelse
                </div>
            </div>

            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <h4 class="text-sm font-semibold text-gray-900 mb-3">Traceability Status</h4>
                <div class="flex items-center gap-3 mb-3">
                    <svg class="w-8 h-8 text-green-500" 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>
                    <div>
                        <p class="text-xs font-semibold text-green-900">Full Traceability</p>
                        <p class="text-xs text-green-700">All changes tracked with unique CR numbers</p>
                    </div>
                </div>
                <p class="text-xs text-gray-600">
                    Every change request is assigned a unique identifier and maintains a complete audit trail from initiation to closure.
                </p>
            </div>
        </div>
    </div>

    <!-- Change Requests (E7-FR-01: Implement Management of Change process) -->
    <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">Change Requests (CR) - MOC Process</h3>
            <button onclick="openModal('addChangeRequestModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + New Change Request
            </button>
        </div>
        <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">CR Number</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Title</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Type/Category</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Priority</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Status</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Risk Assessed</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Approvals</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Target Date</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($changeRequests as $change)
                        <tr class="hover:bg-blue-50 transition-colors">
                            <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $change->change_number }}</td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ Str::limit($change->title, 40) }}</td>
                            <td class="py-4 px-6 text-sm">
                                <div class="flex flex-col gap-1">
                                    <span class="px-2 py-1 rounded text-xs font-medium w-fit
                                        {{ $change->change_type === 'emergency' ? 'bg-red-100 text-red-800' : '' }}
                                        {{ $change->change_type === 'temporary' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                        {{ $change->change_type === 'permanent' ? 'bg-blue-100 text-blue-800' : '' }}">
                                        {{ ucfirst($change->change_type) }}
                                    </span>
                                    <span class="text-xs text-gray-500">{{ ucfirst($change->change_category) }}</span>
                                </div>
                            </td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium
                                    {{ $change->priority === 'critical' ? 'bg-red-100 text-red-800' : '' }}
                                    {{ $change->priority === 'high' ? 'bg-orange-100 text-orange-800' : '' }}
                                    {{ $change->priority === 'medium' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                    {{ $change->priority === 'low' ? 'bg-green-100 text-green-800' : '' }}">
                                    {{ ucfirst($change->priority) }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium
                                    {{ in_array($change->status, ['approved', 'implemented', 'closed']) ? 'bg-green-100 text-green-800' : '' }}
                                    {{ $change->status === 'under_review' ? 'bg-blue-100 text-blue-800' : '' }}
                                    {{ $change->status === 'risk_assessed' ? 'bg-purple-100 text-purple-800' : '' }}
                                    {{ $change->status === 'rejected' ? 'bg-red-100 text-red-800' : '' }}
                                    {{ in_array($change->status, ['draft', 'submitted']) ? 'bg-gray-100 text-gray-800' : '' }}">
                                    {{ str_replace('_', ' ', ucwords($change->status, '_')) }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm text-center">
                                @if($change->riskAssessment)
                                    <div class="flex items-center justify-center gap-1">
                                        <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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                        </svg>
                                        <span class="text-xs text-green-700">Yes</span>
                                    </div>
                                @else
                                    <div class="flex items-center justify-center gap-1">
                                        <svg class="w-5 h-5 text-gray-400" 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>
                                        <span class="text-xs text-gray-500">No</span>
                                    </div>
                                @endif
                            </td>
                            <td class="py-4 px-6 text-sm">
                                @if($change->approvals->count() > 0)
                                    <div class="flex flex-col gap-1">
                                        <span class="text-xs text-gray-600">
                                            {{ $change->approvals->where('approval_status', 'approved')->count() }}/{{ $change->approvals->count() }}
                                        </span>
                                        <div class="w-full bg-gray-200 rounded-full h-1.5">
                                            <div class="bg-green-600 h-1.5 rounded-full" style="width: {{ $change->approvals->count() > 0 ? round(($change->approvals->where('approval_status', 'approved')->count() / $change->approvals->count()) * 100) : 0 }}%"></div>
                                        </div>
                                    </div>
                                @else
                                    <span class="text-xs text-gray-400">No approvals</span>
                                @endif
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600">
                                {{ $change->target_implementation_date ? \Carbon\Carbon::parse($change->target_implementation_date)->format('d M Y') : 'N/A' }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="py-8 text-center text-gray-500">No change requests found</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Risk Assessments (E7-FR-02: Assess risks before change approval) -->
    <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">Risk Assessments (Before Approval)</h3>
            <button onclick="openModal('addRiskAssessmentModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + Add Risk Assessment
            </button>
        </div>
        <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">CR Number</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Overall Risk Level</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Impact Areas</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Hazards Identified</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Mitigation Required</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Assessed By</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Assessment Date</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($changeRequests->filter(fn($c) => $c->riskAssessment) as $change)
                        <tr class="hover:bg-blue-50 transition-colors">
                            <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $change->change_number }}</td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium
                                    {{ in_array($change->riskAssessment->overall_risk_level, ['high', 'critical']) ? 'bg-red-100 text-red-800' : '' }}
                                    {{ $change->riskAssessment->overall_risk_level === 'medium' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                    {{ $change->riskAssessment->overall_risk_level === 'low' ? 'bg-green-100 text-green-800' : '' }}">
                                    {{ ucfirst($change->riskAssessment->overall_risk_level) }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ Str::limit($change->riskAssessment->impact_areas ?? 'N/A', 30) }}</td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ Str::limit($change->riskAssessment->hazards_identified ?? 'N/A', 30) }}</td>
                            <td class="py-4 px-6 text-sm">
                                @if($change->riskAssessment->mitigation_measures_required)
                                    <span class="px-2 py-1 rounded text-xs font-medium bg-orange-100 text-orange-800">Yes</span>
                                @else
                                    <span class="px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">No</span>
                                @endif
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $change->riskAssessment->assessed_by }}</td>
                            <td class="py-4 px-6 text-sm text-gray-600">
                                {{ $change->riskAssessment->assessment_date ? $change->riskAssessment->assessment_date->format('d M Y') : 'N/A' }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="py-8 text-center text-gray-500">No risk assessments completed</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Approvals and Reviews Documentation (E7-FR-03: Document approvals and reviews) -->
    <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">Approvals & Reviews Documentation</h3>
            <button onclick="openModal('addApprovalModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + Document Approval
            </button>
        </div>
        <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">CR Number</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Approver Name</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Approver Role</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Approval Status</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Approval Date</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Comments/Review Notes</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($changeRequests->flatMap(fn($c) => $c->approvals->map(fn($a) => ['change' => $c, 'approval' => $a])) as $item)
                        <tr class="hover:bg-blue-50 transition-colors">
                            <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $item['change']->change_number }}</td>
                            <td class="py-4 px-6 text-sm text-gray-900">{{ $item['approval']->approver_name }}</td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $item['approval']->approver_role }}</td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium
                                    {{ $item['approval']->approval_status === 'approved' ? 'bg-green-100 text-green-800' : '' }}
                                    {{ $item['approval']->approval_status === 'rejected' ? 'bg-red-100 text-red-800' : '' }}
                                    {{ $item['approval']->approval_status === 'pending' ? 'bg-yellow-100 text-yellow-800' : '' }}">
                                    {{ ucfirst($item['approval']->approval_status) }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600">
                                {{ $item['approval']->approval_date ? $item['approval']->approval_date->format('d M Y H:i') : 'Pending' }}
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600">
                                {{ Str::limit($item['approval']->comments ?? 'No comments', 50) }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="py-8 text-center text-gray-500">No approvals documented yet</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Add Change Request Modal -->
    <div id="addChangeRequestModal" 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">Create New Change Request</h3>
                <button onclick="closeModal('addChangeRequestModal')" 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('change-requests.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">Change Number (CR) *</label>
                        <input type="text" name="change_number" 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">Change Type *</label>
                        <select name="change_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="permanent">Permanent</option>
                            <option value="temporary">Temporary</option>
                            <option value="emergency">Emergency</option>
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Change Title *</label>
                        <input type="text" name="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 class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Change Description *</label>
                        <textarea name="description" required 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>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Change Category *</label>
                        <select name="change_category" 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 Category</option>
                            <option value="operational">Operational</option>
                            <option value="technical">Technical</option>
                            <option value="organizational">Organizational</option>
                            <option value="procedural">Procedural</option>
                            <option value="equipment">Equipment</option>
                            <option value="safety">Safety</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Priority *</label>
                        <select name="priority" 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 Priority</option>
                            <option value="low">Low</option>
                            <option value="medium">Medium</option>
                            <option value="high">High</option>
                            <option value="critical">Critical</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Requested By *</label>
                        <input type="text" name="requested_by" 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">Target Implementation Date *</label>
                        <input type="date" name="target_implementation_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 class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Justification/Business Case *</label>
                        <textarea name="justification" required 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 class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Expected Benefits</label>
                        <textarea name="expected_benefits" rows="2" 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('addChangeRequestModal')" 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">
                        Create Change Request
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Add Risk Assessment Modal -->
    <div id="addRiskAssessmentModal" 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 Risk Assessment</h3>
                <button onclick="closeModal('addRiskAssessmentModal')" 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('change-risk-assessments.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">Change Request *</label>
                        <select name="change_request_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 Change Request</option>
                            @foreach($changeRequests as $change)
                                <option value="{{ $change->id }}">{{ $change->change_number }} - {{ $change->title }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Overall Risk Level *</label>
                        <select name="overall_risk_level" 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="low">Low</option>
                            <option value="medium">Medium</option>
                            <option value="high">High</option>
                            <option value="critical">Critical</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Assessment Date *</label>
                        <input type="date" name="assessment_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 class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Impact Areas *</label>
                        <textarea name="impact_areas" required rows="2" placeholder="e.g., Safety, Operations, Environment" 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">Hazards Identified *</label>
                        <textarea name="hazards_identified" required 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 class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Mitigation Measures</label>
                        <textarea name="mitigation_measures" 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>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Mitigation Required *</label>
                        <select name="mitigation_measures_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="0">No</option>
                            <option value="1">Yes</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Assessed By *</label>
                        <input type="text" name="assessed_by" 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>
                <div class="flex justify-end gap-3 mt-6">
                    <button type="button" onclick="closeModal('addRiskAssessmentModal')" 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 Risk Assessment
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Add Approval Modal -->
    <div id="addApprovalModal" 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">Document Approval/Review</h3>
                <button onclick="closeModal('addApprovalModal')" 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('change-approvals.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">Change Request *</label>
                        <select name="change_request_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 Change Request</option>
                            @foreach($changeRequests as $change)
                                <option value="{{ $change->id }}">{{ $change->change_number }} - {{ $change->title }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Approver Name *</label>
                        <input type="text" name="approver_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">Approver Role *</label>
                        <select name="approver_role" 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 Role</option>
                            <option value="Safety Manager">Safety Manager</option>
                            <option value="Operations Manager">Operations Manager</option>
                            <option value="Technical Manager">Technical Manager</option>
                            <option value="Master">Master</option>
                            <option value="Chief Engineer">Chief Engineer</option>
                            <option value="DPA">DPA</option>
                            <option value="Management">Management</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Approval Status *</label>
                        <select name="approval_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="">Select Status</option>
                            <option value="pending">Pending</option>
                            <option value="approved">Approved</option>
                            <option value="rejected">Rejected</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Approval Date</label>
                        <input type="datetime-local" name="approval_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">Comments/Review Notes</label>
                        <textarea name="comments" 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 class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Conditions/Recommendations</label>
                        <textarea name="conditions" rows="2" 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('addApprovalModal')" 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">
                        Document Approval
                    </button>
                </div>
            </form>
        </div>
    </div>

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

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

        // 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-content: 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