@extends('layouts.app')

@section('title', 'Element 4: Vessel Reliability & Maintenance')

@section('content')
    <div class="mb-8">
        <h2 class="text-2xl font-semibold text-black mb-2">Element 4: Vessel Reliability and Maintenance</h2>
        <p class="text-gray-600">Planned maintenance system, critical equipment management, failures tracking, spare parts lifecycle, and reliability metrics</p>
    </div>

    <!-- Vessel Reliability & Maintenance 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">Vessel Reliability & Maintenance Dashboard</h3>
        </div>

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

            <!-- Critical Equipment (E4-FR-02) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <p class="text-3xl font-bold text-red-600">{{ $equipment->where('is_critical', true)->count() }}</p>
                <p class="text-xs text-gray-500 mt-1">Critical equipment identified</p>
            </div>

            <!-- Active Maintenance Schedules (E4-FR-01) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                @php
                    $activeSchedules = $equipment->flatMap(fn($e) => $e->maintenanceSchedules)->where('is_active', true)->count();
                @endphp
                <p class="text-3xl font-bold text-orange-600">{{ $activeSchedules }}</p>
                <p class="text-xs text-gray-500 mt-1">Active maintenance schedules</p>
            </div>

            <!-- Spare Parts Status (E4-FR-04) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                @php
                    $lowStockCount = $spareParts->filter(fn($p) => $p->isLowStock())->count();
                @endphp
                <p class="text-3xl font-bold text-yellow-600">{{ $lowStockCount }}</p>
                <p class="text-xs text-gray-500 mt-1">Low stock items need reorder</p>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <!-- Recent Failures (E4-FR-03) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <p class="text-3xl font-bold text-red-600">{{ $failures->count() }}</p>
                <p class="text-xs text-gray-500 mt-1">Active equipment failures</p>
            </div>

            <!-- Maintenance Completion Rate (E4-FR-01) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                @php
                    $totalRecords = $maintenanceRecords->count();
                    $completedRecords = $maintenanceRecords->where('completion_status', 'completed')->count();
                    $completionRate = $totalRecords > 0 ? round(($completedRecords / $totalRecords) * 100) : 0;
                @endphp
                <p class="text-3xl font-bold text-green-600">{{ $completionRate }}%</p>
                <p class="text-xs text-gray-500 mt-1">Maintenance completion rate</p>
            </div>

            <!-- Audit Records (E4-NFR-01) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <p class="text-3xl font-bold text-purple-600">{{ $maintenanceRecords->count() }}</p>
                <p class="text-xs text-gray-500 mt-1">Auditable maintenance records</p>
            </div>

            <!-- Equipment Availability (E4-NFR-02) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                @php
                    $operationalCount = $equipment->where('status', 'operational')->count();
                    $availability = $equipment->count() > 0 ? round(($operationalCount / $equipment->count()) * 100) : 0;
                @endphp
                <p class="text-3xl font-bold text-indigo-600">{{ $availability }}%</p>
                <p class="text-xs text-gray-500 mt-1">Equipment availability</p>
            </div>
        </div>
    </div>

    <!-- Reliability Metrics (E4-NFR-02: Reliability metrics shall be measurable) -->
    <div class="bg-white border border-gray-300 rounded-lg p-6 mb-8">
        <div class="bg-gradient-to-r from-purple-600 to-purple-500 text-white px-6 py-3 -mx-6 -mt-6 mb-6 rounded-t-lg">
            <h3 class="text-lg font-semibold">Reliability Metrics (Measurable)</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">MTBF (Mean Time Between Failures)</h4>
                @php
                    $totalOperatingHours = 8760; // Approximate hours in a year
                    $failureCount = $failures->count();
                    $mtbf = $failureCount > 0 ? round($totalOperatingHours / $failureCount, 1) : 0;
                @endphp
                <p class="text-2xl font-bold text-purple-600">{{ $mtbf }} hrs</p>
                <p class="text-xs text-gray-600 mt-2">Formula: Operating Hours / Number of Failures</p>
            </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">MTTR (Mean Time To Repair)</h4>
                @php
                    $resolvedFailures = $failures->whereIn('status', ['resolved', 'closed']);
                    $totalDowntime = $resolvedFailures->sum('downtime_hours');
                    $mttr = $resolvedFailures->count() > 0 ? round($totalDowntime / $resolvedFailures->count(), 1) : 0;
                @endphp
                <p class="text-2xl font-bold text-orange-600">{{ $mttr }} hrs</p>
                <p class="text-xs text-gray-600 mt-2">Formula: Total Downtime / Number of Repairs</p>
            </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">System Availability</h4>
                @php
                    $uptime = $totalOperatingHours - $totalDowntime;
                    $systemAvailability = $totalOperatingHours > 0 ? round(($uptime / $totalOperatingHours) * 100, 2) : 100;
                @endphp
                <p class="text-2xl font-bold text-green-600">{{ $systemAvailability }}%</p>
                <p class="text-xs text-gray-600 mt-2">Formula: (Uptime / Total Time) × 100</p>
            </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-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 00 2-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                </svg>
                <span>All reliability metrics are calculated in real-time and are fully measurable</span>
            </div>
        </div>
    </div>

    <!-- Critical Equipment Identification (E4-FR-02: Identify critical equipment) -->
    <div class="bg-white border border-gray-300 rounded-lg p-6 mb-8">
        <div class="bg-gradient-to-r from-red-600 to-red-500 text-white px-6 py-3 -mx-6 -mt-6 mb-6 rounded-t-lg">
            <h3 class="text-lg font-semibold">Critical Equipment Identification</h3>
        </div>

        @php
            $criticalEquipment = $equipment->where('is_critical', true);
        @endphp

        @if($criticalEquipment->count() > 0)
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b border-gray-300">
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Equipment Code</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Name</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Type</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Location</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">Criticality Reason</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @foreach($criticalEquipment as $item)
                            <tr class="hover:bg-blue-50 transition-colors">
                                <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $item->equipment_code }}</td>
                                <td class="py-4 px-6 text-sm text-gray-900">{{ $item->name }}</td>
                                <td class="py-4 px-6 text-sm text-gray-600">{{ $item->type }}</td>
                                <td class="py-4 px-6 text-sm text-gray-600">{{ $item->location }}</td>
                                <td class="py-4 px-6 text-sm">
                                    <span class="px-2 py-1 rounded text-xs font-medium
                                        {{ $item->status === 'operational' ? 'bg-green-100 text-green-800' : '' }}
                                        {{ $item->status === 'maintenance' ? 'bg-orange-100 text-orange-800' : '' }}
                                        {{ $item->status === 'failed' ? 'bg-red-100 text-red-800' : '' }}
                                        {{ $item->status === 'decommissioned' ? 'bg-gray-100 text-gray-800' : '' }}">
                                        {{ ucfirst($item->status) }}
                                    </span>
                                </td>
                                <td class="py-4 px-6 text-sm text-gray-600">
                                    @if($item->status === 'operational')
                                        Essential for vessel operations
                                    @else
                                        <span class="text-red-600 font-medium">Requires immediate attention</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <p class="text-center text-gray-500 py-8">No critical equipment identified yet</p>
        @endif
    </div>

    <!-- Planned Maintenance System (E4-FR-01: Maintain planned maintenance system) -->
    <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">Planned Maintenance System (PMS)</h3>
            <button onclick="openModal('addMaintenanceScheduleModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + Add Schedule
            </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">Equipment</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Task Name</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Task Type</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">Next Due</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Est. Hours</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($equipment->flatMap(fn($e) => $e->maintenanceSchedules)->sortBy('next_due') as $schedule)
                        <tr class="hover:bg-blue-50 transition-colors">
                            <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $schedule->equipment->name }}</td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $schedule->task_name }}</td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $schedule->task_type }}</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($schedule->frequency)) }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600">
                                {{ $schedule->next_due ? $schedule->next_due->format('d M Y') : 'Not scheduled' }}
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $schedule->estimated_hours ?? 'N/A' }} hrs</td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium
                                    {{ $schedule->is_active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                                    {{ $schedule->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="py-8 text-center text-gray-500">No maintenance schedules created yet</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Maintenance Records & Audit Trail (E4-NFR-01: Maintenance records shall be auditable) -->
    <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 flex items-center justify-between">
            <h3 class="text-lg font-semibold">Maintenance Records & Audit Trail</h3>
            <button onclick="openModal('addMaintenanceRecordModal')" class="bg-white text-green-600 hover:bg-green-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + Record Maintenance
            </button>
        </div>

        <div class="mb-4 bg-green-50 border border-green-200 rounded-lg p-3">
            <div class="flex items-center gap-2 text-sm text-green-800">
                <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="font-medium">All maintenance records are auditable with full traceability (who, what, when)</span>
            </div>
        </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">Date</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Equipment</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Task Description</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Performed By</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Hours Spent</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($maintenanceRecords->sortByDesc('maintenance_date')->take(10) as $record)
                        <tr class="hover:bg-blue-50 transition-colors">
                            <td class="py-4 px-6 text-sm text-gray-900">
                                {{ $record->maintenance_date ? $record->maintenance_date->format('d M Y') : 'N/A' }}
                            </td>
                            <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $record->equipment->name }}</td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ Str::limit($record->task_description ?? 'N/A', 40) }}</td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $record->user->name ?? 'N/A' }}</td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $record->hours_spent ?? 'N/A' }} hrs</td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium
                                    {{ $record->completion_status === 'completed' ? 'bg-green-100 text-green-800' : '' }}
                                    {{ $record->completion_status === 'in_progress' ? 'bg-blue-100 text-blue-800' : '' }}
                                    {{ $record->completion_status === 'pending' ? 'bg-yellow-100 text-yellow-800' : '' }}">
                                    {{ str_replace('_', ' ', ucfirst($record->completion_status ?? 'pending')) }}
                                </span>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="py-8 text-center text-gray-500">No maintenance records found</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Equipment Failures & Corrective Actions (E4-FR-03: Record failures and 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">Equipment Failures & Corrective Actions</h3>
            <button onclick="openModal('addFailureModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + Report Failure
            </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">Equipment</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Failure Type</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">Failure Date</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Corrective Action</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">Downtime</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($failures as $failure)
                        <tr class="hover:bg-blue-50 transition-colors">
                            <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $failure->equipment->name }}</td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $failure->failure_type }}</td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium
                                    {{ $failure->severity === 'critical' ? 'bg-red-100 text-red-800' : '' }}
                                    {{ $failure->severity === 'major' ? 'bg-orange-100 text-orange-800' : '' }}
                                    {{ $failure->severity === 'minor' ? 'bg-yellow-100 text-yellow-800' : '' }}">
                                    {{ ucfirst($failure->severity) }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600">
                                {{ $failure->failure_datetime ? $failure->failure_datetime->format('d M Y H:i') : 'N/A' }}
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600">
                                {{ Str::limit($failure->corrective_action ?? 'No action recorded', 40) }}
                            </td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium
                                    {{ $failure->status === 'open' ? 'bg-red-100 text-red-800' : '' }}
                                    {{ $failure->status === 'in_progress' ? 'bg-blue-100 text-blue-800' : '' }}
                                    {{ in_array($failure->status, ['resolved', 'closed']) ? 'bg-green-100 text-green-800' : '' }}">
                                    {{ str_replace('_', ' ', ucfirst($failure->status)) }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $failure->downtime_hours ?? 0 }} hrs</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="py-8 text-center text-gray-500">No equipment failures recorded</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Spare Parts Lifecycle Management (E4-FR-04: Manage spare parts lifecycle) -->
    <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">Spare Parts Lifecycle Management</h3>
            <button onclick="openModal('addSparePartModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + Add Spare Part
            </button>
        </div>

        <!-- Lifecycle Status Summary -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
            @php
                $inStock = $spareParts->filter(fn($p) => $p->stockStatus() === 'in_stock')->count();
                $lowStock = $spareParts->filter(fn($p) => $p->stockStatus() === 'low_stock')->count();
                $outOfStock = $spareParts->filter(fn($p) => $p->stockStatus() === 'out_of_stock')->count();
                $overstocked = $spareParts->filter(fn($p) => $p->stockStatus() === 'overstocked')->count();
            @endphp
            <div class="bg-green-50 border border-green-200 rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-green-600">{{ $inStock }}</p>
                <p class="text-xs text-green-700 mt-1">In Stock</p>
            </div>
            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-yellow-600">{{ $lowStock }}</p>
                <p class="text-xs text-yellow-700 mt-1">Low Stock (Reorder)</p>
            </div>
            <div class="bg-red-50 border border-red-200 rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-red-600">{{ $outOfStock }}</p>
                <p class="text-xs text-red-700 mt-1">Out of Stock</p>
            </div>
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-blue-600">{{ $overstocked }}</p>
                <p class="text-xs text-blue-700 mt-1">Overstocked</p>
            </div>
        </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">Part Number</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Part 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">Current Stock</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Min Level</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Reorder Point</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Lifecycle Status</th>
                        <th class="text-right py-3 px-6 text-sm font-semibold text-gray-700">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($spareParts as $part)
                        <tr class="hover:bg-blue-50 transition-colors">
                            <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $part->part_number }}</td>
                            <td class="py-4 px-6 text-sm text-gray-900">{{ $part->part_name }}</td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $part->category }}</td>
                            <td class="py-4 px-6 text-sm">
                                <span class="font-medium text-gray-900">{{ $part->quantity_in_stock }}</span>
                                <span class="text-gray-500 ml-1">{{ $part->unit_of_measure }}</span>
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $part->minimum_stock_level }}</td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $part->reorder_point }}</td>
                            <td class="py-4 px-6 text-sm">
                                @php $status = $part->stockStatus(); @endphp
                                <span class="px-2 py-1 rounded text-xs font-medium
                                    {{ $status === 'out_of_stock' ? 'bg-red-100 text-red-800' : '' }}
                                    {{ $status === 'low_stock' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                    {{ $status === 'in_stock' ? 'bg-green-100 text-green-800' : '' }}
                                    {{ $status === 'overstocked' ? 'bg-blue-100 text-blue-800' : '' }}">
                                    {{ str_replace('_', ' ', ucfirst($status)) }}
                                </span>
                            </td>
                            <td class="py-4 px-6">
                                <div class="flex items-center justify-end gap-2">
                                    <button onclick="openAdjustStockModal({{ $part->id }}, '{{ $part->part_name }}', {{ $part->quantity_in_stock }})"
                                        class="px-3 py-1 text-xs bg-blue-100 text-blue-700 rounded hover:bg-blue-200">
                                        Adjust
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="py-8 text-center text-gray-500">No spare parts in inventory</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Equipment Inventory -->
    <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">Equipment Inventory</h3>
            <button onclick="openModal('addEquipmentModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + Add Equipment
            </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">Equipment Code</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Name</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Type</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Location</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">Critical</th>
                        <th class="text-right py-3 px-6 text-sm font-semibold text-gray-700">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($equipment as $item)
                        <tr class="hover:bg-blue-50 transition-colors">
                            <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $item->equipment_code }}</td>
                            <td class="py-4 px-6 text-sm text-gray-900">{{ $item->name }}</td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $item->type }}</td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $item->location }}</td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium
                                    {{ $item->status === 'operational' ? 'bg-green-100 text-green-800' : '' }}
                                    {{ $item->status === 'maintenance' ? 'bg-orange-100 text-orange-800' : '' }}
                                    {{ $item->status === 'failed' ? 'bg-red-100 text-red-800' : '' }}
                                    {{ $item->status === 'decommissioned' ? 'bg-gray-100 text-gray-800' : '' }}">
                                    {{ ucfirst($item->status) }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm">
                                @if($item->is_critical)
                                    <span class="px-2 py-1 rounded text-xs font-medium bg-red-100 text-red-800">Critical</span>
                                @else
                                    <span class="text-gray-400 text-xs">Standard</span>
                                @endif
                            </td>
                            <td class="py-4 px-6">
                                <div class="flex items-center justify-end gap-2">
                                    <button onclick="openAddMaintenanceScheduleModal({{ $item->id }}, '{{ $item->name }}')"
                                        class="px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded hover:bg-blue-200" title="Add Schedule">
                                        Schedule
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="py-8 text-center text-gray-500">No equipment in inventory</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Add Equipment Modal -->
    <div id="addEquipmentModal" 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 Equipment</h3>
                <button onclick="closeModal('addEquipmentModal')" 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('equipment.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">Equipment Code *</label>
                        <input type="text" name="equipment_code" 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">Equipment Name *</label>
                        <input type="text" name="name" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Type *</label>
                        <input type="text" name="type" required placeholder="e.g., Engine, Pump, Generator" 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" 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">Manufacturer</label>
                        <input type="text" name="manufacturer" 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">Model Number</label>
                        <input type="text" name="model_number" 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">Serial Number</label>
                        <input type="text" name="serial_number" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Status *</label>
                        <select name="status" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="operational">Operational</option>
                            <option value="maintenance">Maintenance</option>
                            <option value="failed">Failed</option>
                            <option value="decommissioned">Decommissioned</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Installation Date</label>
                        <input type="date" name="installation_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>
                        <label class="flex items-center gap-2 mt-8">
                            <input type="checkbox" name="is_critical" value="1" class="rounded">
                            <span class="text-sm font-medium text-gray-700">Mark as Critical Equipment</span>
                        </label>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Specifications</label>
                        <textarea name="specifications" 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('addEquipmentModal')" 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 Equipment
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Add Maintenance Schedule Modal -->
    <div id="addMaintenanceScheduleModal" 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 Maintenance Schedule</h3>
                <button onclick="closeModal('addMaintenanceScheduleModal')" 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('maintenance.schedule.store') }}" method="POST">
                @csrf
                <input type="hidden" name="equipment_id" id="scheduleEquipmentId">
                <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">Equipment</label>
                        <select name="equipment_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 Equipment</option>
                            @foreach($equipment as $item)
                                <option value="{{ $item->id }}">{{ $item->name }} ({{ $item->equipment_code }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Task Name *</label>
                        <input type="text" name="task_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">Task Type *</label>
                        <select name="task_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="Preventive">Preventive</option>
                            <option value="Inspection">Inspection</option>
                            <option value="Calibration">Calibration</option>
                            <option value="Testing">Testing</option>
                            <option value="Overhaul">Overhaul</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Frequency *</label>
                        <select name="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="semi_annual">Semi-Annual</option>
                            <option value="annual">Annual</option>
                            <option value="biennial">Biennial</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Next Due Date</label>
                        <input type="date" name="next_due" 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">Estimated Hours</label>
                        <input type="number" name="estimated_hours" min="0" step="0.5" 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" 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">Instructions</label>
                        <textarea name="instructions" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
                    </div>
                </div>
                <div class="flex justify-end gap-3 mt-6">
                    <button type="button" onclick="closeModal('addMaintenanceScheduleModal')" 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 Schedule
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Add Maintenance Record Modal -->
    <div id="addMaintenanceRecordModal" 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">Record Maintenance Activity</h3>
                <button onclick="closeModal('addMaintenanceRecordModal')" 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('maintenance.record.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">Equipment *</label>
                        <select name="equipment_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 Equipment</option>
                            @foreach($equipment as $item)
                                <option value="{{ $item->id }}">{{ $item->name }} ({{ $item->equipment_code }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Maintenance Date *</label>
                        <input type="date" name="maintenance_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">Hours Spent</label>
                        <input type="number" name="hours_spent" min="0" step="0.5" 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">Task Description *</label>
                        <textarea name="task_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">Parts Used</label>
                        <textarea name="parts_used" 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">Completion Status *</label>
                        <select name="completion_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="completed">Completed</option>
                            <option value="in_progress">In Progress</option>
                            <option value="pending">Pending</option>
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Notes</label>
                        <textarea name="notes" rows="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('addMaintenanceRecordModal')" 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">
                        Record Maintenance
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Add Failure Modal -->
    <div id="addFailureModal" 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 Equipment Failure</h3>
                <button onclick="closeModal('addFailureModal')" 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('equipment.failure.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">Equipment *</label>
                        <select name="equipment_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 Equipment</option>
                            @foreach($equipment as $item)
                                <option value="{{ $item->id }}">{{ $item->name }} ({{ $item->equipment_code }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Failure Type *</label>
                        <select name="failure_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="Mechanical">Mechanical</option>
                            <option value="Electrical">Electrical</option>
                            <option value="Hydraulic">Hydraulic</option>
                            <option value="Software">Software</option>
                            <option value="Structural">Structural</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="minor">Minor</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Failure Date & Time *</label>
                        <input type="datetime-local" name="failure_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 class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Failure Description *</label>
                        <textarea name="failure_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">Corrective Action Taken</label>
                        <textarea name="corrective_action" 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">Downtime (hours)</label>
                        <input type="number" name="downtime_hours" min="0" step="0.5" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Status *</label>
                        <select name="status" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="open">Open</option>
                            <option value="in_progress">In Progress</option>
                            <option value="resolved">Resolved</option>
                        </select>
                    </div>
                </div>
                <div class="flex justify-end gap-3 mt-6">
                    <button type="button" onclick="closeModal('addFailureModal')" 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 Failure
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Add Spare Part Modal -->
    <div id="addSparePartModal" 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 Spare Part</h3>
                <button onclick="closeModal('addSparePartModal')" 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('spare-parts.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">Part Number *</label>
                        <input type="text" name="part_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">Part Name *</label>
                        <input type="text" name="part_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">Category *</label>
                        <input type="text" name="category" required placeholder="e.g., Engine Parts, Filters" 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">Unit of Measure *</label>
                        <input type="text" name="unit_of_measure" required value="pcs" 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">Manufacturer</label>
                        <input type="text" name="manufacturer" 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">Supplier</label>
                        <input type="text" name="supplier" 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">Unit Cost</label>
                        <input type="number" name="unit_cost" step="0.01" min="0" 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">Quantity in Stock *</label>
                        <input type="number" name="quantity_in_stock" required min="0" value="0" 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">Minimum Stock Level *</label>
                        <input type="number" name="minimum_stock_level" required min="0" value="0" 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">Reorder Point *</label>
                        <input type="number" name="reorder_point" required min="0" value="0" 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" 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('addSparePartModal')" 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 Spare Part
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Adjust Stock Modal -->
    <div id="adjustStockModal" class="modal hidden">
        <div class="modal-content bg-white rounded-lg p-6 max-w-md w-full">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-semibold text-gray-900">Adjust Stock</h3>
                <button onclick="closeModal('adjustStockModal')" 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 id="adjustStockForm" method="POST">
                @csrf
                <p class="text-sm text-gray-600 mb-4">Part: <span id="adjustStockPartName" class="font-semibold"></span></p>
                <p class="text-sm text-gray-600 mb-4">Current Stock: <span id="currentStock" class="font-semibold"></span></p>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Adjustment Type *</label>
                        <select name="adjustment_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="add">Add Stock (Received)</option>
                            <option value="subtract">Subtract Stock (Used)</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Quantity *</label>
                        <input type="number" name="quantity" required min="1" 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">Reason</label>
                        <textarea name="reason" 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('adjustStockModal')" 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">
                        Adjust Stock
                    </button>
                </div>
            </form>
        </div>
    </div>

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

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

        function openAddMaintenanceScheduleModal(equipmentId, equipmentName) {
            const modal = document.getElementById('addMaintenanceScheduleModal');
            const select = modal.querySelector('select[name="equipment_id"]');
            if (select && equipmentId) {
                select.value = equipmentId;
            }
            openModal('addMaintenanceScheduleModal');
        }

        function openAdjustStockModal(partId, partName, currentStock) {
            document.getElementById('adjustStockPartName').textContent = partName;
            document.getElementById('currentStock').textContent = currentStock;
            const form = document.getElementById('adjustStockForm');
            form.action = '/spare-parts/' + partId + '/adjust-stock';
            openModal('adjustStockModal');
        }

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