@extends('layouts.app')

@section('title', 'Element 12: Measurement & Improvement')

@section('content')
    <div class="mb-8">
        <h2 class="text-2xl font-semibold text-black mb-2">Element 12: Measurement, Analysis and Improvement</h2>
        <p class="text-gray-600">Measure and analyze performance for continuous improvement</p>
    </div>

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

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
            <!-- Total KPIs (E12-FR-01) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <p class="text-3xl font-bold text-gray-900">{{ $kpis->count() }}</p>
                <p class="text-xs text-gray-500 mt-1">Total KPIs defined</p>
            </div>

            <!-- KPI Achievement Rate (E12-NFR-01: Reviewable) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                @php
                    $kpisWithValues = $kpis->where('current_value', '!=', null);
                    $achievedKpis = $kpisWithValues->filter(fn($kpi) => $kpi->current_value >= $kpi->target_value);
                    $achievementRate = $kpisWithValues->count() > 0 ? round(($achievedKpis->count() / $kpisWithValues->count()) * 100) : 0;
                @endphp
                <p class="text-3xl font-bold text-green-600">{{ $achievementRate }}%</p>
                <p class="text-xs text-gray-500 mt-1">KPI achievement rate</p>
            </div>

            <!-- Inspections & Audits (E12-FR-02) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <p class="text-3xl font-bold text-blue-600">{{ $inspections->where('status', 'completed')->count() }}</p>
                <p class="text-xs text-gray-500 mt-1">
                    of {{ $inspections->count() }} inspections completed
                </p>
            </div>

            <!-- Improvement Actions (E12-FR-03) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                @php
                    $completionRate = $actions->count() > 0 ? round(($actions->where('status', 'completed')->count() / $actions->count()) * 100) : 0;
                @endphp
                <p class="text-3xl font-bold text-purple-600">{{ $completionRate }}%</p>
                <p class="text-xs text-gray-500 mt-1">Actions completed</p>
            </div>
        </div>

        <!-- Performance Review Section (E12-NFR-01: Reviewable) -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- KPI Performance by Category -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <h4 class="text-sm font-semibold text-gray-900 mb-3">KPI Performance by Category (Reviewable)</h4>
                @php
                    $categories = $kpis->groupBy('category');
                @endphp
                <div class="space-y-3">
                    @foreach($categories as $category => $categoryKpis)
                        @php
                            $withValues = $categoryKpis->where('current_value', '!=', null);
                            $achieved = $withValues->filter(fn($kpi) => $kpi->current_value >= $kpi->target_value)->count();
                            $total = $withValues->count();
                            $percentage = $total > 0 ? round(($achieved / $total) * 100) : 0;
                        @endphp
                        <div>
                            <div class="flex justify-between items-center mb-1">
                                <span class="text-xs font-medium text-gray-700">{{ $category }}</span>
                                <span class="text-xs text-gray-600">{{ $achieved }}/{{ $total }} ({{ $percentage }}%)</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-blue-600 h-2 rounded-full transition-all" style="width: {{ $percentage }}%"></div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <!-- Inspection & Audit Status Distribution -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <h4 class="text-sm font-semibold text-gray-900 mb-3">Inspection & Audit Status Overview</h4>
                <div class="space-y-3">
                    @php
                        $statusCounts = [
                            'completed' => $inspections->where('status', 'completed')->count(),
                            'in_progress' => $inspections->where('status', 'in_progress')->count(),
                            'scheduled' => $inspections->where('status', 'scheduled')->count(),
                            'cancelled' => $inspections->where('status', 'cancelled')->count(),
                        ];
                        $maxCount = max(array_merge($statusCounts, [1]));
                    @endphp
                    @foreach($statusCounts as $status => $count)
                        <div class="flex items-center gap-3">
                            <div class="flex-1">
                                <div class="flex justify-between items-center mb-1">
                                    <span class="text-xs text-gray-700">{{ ucfirst($status) }}</span>
                                    <span class="text-xs font-medium text-gray-900">{{ $count }}</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div class="h-2 rounded-full transition-all
                                        {{ $status === 'completed' ? 'bg-green-500' : '' }}
                                        {{ $status === 'in_progress' ? 'bg-blue-500' : '' }}
                                        {{ $status === 'scheduled' ? 'bg-yellow-500' : '' }}
                                        {{ $status === 'cancelled' ? 'bg-red-500' : '' }}"
                                        style="width: {{ ($count / $maxCount) * 100 }}%">
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <!-- Data Review Timeline (E12-NFR-01: Performance data reviewable) -->
    <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">Performance Data Review Status</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">Last KPI Review</h4>
                @php
                    $lastKpiUpdate = $kpis->where('current_value', '!=', null)->sortByDesc('updated_at')->first();
                @endphp
                @if($lastKpiUpdate)
                    <p class="text-sm text-gray-600">
                        <span class="font-medium">{{ $lastKpiUpdate->kpi_name }}</span>
                    </p>
                    <p class="text-xs text-gray-500 mt-1">
                        Updated {{ $lastKpiUpdate->updated_at->diffForHumans() }}
                    </p>
                @else
                    <p class="text-sm text-gray-500">No recent updates</p>
                @endif
            </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">Last Inspection</h4>
                @php
                    $lastInspection = $inspections->sortByDesc('scheduled_date')->first();
                @endphp
                @if($lastInspection)
                    <p class="text-sm text-gray-600">
                        <span class="font-medium">{{ Str::limit($lastInspection->inspection_title, 30) }}</span>
                    </p>
                    <p class="text-xs text-gray-500 mt-1">
                        {{ $lastInspection->scheduled_date ? $lastInspection->scheduled_date->format('d M Y') : 'N/A' }}
                    </p>
                @else
                    <p class="text-sm text-gray-500">No inspections found</p>
                @endif
            </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">Latest Action</h4>
                @php
                    $latestAction = $actions->sortByDesc('updated_at')->first();
                @endphp
                @if($latestAction)
                    <p class="text-sm text-gray-600">
                        <span class="font-medium">{{ Str::limit($latestAction->action_title, 30) }}</span>
                    </p>
                    <p class="text-xs text-gray-500 mt-1">
                        Status: {{ ucfirst($latestAction->status) }}
                    </p>
                @else
                    <p class="text-sm text-gray-500">No actions found</p>
                @endif
            </div>
        </div>

        <div class="mt-4 pt-4 border-t border-gray-200">
            <div class="flex items-center gap-2 text-sm text-gray-600">
                <svg class="w-5 h-5 text-blue-500" 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>All performance data is reviewable and tracked for continuous improvement</span>
            </div>
        </div>
    </div>

    <!-- Performance KPIs Table (E12-FR-01: Define KPIs) -->
    <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 KPIs (Define & Track)</h3>
            <button onclick="openModal('addKPIModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + Define New KPI
            </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">KPI Number</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">KPI Name</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">Target</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Current</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Achievement</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Frequency</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">Last Review</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($kpis as $kpi)
                        <tr class="hover:bg-blue-50 transition-colors">
                            <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $kpi->kpi_number }}</td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $kpi->kpi_name }}</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">
                                    {{ $kpi->category }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600">
                                <span class="font-medium">{{ $kpi->target_value }}</span> {{ $kpi->measurement_unit }}
                            </td>
                            <td class="py-4 px-6 text-sm">
                                @if($kpi->current_value)
                                    <span class="font-medium
                                        {{ $kpi->current_value >= $kpi->target_value ? 'text-green-600' : 'text-orange-600' }}">
                                        {{ $kpi->current_value }} {{ $kpi->measurement_unit }}
                                    </span>
                                @else
                                    <span class="text-gray-400">Not measured</span>
                                @endif
                            </td>
                            <td class="py-4 px-6 text-sm">
                                @if($kpi->current_value && $kpi->target_value > 0)
                                    @php
                                        $achievement = round(($kpi->current_value / $kpi->target_value) * 100);
                                    @endphp
                                    <div class="flex items-center gap-2">
                                        <div class="flex-1 bg-gray-200 rounded-full h-2 max-w-[80px]">
                                            <div class="h-2 rounded-full {{ $achievement >= 100 ? 'bg-green-500' : 'bg-orange-500' }}"
                                                style="width: {{ min($achievement, 100) }}%">
                                            </div>
                                        </div>
                                        <span class="text-xs font-medium {{ $achievement >= 100 ? 'text-green-600' : 'text-orange-600' }}">
                                            {{ $achievement }}%
                                        </span>
                                    </div>
                                @else
                                    <span class="text-gray-400 text-xs">N/A</span>
                                @endif
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $kpi->measurement_frequency }}</td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium
                                    {{ $kpi->status === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                                    {{ ucfirst($kpi->status) }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-500">
                                {{ $kpi->updated_at->diffForHumans() }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="py-8 text-center text-gray-500">No performance KPIs defined</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Quality Inspections & Audits Table (E12-FR-02: Support inspections and audits) -->
    <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">Quality Inspections & Audits</h3>
            <button onclick="openModal('addInspectionModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + Schedule Inspection
            </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">Inspection 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</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Scheduled Date</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Inspector</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">Rating</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Follow-up</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($inspections as $inspection)
                        <tr class="hover:bg-blue-50 transition-colors">
                            <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $inspection->inspection_number }}</td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ Str::limit($inspection->inspection_title, 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($inspection->inspection_type)) }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600">
                                {{ $inspection->scheduled_date ? $inspection->scheduled_date->format('d M Y') : 'N/A' }}
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $inspection->inspector_name }}</td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium
                                    {{ $inspection->status === 'completed' ? 'bg-green-100 text-green-800' : '' }}
                                    {{ $inspection->status === 'in_progress' ? 'bg-blue-100 text-blue-800' : '' }}
                                    {{ $inspection->status === 'scheduled' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                    {{ $inspection->status === 'cancelled' ? 'bg-red-100 text-red-800' : '' }}">
                                    {{ ucfirst($inspection->status) }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm">
                                @if($inspection->overall_rating)
                                    <span class="px-2 py-1 rounded text-xs font-medium
                                        {{ $inspection->overall_rating === 'excellent' ? 'bg-green-100 text-green-800' : '' }}
                                        {{ $inspection->overall_rating === 'good' ? 'bg-blue-100 text-blue-800' : '' }}
                                        {{ $inspection->overall_rating === 'satisfactory' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                        {{ $inspection->overall_rating === 'needs_improvement' ? 'bg-orange-100 text-orange-800' : '' }}
                                        {{ $inspection->overall_rating === 'unsatisfactory' ? 'bg-red-100 text-red-800' : '' }}">
                                        {{ str_replace('_', ' ', ucfirst($inspection->overall_rating)) }}
                                    </span>
                                @else
                                    <span class="text-gray-400 text-xs">Not rated</span>
                                @endif
                            </td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium {{ $inspection->follow_up_required ? 'bg-orange-100 text-orange-800' : 'bg-gray-100 text-gray-800' }}">
                                    {{ $inspection->follow_up_required ? 'Yes' : 'No' }}
                                </span>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="py-8 text-center text-gray-500">No quality inspections found</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Improvement Actions Table (E12-FR-03: Track improvement 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">Improvement Actions (Track & Verify)</h3>
            <button onclick="openModal('addActionModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + Create 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 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</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">Target Date</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Responsible</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">Verification</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($actions 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">{{ Str::limit($action->action_title, 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">
                                <span class="px-2 py-1 rounded text-xs font-medium
                                    {{ $action->priority === 'critical' ? 'bg-red-100 text-red-800' : '' }}
                                    {{ $action->priority === 'high' ? 'bg-orange-100 text-orange-800' : '' }}
                                    {{ $action->priority === 'medium' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                    {{ $action->priority === 'low' ? 'bg-blue-100 text-blue-800' : '' }}">
                                    {{ ucfirst($action->priority) }}
                                </span>
                            </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 text-gray-600">{{ $action->responsible_person }}</td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium
                                    {{ $action->status === 'completed' ? 'bg-green-100 text-green-800' : '' }}
                                    {{ $action->status === 'in_progress' ? 'bg-blue-100 text-blue-800' : '' }}
                                    {{ $action->status === 'planned' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                    {{ $action->status === 'cancelled' ? 'bg-gray-100 text-gray-800' : '' }}
                                    {{ $action->status === 'overdue' ? 'bg-red-100 text-red-800' : '' }}">
                                    {{ ucfirst($action->status) }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium
                                    {{ $action->verification_status === 'verified' ? 'bg-green-100 text-green-800' : '' }}
                                    {{ $action->verification_status === 'pending' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                    {{ $action->verification_status === 'not_verified' ? 'bg-gray-100 text-gray-800' : '' }}">
                                    {{ str_replace('_', ' ', ucfirst($action->verification_status)) }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm">
                                @if($action->effectiveness_rating && $action->effectiveness_rating !== 'not_assessed')
                                    <span class="px-2 py-1 rounded text-xs font-medium
                                        {{ $action->effectiveness_rating === 'highly_effective' ? 'bg-green-100 text-green-800' : '' }}
                                        {{ $action->effectiveness_rating === 'effective' ? 'bg-blue-100 text-blue-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 assessed</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="py-8 text-center text-gray-500">No improvement actions tracked</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Add KPI Modal -->
    <div id="addKPIModal" 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 New Performance KPI</h3>
                <button onclick="closeModal('addKPIModal')" 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-kpis.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">KPI Number *</label>
                        <input type="text" name="kpi_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">KPI Name *</label>
                        <input type="text" name="kpi_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 class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Description *</label>
                        <textarea name="kpi_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">Category *</label>
                        <select name="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="Quality">Quality</option>
                            <option value="Environmental">Environmental</option>
                            <option value="Operational">Operational</option>
                            <option value="Financial">Financial</option>
                            <option value="Customer">Customer</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Measurement Unit *</label>
                        <input type="text" name="measurement_unit" required placeholder="e.g., %, hours, incidents" 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 Value *</label>
                        <input type="number" step="0.01" name="target_value" 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">Current Value</label>
                        <input type="number" step="0.01" name="current_value" 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">Measurement Frequency *</label>
                        <select name="measurement_frequency" 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 Frequency</option>
                            <option value="Daily">Daily</option>
                            <option value="Weekly">Weekly</option>
                            <option value="Monthly">Monthly</option>
                            <option value="Quarterly">Quarterly</option>
                            <option value="Annually">Annually</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 class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Remarks</label>
                        <textarea name="remarks" 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('addKPIModal')" 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 KPI
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Add Inspection Modal -->
    <div id="addInspectionModal" 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">Schedule New Inspection/Audit</h3>
                <button onclick="closeModal('addInspectionModal')" 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('quality-inspections.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">Inspection Number *</label>
                        <input type="text" name="inspection_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">Inspection Type *</label>
                        <select name="inspection_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="internal_audit">Internal Audit</option>
                            <option value="external_audit">External Audit</option>
                            <option value="inspection">Inspection</option>
                            <option value="surveillance">Surveillance</option>
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Inspection Title *</label>
                        <input type="text" name="inspection_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">Scheduled Date *</label>
                        <input type="date" name="scheduled_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">Inspector Name *</label>
                        <input type="text" name="inspector_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 class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Inspection Scope *</label>
                        <textarea name="inspection_scope" 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">Remarks</label>
                        <textarea name="remarks" 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('addInspectionModal')" 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">
                        Schedule Inspection
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Add Action Modal -->
    <div id="addActionModal" 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 Improvement Action</h3>
                <button onclick="closeModal('addActionModal')" 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('improvement-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">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="improvement">Improvement</option>
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Action Title *</label>
                        <input type="text" name="action_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">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 class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Proposed Solution *</label>
                        <textarea name="proposed_solution" 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">Root Cause Analysis</label>
                        <textarea name="root_cause_analysis" 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>
                        <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="medium">Medium</option>
                            <option value="low">Low</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">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>
                        <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 class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Remarks</label>
                        <textarea name="remarks" 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('addActionModal')" 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 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