@extends('layouts.app')

@section('title', 'Element 13: Maritime Security')

@section('content')
    <div class="mb-8">
        <h2 class="text-2xl font-semibold text-black mb-2">Element 13: Maritime Security</h2>
        <p class="text-gray-600">Manage maritime security protocols and ISPS Code compliance</p>
    </div>

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

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
            <!-- ISPS Compliance Rate (E13-FR-01) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                @php
                    $complianceRate = $complianceRecords->count() > 0 ? round(($complianceRecords->where('compliance_status', 'compliant')->count() / $complianceRecords->count()) * 100) : 0;
                @endphp
                <p class="text-3xl font-bold text-green-600">{{ $complianceRate }}%</p>
                <p class="text-xs text-gray-500 mt-1">ISPS Code compliance</p>
            </div>

            <!-- Security Risk Assessments (E13-FR-02) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <p class="text-3xl font-bold text-orange-600">
                    {{ $riskAssessments->whereIn('status', ['identified', 'under_assessment'])->count() }}
                </p>
                <p class="text-xs text-gray-500 mt-1">Active security risks</p>
            </div>

            <!-- Security Drills (E13-FR-03) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                @php
                    $drillsThisYear = $drills->where('status', 'completed')->filter(function($drill) {
                        return $drill->scheduled_date && $drill->scheduled_date->year == date('Y');
                    })->count();
                @endphp
                <p class="text-3xl font-bold text-blue-600">{{ $drillsThisYear }}</p>
                <p class="text-xs text-gray-500 mt-1">Drills completed this year</p>
            </div>

            <!-- ISPS Drill Compliance (E13-FR-01 + E13-FR-03) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                @php
                    $completedDrills = $drills->where('status', 'completed');
                    $ispsCompliantRate = $completedDrills->count() > 0 ? round(($completedDrills->where('isps_compliant', true)->count() / $completedDrills->count()) * 100) : 0;
                @endphp
                <p class="text-3xl font-bold text-purple-600">{{ $ispsCompliantRate }}%</p>
                <p class="text-xs text-gray-500 mt-1">Drills ISPS compliant</p>
            </div>
        </div>

        <!-- Visual Analytics -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Security Risk Distribution (E13-FR-02) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <h4 class="text-sm font-semibold text-gray-900 mb-3">Security Risk Assessment Distribution</h4>
                @php
                    $riskCounts = [
                        'Extreme' => $riskAssessments->where('risk_rating', 'Extreme')->count(),
                        'High' => $riskAssessments->where('risk_rating', 'High')->count(),
                        'Medium' => $riskAssessments->where('risk_rating', 'Medium')->count(),
                        'Low' => $riskAssessments->where('risk_rating', 'Low')->count(),
                    ];
                    $maxRisk = max(array_merge($riskCounts, [1]));
                @endphp
                <div class="space-y-3">
                    @foreach($riskCounts as $rating => $count)
                        <div>
                            <div class="flex justify-between items-center mb-1">
                                <span class="text-xs font-medium text-gray-700">{{ $rating }} Risk</span>
                                <span class="text-xs text-gray-600">{{ $count }} assessments</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="h-2 rounded-full transition-all
                                    {{ $rating === 'Extreme' ? 'bg-red-600' : '' }}
                                    {{ $rating === 'High' ? 'bg-orange-500' : '' }}
                                    {{ $rating === 'Medium' ? 'bg-yellow-500' : '' }}
                                    {{ $rating === 'Low' ? 'bg-green-500' : '' }}"
                                    style="width: {{ ($count / $maxRisk) * 100 }}%">
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <!-- ISPS Compliance Status (E13-FR-01) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <h4 class="text-sm font-semibold text-gray-900 mb-3">ISPS Code Compliance Status</h4>
                @php
                    $statusCounts = [
                        'compliant' => $complianceRecords->where('compliance_status', 'compliant')->count(),
                        'partial_compliance' => $complianceRecords->where('compliance_status', 'partial_compliance')->count(),
                        'under_review' => $complianceRecords->where('compliance_status', 'under_review')->count(),
                        'non_compliant' => $complianceRecords->where('compliance_status', 'non_compliant')->count(),
                    ];
                    $maxStatus = max(array_merge($statusCounts, [1]));
                @endphp
                <div class="space-y-3">
                    @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">{{ str_replace('_', ' ', 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 === 'compliant' ? 'bg-green-500' : '' }}
                                        {{ $status === 'partial_compliance' ? 'bg-yellow-500' : '' }}
                                        {{ $status === 'under_review' ? 'bg-blue-500' : '' }}
                                        {{ $status === 'non_compliant' ? 'bg-red-500' : '' }}"
                                        style="width: {{ ($count / $maxStatus) * 100 }}%">
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <!-- Security Confidentiality Notice (E13-NFR-01) -->
    <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">Security & Confidentiality Notice</h3>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="bg-red-50 border border-red-200 rounded-lg p-4">
                <div class="flex items-start gap-3">
                    <svg class="w-6 h-6 text-red-600 flex-shrink-0 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                    </svg>
                    <div>
                        <h4 class="text-sm font-semibold text-red-900 mb-2">Confidential Security Records</h4>
                        <p class="text-xs text-red-700 leading-relaxed">
                            All maritime security records are classified as confidential. Access is restricted to authorized personnel only.
                            Unauthorized disclosure may compromise vessel security and violate ISPS Code requirements.
                        </p>
                    </div>
                </div>
            </div>

            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <h4 class="text-sm font-semibold text-gray-900 mb-3">Confidentiality Levels</h4>
                <div class="space-y-2">
                    @php
                        $confidentialityCounts = [
                            'classified' => $complianceRecords->where('confidentiality_level', 'classified')->count(),
                            'restricted' => $complianceRecords->where('confidentiality_level', 'restricted')->count(),
                            'internal' => $complianceRecords->where('confidentiality_level', 'internal')->count(),
                            'public' => $complianceRecords->where('confidentiality_level', 'public')->count(),
                        ];
                    @endphp
                    @foreach($confidentialityCounts as $level => $count)
                        <div class="flex items-center justify-between text-xs">
                            <div class="flex items-center gap-2">
                                <div class="w-3 h-3 rounded-full
                                    {{ $level === 'classified' ? 'bg-red-500' : '' }}
                                    {{ $level === 'restricted' ? 'bg-orange-500' : '' }}
                                    {{ $level === 'internal' ? 'bg-yellow-500' : '' }}
                                    {{ $level === 'public' ? 'bg-gray-400' : '' }}">
                                </div>
                                <span class="text-gray-700 capitalize">{{ $level }}</span>
                            </div>
                            <span class="font-medium text-gray-900">{{ $count }} records</span>
                        </div>
                    @endforeach
                </div>
            </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-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                </svg>
                <span>All security records are protected and maintained in accordance with confidentiality requirements</span>
            </div>
        </div>
    </div>

    <!-- ISPS Code Compliance Records (E13-FR-01: Comply with ISPS Code) -->
    <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">ISPS Code Compliance Records</h3>
            <button onclick="openModal('addComplianceModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + New Compliance Record
            </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">Record Number</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Compliance Area</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">Status</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Assessment Date</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Assessed By</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Confidentiality</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($complianceRecords as $record)
                        <tr class="hover:bg-blue-50 transition-colors">
                            <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $record->record_number }}</td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $record->compliance_area }}</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('_', ' ', ucwords($record->compliance_type)) }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium
                                    {{ $record->compliance_status === 'compliant' ? 'bg-green-100 text-green-800' : '' }}
                                    {{ $record->compliance_status === 'partial_compliance' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                    {{ $record->compliance_status === 'non_compliant' ? 'bg-red-100 text-red-800' : '' }}
                                    {{ $record->compliance_status === 'under_review' ? 'bg-blue-100 text-blue-800' : '' }}">
                                    {{ str_replace('_', ' ', ucfirst($record->compliance_status)) }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600">
                                {{ $record->assessment_date ? $record->assessment_date->format('d M Y') : 'N/A' }}
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $record->assessed_by }}</td>
                            <td class="py-4 px-6 text-sm">
                                <div class="flex items-center gap-2">
                                    <svg class="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                                    </svg>
                                    <span class="px-2 py-1 rounded text-xs font-medium
                                        {{ $record->confidentiality_level === 'classified' ? 'bg-red-100 text-red-800' : '' }}
                                        {{ $record->confidentiality_level === 'restricted' ? 'bg-orange-100 text-orange-800' : '' }}
                                        {{ $record->confidentiality_level === 'internal' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                        {{ $record->confidentiality_level === 'public' ? 'bg-gray-100 text-gray-800' : '' }}">
                                        {{ ucfirst($record->confidentiality_level) }}
                                    </span>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="py-8 text-center text-gray-500">No compliance records found</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Security Risk Assessments (E13-FR-02: Manage security risk assessments) -->
    <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">Security Risk Assessments (Manage & Mitigate)</h3>
            <button onclick="openModal('addRiskAssessmentModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + New Risk Assessment
            </button>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-gray-300">
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Assessment Number</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Threat Description</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Threat Type</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Likelihood</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Consequence</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Risk Rating</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">Responsible Officer</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($riskAssessments as $assessment)
                        <tr class="hover:bg-blue-50 transition-colors">
                            <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $assessment->assessment_number }}</td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ Str::limit($assessment->threat_description, 40) }}</td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800">
                                    {{ str_replace('_', ' ', ucwords($assessment->threat_type)) }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium
                                    {{ in_array($assessment->likelihood, ['very_high', 'high']) ? 'bg-red-100 text-red-800' : '' }}
                                    {{ $assessment->likelihood === 'medium' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                    {{ in_array($assessment->likelihood, ['low', 'very_low']) ? 'bg-green-100 text-green-800' : '' }}">
                                    {{ str_replace('_', ' ', ucfirst($assessment->likelihood)) }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium
                                    {{ in_array($assessment->consequence, ['catastrophic', 'major']) ? 'bg-red-100 text-red-800' : '' }}
                                    {{ $assessment->consequence === 'moderate' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                    {{ in_array($assessment->consequence, ['minor', 'negligible']) ? 'bg-green-100 text-green-800' : '' }}">
                                    {{ ucfirst($assessment->consequence) }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium
                                    {{ $assessment->risk_rating === 'Extreme' ? 'bg-red-100 text-red-800' : '' }}
                                    {{ $assessment->risk_rating === 'High' ? 'bg-orange-100 text-orange-800' : '' }}
                                    {{ $assessment->risk_rating === 'Medium' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                    {{ $assessment->risk_rating === 'Low' ? 'bg-green-100 text-green-800' : '' }}">
                                    {{ $assessment->risk_rating }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium
                                    {{ $assessment->status === 'closed' ? 'bg-gray-100 text-gray-800' : '' }}
                                    {{ $assessment->status === 'mitigated' ? 'bg-green-100 text-green-800' : '' }}
                                    {{ $assessment->status === 'accepted' ? 'bg-blue-100 text-blue-800' : '' }}
                                    {{ $assessment->status === 'under_assessment' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                    {{ $assessment->status === 'identified' ? 'bg-orange-100 text-orange-800' : '' }}">
                                    {{ str_replace('_', ' ', ucfirst($assessment->status)) }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $assessment->responsible_officer }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="py-8 text-center text-gray-500">No risk assessments found</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Security Drills (E13-FR-03: Conduct security drills) -->
    <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">Security Drills (Conduct & Evaluate)</h3>
            <button onclick="openModal('addDrillModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + Schedule Security Drill
            </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">Drill 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">Drill 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">Coordinator</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">Performance</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">ISPS Compliant</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($drills as $drill)
                        <tr class="hover:bg-blue-50 transition-colors">
                            <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $drill->drill_number }}</td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ Str::limit($drill->drill_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('_', ' ', ucwords($drill->drill_type)) }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600">
                                {{ $drill->scheduled_date ? $drill->scheduled_date->format('d M Y H:i') : 'N/A' }}
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $drill->drill_coordinator }}</td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium
                                    {{ $drill->status === 'completed' ? 'bg-green-100 text-green-800' : '' }}
                                    {{ $drill->status === 'in_progress' ? 'bg-blue-100 text-blue-800' : '' }}
                                    {{ $drill->status === 'scheduled' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                    {{ $drill->status === 'cancelled' ? 'bg-red-100 text-red-800' : '' }}">
                                    {{ ucfirst($drill->status) }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm">
                                @if($drill->performance_rating)
                                    <span class="px-2 py-1 rounded text-xs font-medium
                                        {{ $drill->performance_rating === 'excellent' ? 'bg-green-100 text-green-800' : '' }}
                                        {{ $drill->performance_rating === 'good' ? 'bg-blue-100 text-blue-800' : '' }}
                                        {{ $drill->performance_rating === 'satisfactory' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                        {{ $drill->performance_rating === 'needs_improvement' ? 'bg-orange-100 text-orange-800' : '' }}
                                        {{ $drill->performance_rating === 'unsatisfactory' ? 'bg-red-100 text-red-800' : '' }}">
                                        {{ str_replace('_', ' ', ucfirst($drill->performance_rating)) }}
                                    </span>
                                @else
                                    <span class="text-gray-400 text-xs">Not rated</span>
                                @endif
                            </td>
                            <td class="py-4 px-6 text-sm">
                                <div class="flex items-center gap-2">
                                    @if($drill->isps_compliant)
                                        <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                        </svg>
                                    @endif
                                    <span class="px-2 py-1 rounded text-xs font-medium {{ $drill->isps_compliant ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                        {{ $drill->isps_compliant ? 'Yes' : 'No' }}
                                    </span>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="py-8 text-center text-gray-500">No security drills found</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </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