@extends('layouts.app')

@section('title', 'Element 3: Recruitment, Management and Wellbeing of Vessel Personnel')

@section('content')
    <div class="mb-8">
        <h2 class="text-2xl font-semibold text-black mb-2">Element 3: Recruitment, Management and Wellbeing of Vessel Personnel</h2>
        <p class="text-gray-600">Crew recruitment, rotation, qualifications, wellbeing monitoring, training records, and STCW compliance</p>
    </div>

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

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

            <!-- Active Crew (E3-FR-02) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                @php
                    $activeCrew = $crew->where('status', 'active')->count();
                @endphp
                <p class="text-3xl font-bold text-green-600">{{ $activeCrew }}</p>
                <p class="text-xs text-gray-500 mt-1">Active crew members</p>
            </div>

            <!-- Crew on Rotation (E3-FR-02) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                @php
                    $rotationDue = $crew->filter(function($c) {
                        return $c->contract_end && $c->contract_end->lte(now()->addDays(30));
                    })->count();
                @endphp
                <p class="text-3xl font-bold text-orange-600">{{ $rotationDue }}</p>
                <p class="text-xs text-gray-500 mt-1">Rotation due (30 days)</p>
            </div>

            <!-- STCW Compliance Rate (E3-NFR-01) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                @php
                    $totalQualifications = $crew->flatMap(fn($c) => $c->qualifications)->count();
                    $stcwQualifications = $crew->flatMap(fn($c) => $c->qualifications)->where('stcw_compliant', true)->count();
                    $stcwRate = $totalQualifications > 0 ? round(($stcwQualifications / $totalQualifications) * 100) : 0;
                @endphp
                <p class="text-3xl font-bold text-purple-600">{{ $stcwRate }}%</p>
                <p class="text-xs text-gray-500 mt-1">STCW compliance rate</p>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <!-- Total Qualifications (E3-FR-01) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <p class="text-3xl font-bold text-indigo-600">{{ $totalQualifications }}</p>
                <p class="text-xs text-gray-500 mt-1">Total qualifications defined</p>
            </div>

            <!-- Training Drills (E3-FR-04) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <p class="text-3xl font-bold text-cyan-600">{{ $trainingDrills->count() }}</p>
                <p class="text-xs text-gray-500 mt-1">Training drills recorded</p>
            </div>

            <!-- Wellbeing Checks (E3-FR-03) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <p class="text-3xl font-bold text-teal-600">{{ $wellbeingChecks->count() }}</p>
                <p class="text-xs text-gray-500 mt-1">Wellbeing checks completed</p>
            </div>

            <!-- High Fatigue Alerts (E3-FR-03) -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                @php
                    $highFatigue = $wellbeingChecks->where('fatigue_level', '>=', 7)->count();
                @endphp
                <p class="text-3xl font-bold {{ $highFatigue > 0 ? 'text-red-600' : 'text-green-600' }}">{{ $highFatigue }}</p>
                <p class="text-xs text-gray-500 mt-1">High fatigue alerts</p>
            </div>
        </div>
    </div>

    <!-- STCW Compliance Monitor (E3-NFR-01: STCW compliance required) -->
    <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">STCW Compliance Monitor</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">STCW compliance is monitored for all crew members and certifications</span>
            </div>
        </div>

        @php
            $stcwCrew = $crew->filter(function($c) {
                return $c->qualifications->where('stcw_compliant', true)->count() > 0;
            });
            $nonCompliantCrew = $crew->filter(function($c) {
                return $c->qualifications->where('stcw_compliant', true)->count() === 0 && $c->qualifications->count() > 0;
            });
        @endphp

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
            <div class="bg-green-50 border border-green-200 rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-green-600">{{ $stcwCrew->count() }}</p>
                <p class="text-xs text-green-700 mt-1">STCW Compliant Crew</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">{{ $nonCompliantCrew->count() }}</p>
                <p class="text-xs text-yellow-700 mt-1">Non-Compliant Crew</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">{{ $stcwQualifications }}</p>
                <p class="text-xs text-blue-700 mt-1">STCW Certifications</p>
            </div>
        </div>

        @if($nonCompliantCrew->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">Crew Member</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Rank</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Vessel</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Total Qualifications</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">STCW Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @foreach($nonCompliantCrew as $member)
                            <tr class="hover:bg-blue-50 transition-colors">
                                <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $member->name }}</td>
                                <td class="py-4 px-6 text-sm text-gray-600">{{ $member->rank }}</td>
                                <td class="py-4 px-6 text-sm text-gray-600">{{ $member->vessel ?? 'Unassigned' }}</td>
                                <td class="py-4 px-6 text-sm text-gray-600">{{ $member->qualifications->count() }}</td>
                                <td class="py-4 px-6 text-sm">
                                    <span class="px-2 py-1 rounded text-xs font-medium bg-yellow-100 text-yellow-800">
                                        Requires STCW Certification
                                    </span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <p class="text-center text-gray-500 py-4">All crew members with qualifications are STCW compliant</p>
        @endif
    </div>

    <!-- Data Confidentiality Notice (E3-NFR-02: Crew data confidentiality required) -->
    <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">Data Confidentiality & Privacy</h3>
        </div>

        <div class="bg-purple-50 border border-purple-200 rounded-lg p-4">
            <div class="flex items-start gap-3 mb-3">
                <svg class="w-6 h-6 text-purple-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 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-purple-900 mb-2">Crew Data Confidentiality Requirements</h4>
                    <ul class="text-xs text-purple-800 space-y-1">
                        <li class="flex items-center gap-2">
                            <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            All crew personal data is encrypted and access-controlled
                        </li>
                        <li class="flex items-center gap-2">
                            <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            Sensitive information (passport, contact details) protected under confidentiality protocols
                        </li>
                        <li class="flex items-center gap-2">
                            <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            Access to crew data limited to authorized personnel only
                        </li>
                        <li class="flex items-center gap-2">
                            <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            All data access and modifications are logged for audit purposes
                        </li>
                    </ul>
                </div>
            </div>
            <div class="mt-4 pt-3 border-t border-purple-200">
                <p class="text-xs text-purple-700">
                    <span class="font-semibold">Compliance:</span> All crew data handling complies with maritime privacy regulations and GDPR where applicable
                </p>
            </div>
        </div>
    </div>

    <!-- Crew Qualification Requirements (E3-FR-01: Define crew qualification requirements) -->
    <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">Crew Qualification Requirements</h3>
            <button onclick="openModal('addQualificationRequirementModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + Define Requirement
            </button>
        </div>

        @if($qualificationRequirements->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">Rank/Position</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Required Qualification</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">STCW</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Mandatory</th>
                            <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Valid Period</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @foreach($qualificationRequirements as $requirement)
                            <tr class="hover:bg-blue-50 transition-colors">
                                <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $requirement->rank }}</td>
                                <td class="py-4 px-6 text-sm text-gray-900">{{ $requirement->qualification_name }}</td>
                                <td class="py-4 px-6 text-sm text-gray-600">{{ $requirement->qualification_type }}</td>
                                <td class="py-4 px-6 text-sm">
                                    @if($requirement->is_stcw)
                                        <span class="px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800">STCW</span>
                                    @else
                                        <span class="px-2 py-1 rounded text-xs font-medium bg-gray-100 text-gray-800">N/A</span>
                                    @endif
                                </td>
                                <td class="py-4 px-6 text-sm">
                                    @if($requirement->is_mandatory)
                                        <span class="px-2 py-1 rounded text-xs font-medium bg-red-100 text-red-800">Required</span>
                                    @else
                                        <span class="px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">Optional</span>
                                    @endif
                                </td>
                                <td class="py-4 px-6 text-sm text-gray-600">{{ $requirement->validity_years }} years</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <p class="text-center text-gray-500 py-8">No qualification requirements defined yet</p>
        @endif
    </div>

    <!-- Crew Recruitment & Rotation (E3-FR-02: Manage crew recruitment and rotation) -->
    <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">Crew Recruitment & Rotation</h3>
            <button onclick="openModal('addCrewModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + Add Crew Member
            </button>
        </div>

        <!-- Rotation Calendar -->
        <div class="mb-6 bg-gray-50 border border-gray-200 rounded-lg p-4">
            <h4 class="text-sm font-semibold text-gray-900 mb-3">Upcoming Rotations (Next 90 Days)</h4>
            @php
                $upcomingRotations = $crew->filter(function($c) {
                    return $c->contract_end && $c->contract_end->lte(now()->addDays(90)) && $c->contract_end->gte(now());
                })->sortBy('contract_end');
            @endphp

            @if($upcomingRotations->count() > 0)
                <div class="space-y-2">
                    @foreach($upcomingRotations as $member)
                        <div class="flex items-center justify-between bg-white border border-gray-300 rounded-lg p-3">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                                    <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                    </svg>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-900">{{ $member->name }}</p>
                                    <p class="text-xs text-gray-600">{{ $member->rank }} - {{ $member->vessel ?? 'Unassigned' }}</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <p class="text-sm font-semibold text-orange-600">{{ $member->contract_end->format('M d, Y') }}</p>
                                <p class="text-xs text-gray-500">{{ $member->contract_end->diffForHumans() }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <p class="text-center text-gray-500 py-4">No upcoming rotations in the next 90 days</p>
            @endif
        </div>

        <!-- Crew Roster -->
        <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">Name</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Rank</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Vessel</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Contract Period</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">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($crew as $member)
                        <tr class="hover:bg-blue-50 transition-colors">
                            <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $member->name }}</td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $member->rank }}</td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $member->vessel ?? 'Unassigned' }}</td>
                            <td class="py-4 px-6 text-sm text-gray-600">
                                @if($member->contract_start && $member->contract_end)
                                    {{ $member->contract_start->format('M d, Y') }} - {{ $member->contract_end->format('M d, Y') }}
                                @else
                                    N/A
                                @endif
                            </td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium
                                    {{ $member->status === 'active' ? 'bg-green-100 text-green-800' : '' }}
                                    {{ $member->status === 'on_leave' ? 'bg-orange-100 text-orange-800' : '' }}
                                    {{ $member->status === 'inactive' ? 'bg-gray-100 text-gray-800' : '' }}">
                                    {{ ucfirst(str_replace('_', ' ', $member->status)) }}
                                </span>
                            </td>
                            <td class="py-4 px-6">
                                <div class="flex items-center justify-end gap-2">
                                    <button onclick='openCrewProfileModal(@json($member))' class="px-3 py-1 text-xs bg-blue-100 text-blue-700 rounded hover:bg-blue-200" title="View Profile">
                                        Profile
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="py-8 text-center text-gray-500">No crew members found</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Wellbeing & Fatigue Monitoring (E3-FR-03: Monitor crew wellbeing and fatigue) -->
    <div class="bg-white border border-gray-300 rounded-lg p-6 mb-8">
        <div class="bg-gradient-to-r from-teal-600 to-teal-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">Wellbeing & Fatigue Monitoring</h3>
            <button onclick="openModal('addWellbeingCheckModal')" class="bg-white text-teal-600 hover:bg-teal-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + Record Check
            </button>
        </div>

        <!-- Fatigue Risk Dashboard -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
            @php
                $lowFatigue = $wellbeingChecks->where('fatigue_level', '<=', 3)->count();
                $moderateFatigue = $wellbeingChecks->whereBetween('fatigue_level', [4, 6])->count();
                $highFatigue = $wellbeingChecks->where('fatigue_level', '>=', 7)->count();
                $avgFatigue = $wellbeingChecks->avg('fatigue_level') ?? 0;
            @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">{{ $lowFatigue }}</p>
                <p class="text-xs text-green-700 mt-1">Low Fatigue (1-3)</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">{{ $moderateFatigue }}</p>
                <p class="text-xs text-yellow-700 mt-1">Moderate Fatigue (4-6)</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">{{ $highFatigue }}</p>
                <p class="text-xs text-red-700 mt-1">High Fatigue (7-10)</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">{{ number_format($avgFatigue, 1) }}</p>
                <p class="text-xs text-blue-700 mt-1">Average Fatigue Level</p>
            </div>
        </div>

        <!-- Recent Wellbeing Checks -->
        <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">Crew Member</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Fatigue Level</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Sleep Hours</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Health Status</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Action Required</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($wellbeingChecks->sortByDesc('check_date')->take(10) as $check)
                        <tr class="hover:bg-blue-50 transition-colors">
                            <td class="py-4 px-6 text-sm text-gray-900">{{ $check->check_date->format('M d, Y') }}</td>
                            <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $check->crew->name }}</td>
                            <td class="py-4 px-6 text-sm">
                                <div class="flex items-center gap-2">
                                    <span class="px-2 py-1 rounded text-xs font-medium
                                        {{ $check->fatigue_level <= 3 ? 'bg-green-100 text-green-800' : '' }}
                                        {{ $check->fatigue_level >= 4 && $check->fatigue_level <= 6 ? 'bg-yellow-100 text-yellow-800' : '' }}
                                        {{ $check->fatigue_level >= 7 ? 'bg-red-100 text-red-800' : '' }}">
                                        {{ $check->fatigue_level }}/10
                                    </span>
                                </div>
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $check->sleep_hours ?? 'N/A' }} hrs</td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ ucfirst($check->health_status ?? 'Good') }}</td>
                            <td class="py-4 px-6 text-sm">
                                @if($check->fatigue_level >= 7)
                                    <span class="px-2 py-1 rounded text-xs font-medium bg-red-100 text-red-800">Rest Required</span>
                                @else
                                    <span class="px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">Normal</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="py-8 text-center text-gray-500">No wellbeing checks recorded yet</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Training & Drills Records (E3-FR-04: Record training and 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">Training & Drills Records</h3>
            <button onclick="openModal('addTrainingDrillModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + Record Training/Drill
            </button>
        </div>

        <!-- Training Statistics -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
            @php
                $safetyDrills = $trainingDrills->where('drill_type', 'Safety')->count();
                $emergencyDrills = $trainingDrills->where('drill_type', 'Emergency')->count();
                $technicalTraining = $trainingDrills->where('drill_type', 'Technical')->count();
                $avgParticipation = $trainingDrills->avg('participants_count') ?? 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">{{ $safetyDrills }}</p>
                <p class="text-xs text-gray-500 mt-1">Safety Drills</p>
            </div>
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-red-600">{{ $emergencyDrills }}</p>
                <p class="text-xs text-gray-500 mt-1">Emergency Drills</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">{{ $technicalTraining }}</p>
                <p class="text-xs text-gray-500 mt-1">Technical Training</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">{{ round($avgParticipation) }}</p>
                <p class="text-xs text-gray-500 mt-1">Avg. Participants</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">Date</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Training/Drill 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">Participants</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Duration</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Conducted By</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Status</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($trainingDrills->sortByDesc('drill_date') as $drill)
                        <tr class="hover:bg-blue-50 transition-colors">
                            <td class="py-4 px-6 text-sm text-gray-900">{{ $drill->drill_date->format('M d, Y') }}</td>
                            <td class="py-4 px-6 text-sm font-medium text-gray-900">{{ $drill->drill_name }}</td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium
                                    {{ $drill->drill_type === 'Safety' ? 'bg-blue-100 text-blue-800' : '' }}
                                    {{ $drill->drill_type === 'Emergency' ? 'bg-red-100 text-red-800' : '' }}
                                    {{ $drill->drill_type === 'Technical' ? 'bg-green-100 text-green-800' : '' }}
                                    {{ $drill->drill_type === 'Medical' ? 'bg-purple-100 text-purple-800' : '' }}">
                                    {{ $drill->drill_type }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $drill->participants_count ?? 'N/A' }}</td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $drill->duration_minutes ?? 'N/A' }} min</td>
                            <td class="py-4 px-6 text-sm text-gray-600">{{ $drill->conducted_by }}</td>
                            <td class="py-4 px-6 text-sm">
                                <span class="px-2 py-1 rounded text-xs font-medium
                                    {{ $drill->completion_status === 'completed' ? 'bg-green-100 text-green-800' : '' }}
                                    {{ $drill->completion_status === 'in_progress' ? 'bg-blue-100 text-blue-800' : '' }}
                                    {{ $drill->completion_status === 'scheduled' ? 'bg-yellow-100 text-yellow-800' : '' }}">
                                    {{ ucfirst($drill->completion_status) }}
                                </span>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="py-8 text-center text-gray-500">No training or drills recorded yet</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Crew Profiles -->
    <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">Crew Profiles</h3>
        </div>

        @if($crew->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                @foreach($crew as $member)
                    <div onclick='openCrewProfileModal(@json($member))' class="bg-white border border-gray-300 rounded-lg overflow-hidden hover:shadow-lg transition-shadow cursor-pointer">
                        <div class="h-32 bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center relative">
                            <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center">
                                <svg class="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                </svg>
                            </div>
                            <div class="absolute top-2 right-2">
                                <span class="px-2 py-1 text-xs rounded-md shadow-sm
                                    {{ $member->status === 'active' ? 'bg-green-500 text-white' : '' }}
                                    {{ $member->status === 'on_leave' ? 'bg-orange-500 text-white' : '' }}
                                    {{ $member->status === 'inactive' ? 'bg-gray-500 text-white' : '' }}">
                                    {{ ucfirst(str_replace('_', ' ', $member->status)) }}
                                </span>
                            </div>
                        </div>
                        <div class="p-4">
                            <h4 class="font-semibold text-sm text-gray-900 mb-1 truncate" title="{{ $member->name }}">{{ $member->name }}</h4>
                            <p class="text-xs text-gray-600 mb-3">{{ $member->rank }}</p>
                            <div class="text-xs text-gray-600 space-y-1">
                                <div class="flex items-center gap-1">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9"></path>
                                    </svg>
                                    <span>{{ $member->nationality }}</span>
                                </div>
                                @if($member->vessel)
                                    <div class="flex items-center gap-1">
                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                                        </svg>
                                        <span>{{ $member->vessel }}</span>
                                    </div>
                                @endif
                                <div class="flex items-center gap-1">
                                    <svg class="w-3 h-3" 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>{{ $member->qualifications->count() }} Qualifications</span>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <p class="text-center text-gray-500 py-8">No crew members found</p>
        @endif
    </div>

    <!-- Add Crew Modal -->
    <div id="addCrewModal" 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 Crew Member</h3>
                <button onclick="closeModal('addCrewModal')" 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('crew.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">Full 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">Rank/Position *</label>
                        <input type="text" name="rank" required placeholder="e.g., Captain, Chief Engineer" 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">Nationality *</label>
                        <input type="text" name="nationality" 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">Passport Number *</label>
                        <input type="text" name="passport_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">Date of Birth *</label>
                        <input type="date" name="date_of_birth" 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">Email *</label>
                        <input type="email" name="email" 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">Phone</label>
                        <input type="tel" name="phone" 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">Vessel Assignment</label>
                        <input type="text" name="vessel" placeholder="e.g., MV Ocean Star" 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="on_leave">On Leave</option>
                            <option value="inactive">Inactive</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Contract Start</label>
                        <input type="date" name="contract_start" 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">Contract End</label>
                        <input type="date" name="contract_end" 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">Notes</label>
                        <textarea name="notes" 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('addCrewModal')" 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 Crew Member
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Add Qualification Requirement Modal -->
    <div id="addQualificationRequirementModal" 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 Qualification Requirement</h3>
                <button onclick="closeModal('addQualificationRequirementModal')" 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('qualification-requirements.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">Rank/Position *</label>
                        <input type="text" name="rank" required placeholder="e.g., Master, Chief Officer" 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">Qualification Name *</label>
                        <input type="text" name="qualification_name" required placeholder="e.g., STCW Basic Safety" 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">Qualification Type *</label>
                        <select name="qualification_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="STCW">STCW</option>
                            <option value="License">License</option>
                            <option value="Certificate">Certificate</option>
                            <option value="Endorsement">Endorsement</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Validity Period (Years) *</label>
                        <input type="number" name="validity_years" required min="1" max="10" value="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="flex items-center gap-2 mb-2">
                            <input type="checkbox" name="is_stcw" value="1" class="rounded">
                            <span class="text-sm font-medium text-gray-700">STCW Compliant</span>
                        </label>
                    </div>
                    <div class="md:col-span-2">
                        <label class="flex items-center gap-2">
                            <input type="checkbox" name="is_mandatory" value="1" checked class="rounded">
                            <span class="text-sm font-medium text-gray-700">Mandatory Requirement</span>
                        </label>
                    </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="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('addQualificationRequirementModal')" 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 Requirement
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Add Wellbeing Check Modal -->
    <div id="addWellbeingCheckModal" 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 Wellbeing Check</h3>
                <button onclick="closeModal('addWellbeingCheckModal')" 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('wellbeing-checks.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">Crew Member *</label>
                        <select name="crew_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 Crew Member</option>
                            @foreach($crew as $member)
                                <option value="{{ $member->id }}">{{ $member->name }} - {{ $member->rank }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Check Date *</label>
                        <input type="date" name="check_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">Fatigue Level (1-10) *</label>
                        <input type="number" name="fatigue_level" required min="1" max="10" 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">1 = No fatigue, 10 = Extreme fatigue</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Sleep Hours (Last 24h)</label>
                        <input type="number" name="sleep_hours" step="0.5" min="0" max="24" 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">Health Status *</label>
                        <select name="health_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="good">Good</option>
                            <option value="fair">Fair</option>
                            <option value="poor">Poor</option>
                            <option value="requires_attention">Requires Medical Attention</option>
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Notes/Observations</label>
                        <textarea name="notes" 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('addWellbeingCheckModal')" 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-teal-600 hover:bg-teal-700 rounded-lg transition-colors">
                        Record Check
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Add Training/Drill Modal -->
    <div id="addTrainingDrillModal" 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 Training or Drill</h3>
                <button onclick="closeModal('addTrainingDrillModal')" 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('training-drills.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">Training/Drill Name *</label>
                        <input type="text" name="drill_name" required placeholder="e.g., Fire Drill, Man Overboard" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Type *</label>
                        <select name="drill_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="Safety">Safety</option>
                            <option value="Emergency">Emergency</option>
                            <option value="Technical">Technical</option>
                            <option value="Medical">Medical</option>
                            <option value="Security">Security</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Drill Date *</label>
                        <input type="date" name="drill_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">Conducted By *</label>
                        <input type="text" name="conducted_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">Number of Participants</label>
                        <input type="number" name="participants_count" 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">Duration (minutes)</label>
                        <input type="number" name="duration_minutes" 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">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="scheduled">Scheduled</option>
                        </select>
                    </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">Observations/Notes</label>
                        <textarea name="observations" 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('addTrainingDrillModal')" 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 Training/Drill
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Crew Profile Modal -->
    <div id="crewProfileModal" class="modal hidden">
        <div class="modal-content bg-white rounded-lg p-0 max-w-3xl w-full max-h-[90vh] overflow-y-auto">
            <div class="bg-gradient-to-br from-blue-900 to-blue-700 px-6 py-6 rounded-t-lg flex items-center justify-between">
                <div class="flex items-center gap-4">
                    <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center">
                        <svg class="w-10 h-10 text-blue-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold text-white" id="profile_crew_name"></h3>
                        <p class="text-blue-200" id="profile_crew_rank"></p>
                    </div>
                </div>
                <button onclick="closeModal('crewProfileModal')" class="text-white hover:text-gray-300">
                    <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>

            <div class="p-6">
                <!-- Personal Information -->
                <div class="mb-6">
                    <h4 class="text-lg font-semibold mb-4 flex items-center gap-2">
                        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                        Personal Information
                    </h4>
                    <div class="grid grid-cols-2 gap-4 bg-gray-50 border border-gray-200 rounded-lg p-4">
                        <div>
                            <p class="text-xs text-gray-500 mb-1">Nationality</p>
                            <p class="font-medium" id="profile_nationality"></p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500 mb-1">Date of Birth</p>
                            <p class="font-medium" id="profile_dob"></p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500 mb-1">Email</p>
                            <p class="font-medium text-sm" id="profile_email"></p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500 mb-1">Phone</p>
                            <p class="font-medium" id="profile_phone"></p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500 mb-1">Status</p>
                            <p class="font-medium" id="profile_status"></p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500 mb-1">Vessel</p>
                            <p class="font-medium" id="profile_vessel"></p>
                        </div>
                    </div>
                </div>

                <!-- Contract Information -->
                <div class="mb-6">
                    <h4 class="text-lg font-semibold mb-4 flex items-center gap-2">
                        <svg class="w-5 h-5 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>
                        Contract Information
                    </h4>
                    <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                        <p class="text-xs text-gray-500 mb-1">Contract Period</p>
                        <p class="font-medium" id="profile_contract"></p>
                    </div>
                </div>

                <!-- Qualifications -->
                <div class="mb-6">
                    <h4 class="text-lg font-semibold mb-4 flex items-center gap-2">
                        <svg class="w-5 h-5 text-blue-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-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
                        </svg>
                        Qualifications
                        <span class="ml-auto px-2 py-1 text-xs rounded-sm bg-blue-100 text-blue-800" id="profile_qual_count"></span>
                    </h4>
                    <div id="profile_qualifications" class="space-y-2">
                        <!-- Qualifications will be populated here -->
                    </div>
                </div>
            </div>
        </div>
    </div>

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

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

        function openCrewProfileModal(crew) {
            document.getElementById('profile_crew_name').textContent = crew.name;
            document.getElementById('profile_crew_rank').textContent = crew.rank;
            document.getElementById('profile_nationality').textContent = crew.nationality;

            const dob = new Date(crew.date_of_birth);
            document.getElementById('profile_dob').textContent = dob.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });

            document.getElementById('profile_email').textContent = crew.email;
            document.getElementById('profile_phone').textContent = crew.phone || 'N/A';

            const statusColors = {
                'active': '<span class="px-2 py-1 text-xs rounded-sm bg-green-100 text-green-800">Active</span>',
                'on_leave': '<span class="px-2 py-1 text-xs rounded-sm bg-orange-100 text-orange-800">On Leave</span>',
                'inactive': '<span class="px-2 py-1 text-xs rounded-sm bg-gray-100 text-gray-800">Inactive</span>'
            };
            document.getElementById('profile_status').innerHTML = statusColors[crew.status] || crew.status;

            document.getElementById('profile_vessel').textContent = crew.vessel || 'Unassigned';

            let contractText = 'N/A';
            if (crew.contract_start && crew.contract_end) {
                const start = new Date(crew.contract_start);
                const end = new Date(crew.contract_end);
                contractText = start.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) + ' - ' +
                              end.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
            } else if (crew.contract_start) {
                const start = new Date(crew.contract_start);
                contractText = 'Since ' + start.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
            }
            document.getElementById('profile_contract').textContent = contractText;

            const qualCount = crew.qualifications ? crew.qualifications.length : 0;
            document.getElementById('profile_qual_count').textContent = qualCount;

            const qualContainer = document.getElementById('profile_qualifications');
            if (qualCount === 0) {
                qualContainer.innerHTML = '<p class="text-sm text-gray-500 text-center py-4">No qualifications added yet</p>';
            } else {
                qualContainer.innerHTML = crew.qualifications.map(qual => {
                    const issueDate = new Date(qual.issue_date);
                    const expiryDate = new Date(qual.expiry_date);
                    const stcwBadge = qual.stcw_compliant ?
                        '<span class="px-2 py-1 text-xs rounded-sm bg-blue-100 text-blue-800">STCW</span>' : '';

                    return `
                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                            <div class="flex items-start justify-between mb-2">
                                <div>
                                    <h5 class="font-medium">${qual.qualification_name}</h5>
                                    <p class="text-sm text-gray-600">${qual.qualification_type}</p>
                                </div>
                                ${stcwBadge}
                            </div>
                            <div class="text-xs text-gray-600 space-y-1">
                                ${qual.certificate_number ? `<p>Certificate: ${qual.certificate_number}</p>` : ''}
                                <p>Issued: ${issueDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</p>
                                <p>Expires: ${expiryDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</p>
                                ${qual.issuing_authority ? `<p>Authority: ${qual.issuing_authority}</p>` : ''}
                            </div>
                        </div>
                    `;
                }).join('');
            }

            openModal('crewProfileModal');
        }

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