@extends('layouts.app')

@section('title', 'Element 11: Emergency Preparedness and Contingency Planning')

@section('content')
    <div class="mb-8">
        <h2 class="text-2xl font-semibold text-black mb-2">Element 11: Emergency Preparedness and Contingency Planning</h2>
        <p class="text-gray-600">Define emergency response plans, conduct drills, and maintain escalation contacts</p>
    </div>

    <!-- Emergency Readiness Dashboard (E11-NFR-01: Periodically Tested) -->
    <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">Emergency Readiness Dashboard</h3>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
            <!-- Total Response Plans -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-sm text-gray-600">Response Plans</span>
                    <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 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>
                <p class="text-3xl font-bold text-gray-900">{{ $responsePlans->count() }}</p>
                <p class="text-xs text-gray-500 mt-1">
                    {{ $responsePlans->where('approval_status', 'approved')->count() }} approved
                </p>
            </div>

            <!-- Drill Completion Rate -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-sm text-gray-600">Drills This Year</span>
                    <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                @php
                    $drillsThisYear = $drills->where('status', 'completed')->filter(function($drill) {
                        return $drill->scheduled_date && $drill->scheduled_date->year == date('Y');
                    })->count();
                @endphp
                <p class="text-3xl font-bold text-green-600">{{ $drillsThisYear }}</p>
                <p class="text-xs text-gray-500 mt-1">Completed drills</p>
            </div>

            <!-- Upcoming Drills -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-sm text-gray-600">Upcoming Drills</span>
                    <svg class="w-5 h-5 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <p class="text-3xl font-bold text-orange-600">
                    {{ $drills->whereIn('status', ['scheduled'])->count() }}
                </p>
                <p class="text-xs text-gray-500 mt-1">Scheduled drills</p>
            </div>

            <!-- Emergency Contacts -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-sm text-gray-600">Active Contacts</span>
                    <svg class="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                    </svg>
                </div>
                <p class="text-3xl font-bold text-purple-600">{{ $contacts->count() }}</p>
                <p class="text-xs text-gray-500 mt-1">Escalation contacts</p>
            </div>
        </div>

        <!-- Drill Performance & Testing Schedule -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Drill Performance Trends -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <h4 class="text-sm font-semibold text-gray-900 mb-3">Drill Performance Trends</h4>
                <div class="space-y-2">
                    @php
                        $performanceRatings = [
                            'excellent' => ['label' => 'Excellent', 'color' => 'green'],
                            'good' => ['label' => 'Good', 'color' => 'blue'],
                            'satisfactory' => ['label' => 'Satisfactory', 'color' => 'yellow'],
                            'needs_improvement' => ['label' => 'Needs Improvement', 'color' => 'orange'],
                            'unsatisfactory' => ['label' => 'Unsatisfactory', 'color' => 'red']
                        ];
                        $completedDrills = $drills->where('status', 'completed')->whereNotNull('performance_rating');
                        $totalRated = max($completedDrills->count(), 1);
                    @endphp
                    @foreach($performanceRatings as $rating => $info)
                    @php
                        $count = $completedDrills->where('performance_rating', $rating)->count();
                        $percentage = ($count / $totalRated) * 100;
                    @endphp
                    <div class="flex justify-between items-center">
                        <span class="text-xs text-gray-600">{{ $info['label'] }}</span>
                        <div class="flex items-center gap-2">
                            <div class="w-32 bg-gray-200 rounded-full h-2">
                                <div class="bg-{{ $info['color'] }}-500 h-2 rounded-full" style="width: {{ $percentage }}%"></div>
                            </div>
                            <span class="text-xs font-medium text-gray-900 w-8 text-right">{{ $count }}</span>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            <!-- Testing Schedule Status -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <h4 class="text-sm font-semibold text-gray-900 mb-3">Periodic Testing Status</h4>
                <div class="space-y-3">
                    @php
                        $now = now();
                        $thisQuarter = $drills->where('status', 'completed')->filter(function($drill) use ($now) {
                            return $drill->scheduled_date && $drill->scheduled_date->isCurrentQuarter();
                        })->count();
                        $lastQuarter = $drills->where('status', 'completed')->filter(function($drill) use ($now) {
                            return $drill->scheduled_date && $drill->scheduled_date->between($now->copy()->subQuarter(), $now->copy()->subQuarter()->endOfQuarter());
                        })->count();
                    @endphp
                    <div class="flex justify-between items-center">
                        <span class="text-xs text-gray-600">This Quarter</span>
                        <span class="text-xs font-medium text-green-600">{{ $thisQuarter }} drills completed</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-xs text-gray-600">Last Quarter</span>
                        <span class="text-xs font-medium text-blue-600">{{ $lastQuarter }} drills completed</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-xs text-gray-600">Next Scheduled</span>
                        @php
                            $nextDrill = $drills->where('status', 'scheduled')->sortBy('scheduled_date')->first();
                        @endphp
                        @if($nextDrill)
                            <span class="text-xs font-medium text-orange-600">
                                {{ $nextDrill->scheduled_date->format('d M Y') }}
                            </span>
                        @else
                            <span class="text-xs text-gray-400">No drills scheduled</span>
                        @endif
                    </div>
                    <div class="mt-3 pt-3 border-t border-gray-200">
                        <div class="flex items-center gap-2 text-xs text-gray-600">
                            <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            Emergency readiness tested quarterly
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- E11-FR-01: Define Emergency Response Plans -->
    <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">Emergency Response Plans</h3>
            <button onclick="openModal('addResponsePlanModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + New Response Plan
            </button>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-gray-300">
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Plan #</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Plan Title</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Emergency Type</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Responsible Person</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Approval Status</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Version</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($responsePlans as $plan)
                    <tr class="border-b border-gray-200 hover:bg-blue-50 transition-colors">
                        <td class="px-6 py-4 text-sm font-medium text-gray-900">{{ $plan->plan_number }}</td>
                        <td class="px-6 py-4 text-sm text-gray-600 font-medium">{{ $plan->plan_title }}</td>
                        <td class="px-6 py-4 text-sm text-gray-600">
                            <span class="px-2 py-1 text-xs font-medium rounded-full bg-red-100 text-red-700">
                                {{ $plan->emergency_type }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-600">{{ $plan->responsible_person }}</td>
                        <td class="px-6 py-4">
                            <span class="px-2 py-1 text-xs font-medium rounded-full
                                @if($plan->approval_status === 'approved') bg-green-500 text-white
                                @elseif($plan->approval_status === 'pending_approval') bg-yellow-500 text-white
                                @elseif($plan->approval_status === 'under_revision') bg-blue-500 text-white
                                @else bg-gray-500 text-white @endif">
                                {{ ucfirst(str_replace('_', ' ', $plan->approval_status)) }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-600">
                            <span class="font-mono text-xs">{{ $plan->version }}</span>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="px-6 py-8 text-center text-gray-600">
                            No emergency response plans found.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- E11-FR-02: Support Drills and Exercises -->
    <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">Emergency Drills and Exercises</h3>
            <button onclick="openModal('addDrillModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + New Drill
            </button>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-gray-300">
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Drill #</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Drill Title</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Drill Type</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Scheduled Date</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Participants</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Status</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Performance</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($drills as $drill)
                    <tr class="border-b border-gray-200 hover:bg-blue-50 transition-colors">
                        <td class="px-6 py-4 text-sm font-medium text-gray-900">{{ $drill->drill_number }}</td>
                        <td class="px-6 py-4 text-sm text-gray-600 font-medium">{{ $drill->drill_title }}</td>
                        <td class="px-6 py-4 text-sm text-gray-600">
                            <span class="px-2 py-1 text-xs font-medium rounded-full bg-purple-100 text-purple-700">
                                {{ $drill->drill_type }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-600">
                            {{ $drill->scheduled_date ? $drill->scheduled_date->format('d M Y H:i') : 'N/A' }}
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-600">
                            @if($drill->participants_actual)
                                <span class="font-medium">{{ $drill->participants_actual }}</span>/{{ $drill->participants_expected }}
                            @else
                                <span class="text-gray-400">Target: {{ $drill->participants_expected }}</span>
                            @endif
                        </td>
                        <td class="px-6 py-4">
                            <span class="px-2 py-1 text-xs font-medium rounded-full
                                @if($drill->status === 'completed') bg-green-500 text-white
                                @elseif($drill->status === 'in_progress') bg-blue-500 text-white
                                @elseif($drill->status === 'scheduled') bg-yellow-500 text-white
                                @else bg-red-500 text-white @endif">
                                {{ ucfirst(str_replace('_', ' ', $drill->status)) }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-sm">
                            @if($drill->performance_rating)
                                <span class="px-2 py-1 text-xs font-medium rounded-full
                                    @if($drill->performance_rating === 'excellent') bg-green-500 text-white
                                    @elseif($drill->performance_rating === 'good') bg-blue-500 text-white
                                    @elseif($drill->performance_rating === 'satisfactory') bg-yellow-500 text-white
                                    @elseif($drill->performance_rating === 'needs_improvement') bg-orange-500 text-white
                                    @else bg-red-500 text-white @endif">
                                    {{ ucfirst(str_replace('_', ' ', $drill->performance_rating)) }}
                                </span>
                            @else
                                <span class="text-xs text-gray-500">Not rated</span>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="px-6 py-8 text-center text-gray-600">
                            No emergency drills found.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- E11-FR-03: Maintain Escalation Contacts -->
    <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">Emergency Escalation Contacts</h3>
            <button onclick="openModal('addContactModal')" class="bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                + New Contact
            </button>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-gray-300">
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Contact Type</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Organization</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Contact Person</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Phone</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Availability</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Priority</th>
                        <th class="text-left py-3 px-6 text-sm font-semibold text-gray-700">Last Verified</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($contacts as $contact)
                    <tr class="border-b border-gray-200 hover:bg-blue-50 transition-colors">
                        <td class="px-6 py-4 text-sm font-medium text-gray-900">{{ $contact->contact_type }}</td>
                        <td class="px-6 py-4 text-sm text-gray-600">{{ $contact->organization_name }}</td>
                        <td class="px-6 py-4 text-sm text-gray-600">{{ $contact->contact_person }}</td>
                        <td class="px-6 py-4 text-sm text-gray-600">
                            <div class="flex items-center gap-1">
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                                </svg>
                                <span class="font-mono text-xs">{{ $contact->phone_primary }}</span>
                            </div>
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-600">{{ $contact->availability }}</td>
                        <td class="px-6 py-4">
                            <span class="px-2 py-1 text-xs font-medium rounded-full
                                @if($contact->priority_level === 'critical') bg-red-500 text-white
                                @elseif($contact->priority_level === 'high') bg-orange-500 text-white
                                @elseif($contact->priority_level === 'medium') bg-yellow-500 text-white
                                @else bg-green-500 text-white @endif">
                                {{ ucfirst($contact->priority_level) }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-sm">
                            @if($contact->last_verified_date)
                                <span class="text-xs text-green-600">
                                    {{ $contact->last_verified_date->diffForHumans() }}
                                </span>
                            @else
                                <span class="text-xs text-gray-500">Needs verification</span>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="px-6 py-8 text-center text-gray-600">
                            No emergency contacts found.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- New Response Plan Modal -->
    <div id="addResponsePlanModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-lg w-full max-w-4xl max-h-[90vh] overflow-y-auto">
            <div class="sticky top-0 bg-gradient-to-r from-blue-600 to-blue-500 text-white p-6 flex items-center justify-between rounded-t-lg">
                <h3 class="text-xl font-semibold">New Emergency Response Plan</h3>
                <button onclick="closeModal('addResponsePlanModal')" class="text-white hover:text-blue-100 transition-colors">
                    <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('emergency-response-plans.store') }}" method="POST" class="p-6">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Plan Number *</label>
                        <input type="text" name="plan_number" required class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Plan Title *</label>
                        <input type="text" name="plan_title" required class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Emergency Type *</label>
                        <input type="text" name="emergency_type" required class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Responsible Person *</label>
                        <input type="text" name="responsible_person" required class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Description *</label>
                        <textarea name="description" required rows="3" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Response Procedures *</label>
                        <textarea name="response_procedures" required rows="4" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Required Resources</label>
                        <textarea name="required_resources" rows="3" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Remarks</label>
                        <textarea name="remarks" rows="2" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                    </div>
                </div>

                <div class="flex justify-end gap-3 mt-6">
                    <button type="button" onclick="closeModal('addResponsePlanModal')" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                        Cancel
                    </button>
                    <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors">
                        Create Response Plan
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- New Drill Modal -->
    <div id="addDrillModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-lg w-full max-w-4xl max-h-[90vh] overflow-y-auto">
            <div class="sticky top-0 bg-gradient-to-r from-blue-600 to-blue-500 text-white p-6 flex items-center justify-between rounded-t-lg">
                <h3 class="text-xl font-semibold">New Emergency Drill</h3>
                <button onclick="closeModal('addDrillModal')" class="text-white hover:text-blue-100 transition-colors">
                    <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('emergency-drills.store') }}" method="POST" class="p-6">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Drill Number *</label>
                        <input type="text" name="drill_number" required class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Drill Title *</label>
                        <input type="text" name="drill_title" required class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Drill Type *</label>
                        <input type="text" name="drill_type" required class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Scheduled Date *</label>
                        <input type="datetime-local" name="scheduled_date" required class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Expected Participants *</label>
                        <input type="number" name="participants_expected" required min="1" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Response Plan</label>
                        <select name="emergency_response_plan_id" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">-- Select Plan --</option>
                            @foreach($responsePlans as $plan)
                                <option value="{{ $plan->id }}">{{ $plan->plan_number }} - {{ $plan->plan_title }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Drill Scenario *</label>
                        <textarea name="drill_scenario" required rows="3" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Objectives</label>
                        <textarea name="objectives" rows="3" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Remarks</label>
                        <textarea name="remarks" rows="2" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                    </div>
                </div>

                <div class="flex justify-end gap-3 mt-6">
                    <button type="button" onclick="closeModal('addDrillModal')" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                        Cancel
                    </button>
                    <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors">
                        Schedule Drill
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- New Contact Modal -->
    <div id="addContactModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-lg w-full max-w-4xl max-h-[90vh] overflow-y-auto">
            <div class="sticky top-0 bg-gradient-to-r from-blue-600 to-blue-500 text-white p-6 flex items-center justify-between rounded-t-lg">
                <h3 class="text-xl font-semibold">New Emergency Contact</h3>
                <button onclick="closeModal('addContactModal')" class="text-white hover:text-blue-100 transition-colors">
                    <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('emergency-contacts.store') }}" method="POST" class="p-6">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Contact Type *</label>
                        <input type="text" name="contact_type" required class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Organization Name *</label>
                        <input type="text" name="organization_name" required class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Contact Person *</label>
                        <input type="text" name="contact_person" required class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Position Title</label>
                        <input type="text" name="position_title" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Primary Phone *</label>
                        <input type="text" name="phone_primary" required class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Secondary Phone</label>
                        <input type="text" name="phone_secondary" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Email</label>
                        <input type="email" name="email" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Availability *</label>
                        <input type="text" name="availability" required class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Response Time</label>
                        <input type="text" name="response_time" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Service Area</label>
                        <input type="text" name="service_area" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Priority Level *</label>
                        <select name="priority_level" required class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="critical">Critical</option>
                            <option value="high">High</option>
                            <option value="medium" selected>Medium</option>
                            <option value="low">Low</option>
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Address</label>
                        <textarea name="address" rows="2" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Remarks</label>
                        <textarea name="remarks" rows="2" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                    </div>
                </div>

                <div class="flex justify-end gap-3 mt-6">
                    <button type="button" onclick="closeModal('addContactModal')" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                        Cancel
                    </button>
                    <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors">
                        Create Contact
                    </button>
                </div>
            </form>
        </div>
    </div>

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

        function closeModal(modalId) {
            document.getElementById(modalId).classList.add('hidden');
            document.body.style.overflow = 'auto';
        }

        // Close modals on ESC key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                ['addResponsePlanModal', 'addDrillModal', 'addContactModal'].forEach(modalId => {
                    closeModal(modalId);
                });
            }
        });

        // Close modal when clicking outside
        ['addResponsePlanModal', 'addDrillModal', 'addContactModal'].forEach(modalId => {
            document.getElementById(modalId).addEventListener('click', function(e) {
                if (e.target === this) {
                    closeModal(modalId);
                }
            });
        });
    </script>
@endsection