@extends('layouts.app')

@section('title', 'Element 1: Leadership and Safety Management System')

@section('content')
    <div class="mb-8">
        <h2 class="text-2xl font-semibold text-black mb-2">Element 1: Leadership and Safety Management System</h2>
        <p class="text-gray-600">SMS documentation, leadership roles, safety policies, commitment tracking, and objectives communication</p>
    </div>

    <!-- SMS & Leadership 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">SMS & Leadership Dashboard</h3>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
            <!-- SMS Documents (E1-FR-01) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <p class="text-3xl font-bold text-blue-600">{{ $smsDocuments->count() }}</p>
                <p class="text-xs text-gray-500 mt-1">SMS documents defined</p>
            </div>

            <!-- Leadership Roles (E1-FR-02) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <p class="text-3xl font-bold text-indigo-600">{{ $leadershipRoles->count() }}</p>
                <p class="text-xs text-gray-500 mt-1">Leadership roles defined</p>
            </div>

            <!-- Approved Policies (E1-FR-03) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                @php
                    $approvedPolicies = $safetyPolicies->where('approval_status', 'approved')->count();
                @endphp
                <p class="text-3xl font-bold text-green-600">{{ $approvedPolicies }}</p>
                <p class="text-xs text-gray-500 mt-1">Approved safety policies</p>
            </div>

            <!-- Leadership Commitments (E1-FR-04) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <p class="text-3xl font-bold text-purple-600">{{ $leadershipCommitments->count() }}</p>
                <p class="text-xs text-gray-500 mt-1">Commitment records</p>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <!-- Safety Objectives (E1-FR-05) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <p class="text-3xl font-bold text-cyan-600">{{ $safetyObjectives->count() }}</p>
                <p class="text-xs text-gray-500 mt-1">Safety objectives defined</p>
            </div>

            <!-- Objectives Communicated (E1-FR-05) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                @php
                    $communicatedObjectives = $safetyObjectives->where('communication_status', 'communicated')->count();
                    $communicationRate = $safetyObjectives->count() > 0 ? round(($communicatedObjectives / $safetyObjectives->count()) * 100) : 0;
                @endphp
                <p class="text-3xl font-bold text-orange-600">{{ $communicationRate }}%</p>
                <p class="text-xs text-gray-500 mt-1">Objectives communicated</p>
            </div>

            <!-- Accessible Documents (E1-NFR-01) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                @php
                    $accessibleDocs = $smsDocuments->where('access_level', 'public')->count();
                @endphp
                <p class="text-3xl font-bold text-teal-600">{{ $accessibleDocs }}</p>
                <p class="text-xs text-gray-500 mt-1">Accessible SMS documents</p>
            </div>

            <!-- Audit Trail Records (E1-NFR-02) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <p class="text-3xl font-bold text-red-600">{{ $leadershipAuditTrail->count() }}</p>
                <p class="text-xs text-gray-500 mt-1">Accountability audit logs</p>
            </div>
        </div>
    </div>

    <!-- Accessible SMS Documents (E1-NFR-01: SMS documents shall be accessible) -->
    <div class="bg-white border border-gray-300 rounded-lg p-6 mb-8">
        <div class="bg-gradient-to-r from-green-600 to-green-500 text-white px-6 py-3 -mx-6 -mt-6 mb-6 rounded-t-lg">
            <h3 class="text-lg font-semibold">SMS Document Accessibility</h3>
        </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-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 class="font-medium">All SMS documents are accessible to authorized personnel with appropriate access controls</span>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            @php
                $publicDocs = $smsDocuments->where('access_level', 'public')->count();
                $restrictedDocs = $smsDocuments->where('access_level', 'restricted')->count();
                $confidentialDocs = $smsDocuments->where('access_level', 'confidential')->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">{{ $publicDocs }}</p>
                <p class="text-xs text-green-700 mt-1">Public Access</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">{{ $restrictedDocs }}</p>
                <p class="text-xs text-yellow-700 mt-1">Restricted Access</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">{{ $confidentialDocs }}</p>
                <p class="text-xs text-red-700 mt-1">Confidential</p>
            </div>
        </div>
    </div>

    <!-- Leadership Accountability Audit Trail (E1-NFR-02: Leadership accountability shall be auditable) -->
    <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">Leadership Accountability Audit Trail</h3>
        </div>

        <div class="mb-4 bg-purple-50 border border-purple-200 rounded-lg p-3">
            <div class="flex items-center gap-2 text-sm text-purple-800">
                <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
                </svg>
                <span class="font-medium">All leadership actions and decisions are logged with complete audit trail (who, what, when)</span>
            </div>
        </div>

        @if($leadershipAuditTrail->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">Date</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Leader</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Action Type</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Description</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Impact</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @foreach($leadershipAuditTrail->sortByDesc('action_date')->take(10) as $audit)
                            <tr class="hover:bg-blue-50 transition-colors">
                                <td class="py-4 px-6 text-sm text-gray-900">{{ $audit->action_date->format('M d, Y H:i') }}</td>
                                <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $audit->leader_name }}</td>
                                <td class="py-4 px-6 text-sm">
                                    <span class="px-2 py-1 rounded text-xs font-medium
                                        {{ $audit->action_type === 'policy_approval' ? 'bg-green-100 text-green-800' : '' }}
                                        {{ $audit->action_type === 'commitment' ? 'bg-blue-100 text-blue-800' : '' }}
                                        {{ $audit->action_type === 'decision' ? 'bg-purple-100 text-purple-800' : '' }}
                                        {{ $audit->action_type === 'review' ? 'bg-orange-100 text-orange-800' : '' }}">
                                        {{ ucfirst(str_replace('_', ' ', $audit->action_type)) }}
                                    </span>
                                </td>
                                <td class="py-4 px-6 text-sm text-gray-600">{{ $audit->description }}</td>
                                <td class="py-4 px-6 text-sm text-gray-600">{{ $audit->impact ?? 'N/A' }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <p class="text-center text-gray-500 py-4">No audit trail records yet</p>
        @endif
    </div>

    <!-- SMS Documentation (E1-FR-01: Define and document Safety Management System (SMS)) -->
    <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">Safety Management System (SMS) Documentation</h3>
            <button onclick="openModal('addSMSDocumentModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + Add SMS Document
            </button>
        </div>

        @if($smsDocuments->count() > 0)
            <div class="overflow-x-auto">
                <table class="w-full table-fixed">
                    <thead>
                        <tr class="border-b border-gray-300 bg-gray-50">
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700 w-1/3">Document Name</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700 w-1/6">Category</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700 w-1/12">Version</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700 w-1/6">Effective Date</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700 w-1/6">Access Level</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700 w-1/12">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @foreach($smsDocuments as $document)
                            <tr class="hover:bg-blue-50 transition-colors">
                                <td class="py-4 px-4 text-sm font-medium text-gray-900 break-words">{{ $document->document_name }}</td>
                                <td class="py-4 px-4 text-sm text-gray-600 break-words">{{ $document->category }}</td>
                                <td class="py-4 px-4 text-sm text-gray-600">{{ $document->version }}</td>
                                <td class="py-4 px-4 text-sm text-gray-600 whitespace-nowrap">{{ $document->effective_date->format('M d, Y') }}</td>
                                <td class="py-4 px-4">
                                    <span class="inline-block px-3 py-1 rounded text-xs font-medium
                                        {{ $document->access_level === 'public' ? 'bg-green-100 text-green-800' : '' }}
                                        {{ $document->access_level === 'restricted' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                        {{ $document->access_level === 'confidential' ? 'bg-red-100 text-red-800' : '' }}">
                                        {{ ucfirst($document->access_level) }}
                                    </span>
                                </td>
                                <td class="py-4 px-4">
                                    <span class="inline-block px-3 py-1 rounded text-xs font-medium
                                        {{ $document->status === 'active' ? 'bg-green-100 text-green-800' : '' }}
                                        {{ $document->status === 'draft' ? 'bg-gray-100 text-gray-800' : '' }}
                                        {{ $document->status === 'archived' ? 'bg-orange-100 text-orange-800' : '' }}">
                                        {{ ucfirst($document->status) }}
                                    </span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <p class="text-center text-gray-500 py-8">No SMS documents defined yet</p>
        @endif
    </div>

    <!-- Leadership Roles & Responsibilities (E1-FR-02: Define leadership roles and responsibilities) -->
    <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">Leadership Roles & Responsibilities</h3>
            <button onclick="openModal('addLeadershipRoleModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + Define Role
            </button>
        </div>

        @if($leadershipRoles->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                @foreach($leadershipRoles as $role)
                    <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                        <div class="flex items-start justify-between mb-3">
                            <div>
                                <h4 class="font-semibold text-gray-900">{{ $role->role_title }}</h4>
                                <p class="text-sm text-gray-600">{{ $role->person_name }}</p>
                            </div>
                            <span class="px-2 py-1 rounded text-xs font-medium
                                {{ $role->level === 'executive' ? 'bg-purple-100 text-purple-800' : '' }}
                                {{ $role->level === 'senior' ? 'bg-blue-100 text-blue-800' : '' }}
                                {{ $role->level === 'mid' ? 'bg-green-100 text-green-800' : '' }}">
                                {{ ucfirst($role->level) }} Level
                            </span>
                        </div>
                        <div class="text-sm text-gray-700 mb-3">
                            <p class="font-medium text-gray-800 mb-1">Responsibilities:</p>
                            <ul class="list-disc list-inside space-y-1 text-xs">
                                @foreach(explode("\n", $role->responsibilities) as $responsibility)
                                    @if(trim($responsibility))
                                        <li>{{ trim($responsibility) }}</li>
                                    @endif
                                @endforeach
                            </ul>
                        </div>
                        <div class="text-xs text-gray-600">
                            <span class="font-medium">Accountable for:</span> {{ $role->accountable_for }}
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <p class="text-center text-gray-500 py-8">No leadership roles defined yet</p>
        @endif
    </div>

    <!-- Safety Policies (E1-FR-03: Document safety policies approved by top management) -->
    <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">Safety Policies (Top Management Approved)</h3>
            <button onclick="openModal('addSafetyPolicyModal')" class="bg-white text-green-600 hover:bg-green-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + Add Policy
            </button>
        </div>

        @if($safetyPolicies->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">Policy Name</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Policy Number</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Approved By</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Approval Date</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Review Date</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">
                        @foreach($safetyPolicies as $policy)
                            <tr class="hover:bg-blue-50 transition-colors">
                                <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $policy->policy_name }}</td>
                                <td class="py-4 px-6 text-sm text-gray-600">{{ $policy->policy_number }}</td>
                                <td class="py-4 px-6 text-sm text-gray-900">{{ $policy->approved_by }}</td>
                                <td class="py-4 px-6 text-sm text-gray-600">{{ $policy->approval_date ? $policy->approval_date->format('M d, Y') : 'Pending' }}</td>
                                <td class="py-4 px-6 text-sm text-gray-600">{{ $policy->next_review_date ? $policy->next_review_date->format('M d, Y') : 'N/A' }}</td>
                                <td class="py-4 px-6 text-sm">
                                    <span class="px-2 py-1 rounded text-xs font-medium
                                        {{ $policy->approval_status === 'approved' ? 'bg-green-100 text-green-800' : '' }}
                                        {{ $policy->approval_status === 'pending' ? 'bg-orange-100 text-orange-800' : '' }}
                                        {{ $policy->approval_status === 'draft' ? 'bg-gray-100 text-gray-800' : '' }}">
                                        {{ ucfirst($policy->approval_status) }}
                                    </span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <p class="text-center text-gray-500 py-8">No safety policies documented yet</p>
        @endif
    </div>

    <!-- Leadership Commitment (E1-FR-04: Ensure leadership commitment to safety culture) -->
    <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">Leadership Commitment to Safety Culture</h3>
            <button onclick="openModal('addLeadershipCommitmentModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + Record Commitment
            </button>
        </div>

        <!-- Commitment Statistics -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
            @php
                $activeCommitments = $leadershipCommitments->where('status', 'active')->count();
                $completedCommitments = $leadershipCommitments->where('status', 'completed')->count();
                $inProgressCommitments = $leadershipCommitments->where('status', 'in_progress')->count();
                $avgCompletionRate = $leadershipCommitments->count() > 0 ? round(($completedCommitments / $leadershipCommitments->count()) * 100) : 0;
            @endphp
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-blue-600">{{ $activeCommitments }}</p>
                <p class="text-xs text-gray-500 mt-1">Active Commitments</p>
            </div>
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-orange-600">{{ $inProgressCommitments }}</p>
                <p class="text-xs text-gray-500 mt-1">In Progress</p>
            </div>
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-green-600">{{ $completedCommitments }}</p>
                <p class="text-xs text-gray-500 mt-1">Completed</p>
            </div>
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-purple-600">{{ $avgCompletionRate }}%</p>
                <p class="text-xs text-gray-500 mt-1">Completion Rate</p>
            </div>
        </div>

        @if($leadershipCommitments->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">Commitment</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Leader</th>
                            <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">Target Date</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">
                        @foreach($leadershipCommitments->sortByDesc('commitment_date') as $commitment)
                            <tr class="hover:bg-blue-50 transition-colors">
                                <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $commitment->commitment_description }}</td>
                                <td class="py-4 px-6 text-sm text-gray-600">{{ $commitment->leader_name }}</td>
                                <td class="py-4 px-6 text-sm text-gray-600">{{ $commitment->commitment_date->format('M d, Y') }}</td>
                                <td class="py-4 px-6 text-sm text-gray-600">{{ $commitment->target_date ? $commitment->target_date->format('M d, Y') : 'N/A' }}</td>
                                <td class="py-4 px-6 text-sm">
                                    <span class="px-2 py-1 rounded text-xs font-medium
                                        {{ $commitment->status === 'active' ? 'bg-blue-100 text-blue-800' : '' }}
                                        {{ $commitment->status === 'in_progress' ? 'bg-orange-100 text-orange-800' : '' }}
                                        {{ $commitment->status === 'completed' ? 'bg-green-100 text-green-800' : '' }}">
                                        {{ ucfirst(str_replace('_', ' ', $commitment->status)) }}
                                    </span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <p class="text-center text-gray-500 py-8">No leadership commitments recorded yet</p>
        @endif
    </div>

    <!-- Safety Objectives Communication (E1-FR-05: Communicate safety objectives to all personnel) -->
    <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">Safety Objectives Communication</h3>
            <button onclick="openModal('addSafetyObjectiveModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + Add Objective
            </button>
        </div>

        <!-- Communication Status -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
            @php
                $communicated = $safetyObjectives->where('communication_status', 'communicated')->count();
                $pending = $safetyObjectives->where('communication_status', 'pending')->count();
                $draft = $safetyObjectives->where('communication_status', 'draft')->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">{{ $communicated }}</p>
                <p class="text-xs text-green-700 mt-1">Communicated</p>
            </div>
            <div class="bg-orange-50 border border-orange-200 rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-orange-600">{{ $pending }}</p>
                <p class="text-xs text-orange-700 mt-1">Pending Communication</p>
            </div>
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-gray-600">{{ $draft }}</p>
                <p class="text-xs text-gray-700 mt-1">Draft</p>
            </div>
        </div>

        @if($safetyObjectives->count() > 0)
            <div class="space-y-4">
                @foreach($safetyObjectives as $objective)
                    <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                        <div class="flex items-start justify-between mb-3">
                            <div class="flex-1">
                                <h4 class="font-semibold text-gray-900 mb-1">{{ $objective->objective_title }}</h4>
                                <p class="text-sm text-gray-700">{{ $objective->objective_description }}</p>
                            </div>
                            <span class="px-2 py-1 rounded text-xs font-medium ml-4
                                {{ $objective->communication_status === 'communicated' ? 'bg-green-100 text-green-800' : '' }}
                                {{ $objective->communication_status === 'pending' ? 'bg-orange-100 text-orange-800' : '' }}
                                {{ $objective->communication_status === 'draft' ? 'bg-gray-100 text-gray-800' : '' }}">
                                {{ ucfirst($objective->communication_status) }}
                            </span>
                        </div>
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-3 text-xs text-gray-600">
                            <div>
                                <span class="font-medium">Target Date:</span> {{ $objective->target_date ? $objective->target_date->format('M d, Y') : 'N/A' }}
                            </div>
                            <div>
                                <span class="font-medium">Owner:</span> {{ $objective->objective_owner }}
                            </div>
                            <div>
                                <span class="font-medium">Target Audience:</span> {{ $objective->target_audience }}
                            </div>
                            @if($objective->communication_date)
                                <div>
                                    <span class="font-medium">Communicated:</span> {{ $objective->communication_date->format('M d, Y') }}
                                </div>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <p class="text-center text-gray-500 py-8">No safety objectives defined yet</p>
        @endif
    </div>

    <!-- OVMSA Related Documents -->
    <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">OVMSA Related Documents</h3>
            <button onclick="openModal('uploadDocumentModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + Upload Document
            </button>
        </div>

        @if($documents->count() > 0)
            <div class="space-y-3">
                @foreach($documents as $doc)
                    <div class="flex items-center justify-between p-4 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                        <div class="flex items-center gap-4 flex-1">
                            <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                            </svg>
                            <div class="flex-1">
                                <h4 class="font-medium text-gray-900">{{ $doc->name }}</h4>
                                <div class="flex items-center gap-4 mt-1 text-sm text-gray-600">
                                    <span>{{ $doc->type }}</span>
                                    <span>•</span>
                                    <span>Version {{ $doc->version }}</span>
                                    <span>•</span>
                                    <span>{{ $doc->document_date->format('M d, Y') }}</span>
                                </div>
                            </div>
                            <div>
                                <span class="px-2 py-1 text-xs rounded-md
                                    {{ $doc->status === 'approved' ? 'bg-green-100 text-green-800' : '' }}
                                    {{ $doc->status === 'draft' ? 'bg-gray-100 text-gray-800' : '' }}
                                    {{ $doc->status === 'review' ? 'bg-orange-100 text-orange-800' : '' }}">
                                    {{ ucfirst($doc->status) }}
                                </span>
                            </div>
                        </div>
                        <div class="flex items-center gap-2 ml-4">
                            <a href="{{ route('documents.view', $doc) }}" target="_blank" class="p-2 hover:bg-blue-50 text-gray-700 hover:text-blue-600 rounded-md" title="View">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                </svg>
                            </a>
                            <a href="{{ route('documents.download', $doc) }}" class="p-2 hover:bg-blue-50 text-gray-700 hover:text-blue-600 rounded-md" title="Download">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <p class="text-center text-gray-500 py-8">No OVMSA documents uploaded yet</p>
        @endif
    </div>

    <!-- Modals -->
    <!-- Add SMS Document Modal -->
    <div id="addSMSDocumentModal" 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 SMS Document</h3>
                <button onclick="closeModal('addSMSDocumentModal')" 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('sms-documents.store') }}" method="POST" enctype="multipart/form-data">
                @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">Document Name *</label>
                        <input type="text" name="document_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>
                        <select name="category" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="">Select Category</option>
                            <option value="Policy">Policy</option>
                            <option value="Procedure">Procedure</option>
                            <option value="Plan">Plan</option>
                            <option value="Manual">Manual</option>
                            <option value="Form">Form</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Version *</label>
                        <input type="text" name="version" required placeholder="e.g., 1.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">Effective Date *</label>
                        <input type="date" name="effective_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">Access Level *</label>
                        <select name="access_level" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="public">Public</option>
                            <option value="restricted">Restricted</option>
                            <option value="confidential">Confidential</option>
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">File</label>
                        <input type="file" name="file" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                </div>
                <div class="flex justify-end gap-3 mt-6">
                    <button type="button" onclick="closeModal('addSMSDocumentModal')" 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 Document
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Add Leadership Role Modal -->
    <div id="addLeadershipRoleModal" class="modal hidden">
        <div class="modal-content bg-white rounded-lg p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-semibold text-gray-900">Define Leadership Role</h3>
                <button onclick="closeModal('addLeadershipRoleModal')" 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('leadership-roles.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">Role Title *</label>
                        <input type="text" name="role_title" required placeholder="e.g., Managing Director" 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">Person Name *</label>
                        <input type="text" name="person_name" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Leadership Level *</label>
                        <select name="level" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="">Select Level</option>
                            <option value="executive">Executive</option>
                            <option value="senior">Senior</option>
                            <option value="mid">Mid-level</option>
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Responsibilities * (one per line)</label>
                        <textarea name="responsibilities" rows="4" required placeholder="Enter each responsibility on a new line" 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">Accountable For *</label>
                        <input type="text" name="accountable_for" required placeholder="e.g., Overall safety performance" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                </div>
                <div class="flex justify-end gap-3 mt-6">
                    <button type="button" onclick="closeModal('addLeadershipRoleModal')" class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
                        Cancel
                    </button>
                    <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors">
                        Define Role
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Add Safety Policy Modal -->
    <div id="addSafetyPolicyModal" 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 Safety Policy</h3>
                <button onclick="closeModal('addSafetyPolicyModal')" 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('safety-policies.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">Policy Name *</label>
                        <input type="text" name="policy_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">Policy Number *</label>
                        <input type="text" name="policy_number" required placeholder="e.g., POL-001" 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">Approved By (Top Management) *</label>
                        <input type="text" name="approved_by" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Approval Date</label>
                        <input type="date" name="approval_date" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Next Review Date</label>
                        <input type="date" name="next_review_date" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Policy Statement</label>
                        <textarea name="policy_statement" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
                    </div>
                </div>
                <div class="flex justify-end gap-3 mt-6">
                    <button type="button" onclick="closeModal('addSafetyPolicyModal')" 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-green-600 hover:bg-green-700 rounded-lg transition-colors">
                        Add Policy
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Add Leadership Commitment Modal -->
    <div id="addLeadershipCommitmentModal" 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 Leadership Commitment</h3>
                <button onclick="closeModal('addLeadershipCommitmentModal')" 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('leadership-commitments.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">Commitment Description *</label>
                        <textarea name="commitment_description" rows="3" 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"></textarea>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Leader Name *</label>
                        <input type="text" name="leader_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">Commitment Date *</label>
                        <input type="date" name="commitment_date" required value="{{ date('Y-m-d') }}" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Target Date</label>
                        <input type="date" name="target_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="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="active">Active</option>
                            <option value="in_progress">In Progress</option>
                            <option value="completed">Completed</option>
                        </select>
                    </div>
                </div>
                <div class="flex justify-end gap-3 mt-6">
                    <button type="button" onclick="closeModal('addLeadershipCommitmentModal')" 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 Commitment
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Add Safety Objective Modal -->
    <div id="addSafetyObjectiveModal" 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 Safety Objective</h3>
                <button onclick="closeModal('addSafetyObjectiveModal')" 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('safety-objectives.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">Objective Title *</label>
                        <input type="text" name="objective_title" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Objective Description *</label>
                        <textarea name="objective_description" rows="3" 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"></textarea>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Objective Owner *</label>
                        <input type="text" name="objective_owner" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Target Audience *</label>
                        <input type="text" name="target_audience" required placeholder="e.g., All Personnel" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Target Date</label>
                        <input type="date" name="target_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="block text-sm font-medium text-gray-700 mb-2">Communication Status *</label>
                        <select name="communication_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="draft">Draft</option>
                            <option value="pending">Pending</option>
                            <option value="communicated">Communicated</option>
                        </select>
                    </div>
                </div>
                <div class="flex justify-end gap-3 mt-6">
                    <button type="button" onclick="closeModal('addSafetyObjectiveModal')" 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 Objective
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Upload Document Modal -->
    <div id="uploadDocumentModal" 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">Upload OVMSA Document</h3>
                <button onclick="closeModal('uploadDocumentModal')" 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('documents.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="element_id" value="1">
                <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">Document 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., Policy, Procedure" 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">Version *</label>
                        <input type="text" name="version" required placeholder="e.g., 1.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">Document Date *</label>
                        <input type="date" name="document_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">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="draft">Draft</option>
                            <option value="review">Review</option>
                            <option value="approved">Approved</option>
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">File *</label>
                        <input type="file" name="file" 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">
                        <p class="text-xs text-gray-500 mt-1">Max file size: 10MB</p>
                    </div>
                </div>
                <div class="flex justify-end gap-3 mt-6">
                    <button type="button" onclick="closeModal('uploadDocumentModal')" 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">
                        Upload
                    </button>
                </div>
            </form>
        </div>
    </div>

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

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

        // Close modal when clicking outside
        window.onclick = function(event) {
            if (event.target.classList.contains('modal')) {
                event.target.classList.add('hidden');
            }
        }
    </script>

    <style>
        .modal {
            position: fixed;
            z-index: 50;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-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