@extends('layouts.app')

@section('title', 'Element 8: Incident Reporting & Analysis')

@section('content')
    <div class="mb-8">
        <h2 class="text-2xl font-semibold text-black mb-2">Element 8: Incident Reporting, Investigation and Analysis</h2>
        <p class="text-gray-600">Report incidents and near-misses, conduct root cause analysis, track corrective actions with trend analysis</p>
    </div>

    <!-- Incident Reporting 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">Incident Reporting Dashboard</h3>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
            <!-- Total Incidents (E8-FR-01) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <p class="text-3xl font-bold text-red-600">{{ $incidents->where('incident_type', 'incident')->count() }}</p>
                <p class="text-xs text-gray-500 mt-1">Total incidents reported</p>
            </div>

            <!-- Near-Miss Reports (E8-FR-01) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <p class="text-3xl font-bold text-yellow-600">{{ $incidents->where('incident_type', 'near_miss')->count() }}</p>
                <p class="text-xs text-gray-500 mt-1">Near-miss reports</p>
            </div>

            <!-- Root Cause Completed (E8-FR-02) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                @php
                    $rootCauseCompleted = $incidents->filter(fn($inc) => $inc->investigation && $inc->investigation->root_cause_identified)->count();
                    $investigatedIncidents = $incidents->whereIn('status', ['investigation_complete', 'closed'])->count();
                    $rootCauseRate = $investigatedIncidents > 0 ? round(($rootCauseCompleted / $investigatedIncidents) * 100) : 0;
                @endphp
                <p class="text-3xl font-bold text-purple-600">{{ $rootCauseRate }}%</p>
                <p class="text-xs text-gray-500 mt-1">Root cause identified</p>
            </div>

            <!-- Corrective Actions (E8-FR-03) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                @php
                    $correctiveActionsData = $correctiveActions ?? collect();
                    $totalActions = $correctiveActionsData->count();
                    $completedActions = $correctiveActionsData->where('status', 'completed')->count();
                    $actionCompletionRate = $totalActions > 0 ? round(($completedActions / $totalActions) * 100) : 0;
                @endphp
                <p class="text-3xl font-bold text-green-600">{{ $actionCompletionRate }}%</p>
                <p class="text-xs text-gray-500 mt-1">Actions completed</p>
            </div>
        </div>

        <!-- Trend Analysis Section (E8-NFR-01: Supports trend analysis) -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Incident Frequency Trend (E8-NFR-01) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <h4 class="text-sm font-semibold text-gray-900 mb-3">Incident Frequency Trend (6 Months)</h4>
                @php
                    $monthlyData = [];
                    for ($i = 5; $i >= 0; $i--) {
                        $month = now()->subMonths($i);
                        $count = $incidents->filter(fn($inc) => $inc->incident_datetime && $inc->incident_datetime->isSameMonth($month))->count();
                        $monthlyData[] = ['month' => $month->format('M Y'), 'count' => $count];
                    }
                    $maxCount = max(array_merge(array_column($monthlyData, 'count'), [1]));
                @endphp
                <div class="space-y-2">
                    @foreach($monthlyData as $data)
                        <div>
                            <div class="flex justify-between items-center mb-1">
                                <span class="text-xs text-gray-700">{{ $data['month'] }}</span>
                                <span class="text-xs font-medium text-gray-900">{{ $data['count'] }} incidents</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-red-500 h-2 rounded-full transition-all" style="width: {{ ($data['count'] / $maxCount) * 100 }}%"></div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <!-- Major Problem Detection (E8-NFR-01: AI detect major problems) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <h4 class="text-sm font-semibold text-gray-900 mb-3">Major Problem Detection</h4>
                @php
                    // Detect recurring incident categories (major problems)
                    $categoryFrequency = $incidents->groupBy('incident_category')->map->count()->sortDesc()->take(5);
                    $highSeverityIncidents = $incidents->where('severity', 'critical')->count() + $incidents->where('severity', 'major')->count();
                @endphp
                <div class="space-y-3">
                    <div class="bg-red-50 border border-red-200 rounded p-3">
                        <div class="flex items-start gap-2">
                            <svg class="w-5 h-5 text-red-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 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                            </svg>
                            <div class="flex-1">
                                <p class="text-xs font-semibold text-red-900">High Severity Incidents</p>
                                <p class="text-lg font-bold text-red-600 mt-1">{{ $highSeverityIncidents }}</p>
                            </div>
                        </div>
                    </div>

                    <div class="space-y-2">
                        <p class="text-xs font-medium text-gray-700">Top Recurring Categories:</p>
                        @foreach($categoryFrequency as $category => $count)
                            <div class="flex items-center justify-between text-xs">
                                <span class="text-gray-600">{{ $category }}</span>
                                <span class="px-2 py-1 rounded text-xs font-medium {{ $count >= 3 ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800' }}">
                                    {{ $count }}x
                                </span>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Incidents and Near-Miss Reporting (E8-FR-01: Enable incident and near-miss reporting) -->
    <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">Incident & Near-Miss Reports</h3>
            <button onclick="openModal('addIncidentModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + Report Incident/Near-Miss
            </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">Incident #</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">Category</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Description</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Severity</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Date & Time</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Reported By</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">
                    @forelse($incidents as $incident)
                        <tr class="hover:bg-blue-50 transition-colors">
                            <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $incident->incident_number }}</td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium
                                    {{ $incident->incident_type === 'incident' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800' }}">
                                    {{ $incident->incident_type === 'incident' ? 'Incident' : 'Near Miss' }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800">
                                    {{ $incident->incident_category }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ Str::limit($incident->incident_description, 40) }}</td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium
                                    {{ $incident->severity === 'critical' ? 'bg-red-100 text-red-800' : '' }}
                                    {{ $incident->severity === 'major' ? 'bg-orange-100 text-orange-800' : '' }}
                                    {{ $incident->severity === 'moderate' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                    {{ $incident->severity === 'minor' ? 'bg-blue-100 text-blue-800' : '' }}
                                    {{ $incident->severity === 'negligible' ? 'bg-gray-100 text-gray-800' : '' }}">
                                    {{ ucfirst($incident->severity) }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600">
                                {{ $incident->incident_datetime ? $incident->incident_datetime->format('d M Y H:i') : 'N/A' }}
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $incident->reported_by }}</td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium
                                    {{ $incident->status === 'reported' ? 'bg-blue-100 text-blue-800' : '' }}
                                    {{ $incident->status === 'under_investigation' ? 'bg-purple-100 text-purple-800' : '' }}
                                    {{ $incident->status === 'investigation_complete' ? 'bg-green-100 text-green-800' : '' }}
                                    {{ $incident->status === 'closed' ? 'bg-gray-100 text-gray-800' : '' }}">
                                    {{ str_replace('_', ' ', ucfirst($incident->status)) }}
                                </span>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="py-8 text-center text-gray-500">No incidents or near-misses reported</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Root Cause Analysis (E8-FR-02: Support root cause analysis) -->
    <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">Root Cause Analysis & Investigation</h3>
        </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">Incident #</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Investigation Date</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Investigator</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Root Cause</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Analysis Method</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Contributing Factors</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">
                    @forelse($incidents->whereNotNull('investigation') as $incident)
                        <tr class="hover:bg-blue-50 transition-colors">
                            <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $incident->incident_number }}</td>
                            <td class="py-4 px-6 text-sm text-gray-600">
                                {{ $incident->investigation->investigation_date ? $incident->investigation->investigation_date->format('d M Y') : 'N/A' }}
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $incident->investigation->lead_investigator }}</td>
                            <td class="py-4 px-6 text-sm text-gray-600">
                                {{ Str::limit($incident->investigation->root_cause ?? 'Not identified', 40) }}
                            </td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium bg-purple-100 text-purple-800">
                                    {{ $incident->investigation->analysis_method ?? 'N/A' }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600">
                                {{ Str::limit($incident->investigation->contributing_factors ?? 'None', 30) }}
                            </td>
                            <td class="py-4 px-6 text-sm">
                                <div class="flex items-center gap-2">
                                    @if($incident->investigation->root_cause_identified)
                                        <svg class="w-4 h-4 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>
                                    @endif
                                    <span class="px-2 py-1 rounded text-xs font-medium {{ $incident->investigation->root_cause_identified ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                                        {{ $incident->investigation->root_cause_identified ? 'Identified' : 'In Progress' }}
                                    </span>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="py-8 text-center text-gray-500">No investigations found</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Corrective Actions Tracking (E8-FR-03: Track corrective actions) -->
    <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">Corrective Actions (Track & Monitor)</h3>
            <button onclick="openModal('addCorrectiveActionModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + Add Corrective Action
            </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">Action #</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Incident #</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Action Description</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Action Type</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Responsible Person</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Target Date</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">Effectiveness</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($correctiveActions ?? [] as $action)
                        <tr class="hover:bg-blue-50 transition-colors">
                            <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $action->action_number }}</td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $action->incident->incident_number }}</td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ Str::limit($action->action_description, 40) }}</td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800">
                                    {{ str_replace('_', ' ', ucfirst($action->action_type)) }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $action->responsible_person }}</td>
                            <td class="py-4 px-6 text-sm text-gray-600">
                                {{ $action->target_completion_date ? $action->target_completion_date->format('d M Y') : 'N/A' }}
                            </td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium
                                    {{ $action->status === 'pending' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                    {{ $action->status === 'in_progress' ? 'bg-blue-100 text-blue-800' : '' }}
                                    {{ $action->status === 'completed' ? 'bg-green-100 text-green-800' : '' }}
                                    {{ $action->status === 'overdue' ? 'bg-red-100 text-red-800' : '' }}
                                    {{ $action->status === 'cancelled' ? 'bg-gray-100 text-gray-800' : '' }}">
                                    {{ ucfirst($action->status) }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm">
                                @if($action->effectiveness_verified)
                                    <span class="px-2 py-1 rounded text-xs font-medium
                                        {{ $action->effectiveness_rating === 'effective' ? 'bg-green-100 text-green-800' : '' }}
                                        {{ $action->effectiveness_rating === 'partially_effective' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                        {{ $action->effectiveness_rating === 'ineffective' ? 'bg-red-100 text-red-800' : '' }}">
                                        {{ str_replace('_', ' ', ucfirst($action->effectiveness_rating)) }}
                                    </span>
                                @else
                                    <span class="text-gray-400 text-xs">Not verified</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="py-8 text-center text-gray-500">No corrective actions tracked</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Add Incident/Near-Miss Modal -->
    <div id="addIncidentModal" 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">Report Incident/Near-Miss</h3>
                <button onclick="closeModal('addIncidentModal')" 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('incidents.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">Incident Number *</label>
                        <input type="text" name="incident_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">Type *</label>
                        <select name="incident_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="incident">Incident</option>
                            <option value="near_miss">Near Miss</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Category *</label>
                        <select name="incident_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="Safety">Safety</option>
                            <option value="Environmental">Environmental</option>
                            <option value="Operational">Operational</option>
                            <option value="Security">Security</option>
                            <option value="Equipment Failure">Equipment Failure</option>
                            <option value="Human Error">Human Error</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Severity *</label>
                        <select name="severity" 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 Severity</option>
                            <option value="critical">Critical</option>
                            <option value="major">Major</option>
                            <option value="moderate">Moderate</option>
                            <option value="minor">Minor</option>
                            <option value="negligible">Negligible</option>
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Incident Description *</label>
                        <textarea name="incident_description" required 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>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Incident Date & Time *</label>
                        <input type="datetime-local" name="incident_datetime" 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">Reported By *</label>
                        <input type="text" name="reported_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">Location</label>
                        <input type="text" name="location" 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">Witnesses</label>
                        <input type="text" name="witnesses" 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">Immediate Actions Taken</label>
                        <textarea name="immediate_actions" 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('addIncidentModal')" 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">
                        Report Incident
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Add Corrective Action Modal -->
    <div id="addCorrectiveActionModal" 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 Corrective Action</h3>
                <button onclick="closeModal('addCorrectiveActionModal')" 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('corrective-actions.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">Action Number *</label>
                        <input type="text" name="action_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">Related Incident Number *</label>
                        <select name="incident_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 Incident</option>
                            @foreach($incidents as $incident)
                                <option value="{{ $incident->id }}">{{ $incident->incident_number }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Action Description *</label>
                        <textarea name="action_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">Action Type *</label>
                        <select name="action_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="corrective">Corrective</option>
                            <option value="preventive">Preventive</option>
                            <option value="immediate">Immediate</option>
                            <option value="long_term">Long Term</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="critical">Critical</option>
                            <option value="high">High</option>
                            <option value="medium">Medium</option>
                            <option value="low">Low</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Responsible Person *</label>
                        <input type="text" name="responsible_person" 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 Completion Date *</label>
                        <input type="date" name="target_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 class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Expected Outcome</label>
                        <textarea name="expected_outcome" 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 class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Resources Required</label>
                        <textarea name="resources_required" 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('addCorrectiveActionModal')" 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 Action
                    </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