@extends('layouts.app')

@section('title', 'Blasting Control')
@section('subtitle', 'Monitor and control blasting operations')

@section('content')
<div class="max-w-7xl mx-auto py-4 sm:py-6 px-4 sm:px-6 lg:px-8">
    <!-- Statistics Cards -->
    <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 lg:gap-6 mb-6 sm:mb-8">
        <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border-l-4 border-red-500">
            <div class="p-4 sm:p-6">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-red-100 text-red-600">
                        <i class="fas fa-bomb text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-600">Total Operations</p>
                        <p class="text-2xl font-bold text-gray-900">{{ $stats['total_operations'] }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border-l-4 border-yellow-500">
            <div class="p-4 sm:p-6">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
                        <i class="fas fa-play-circle text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-600">Active</p>
                        <p class="text-2xl font-bold text-gray-900">{{ $stats['active_operations'] }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border-l-4 border-green-500">
            <div class="p-4 sm:p-6">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-green-100 text-green-600">
                        <i class="fas fa-check-circle text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-600">Completed</p>
                        <p class="text-2xl font-bold text-gray-900">{{ $stats['completed_operations'] }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border-l-4 border-orange-500">
            <div class="p-4 sm:p-6">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-orange-100 text-orange-600">
                        <i class="fas fa-exclamation-triangle text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-600">Emergency Overrides</p>
                        <p class="text-2xl font-bold text-gray-900">{{ $stats['emergency_overrides'] }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Safety Status Banner -->
    <div class="mb-6 bg-gradient-to-r from-green-500 to-emerald-600 rounded-xl shadow-lg p-6 text-white">
        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-shield-alt text-2xl"></i>
                </div>
                <div>
                    <h3 class="text-xl font-bold">Safety Systems Operational</h3>
                    <p class="text-green-100">All safety interlocks are active and monitoring</p>
                </div>
            </div>
            <div class="text-right">
                <div class="text-3xl font-bold">100%</div>
                <div class="text-green-100">Safety Score</div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-all duration-300 border-l-4 border-blue-500">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900">Start New Operation</h3>
                    <p class="text-sm text-gray-600">Begin a new blasting sequence</p>
                </div>
                <button onclick="openStartOperationModal()" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors">
                    <i class="fas fa-play mr-2"></i>Start
                </button>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-all duration-300 border-l-4 border-yellow-500">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900">Emergency Override</h3>
                    <p class="text-sm text-gray-600">Emergency system override</p>
                </div>
                <button onclick="showEmergencyOverrideModal()" class="bg-yellow-500 text-white px-4 py-2 rounded-lg hover:bg-yellow-600 transition-colors">
                    <i class="fas fa-exclamation-triangle mr-2"></i>Override
                </button>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-all duration-300 border-l-4 border-green-500">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900">System Check</h3>
                    <p class="text-sm text-gray-600">Run safety system diagnostics</p>
                </div>
                <button onclick="runSystemCheck()" class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition-colors">
                    <i class="fas fa-check mr-2"></i>Check
                </button>
            </div>
        </div>
    </div>

    <!-- Operations Table -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
            <h3 class="text-lg font-medium text-gray-900">Blasting Operations</h3>
        </div>
        
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Operation</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Safety Officer</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Supervisor</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Personnel</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @forelse($operations as $operation)
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div>
                                    <div class="text-sm font-medium text-gray-900">{{ $operation->operation_code }}</div>
                                    <div class="text-sm text-gray-500">{{ $operation->blast_zone }}</div>
                                    <div class="text-xs text-gray-400">{{ $operation->created_at->format('M d, Y H:i') }}</div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @if($operation->safetyOfficer)
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center mr-3">
                                            <span class="text-white text-xs font-semibold">{{ $operation->safetyOfficer->initials }}</span>
                                        </div>
                                        <div>
                                            <div class="text-sm font-medium text-gray-900">{{ $operation->safetyOfficer->full_name }}</div>
                                            <div class="text-xs text-gray-500">{{ $operation->safetyOfficer->employee_id }}</div>
                                        </div>
                                    </div>
                                @else
                                    <span class="text-gray-400">Not assigned</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @if($operation->supervisor)
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center mr-3">
                                            <span class="text-white text-xs font-semibold">{{ $operation->supervisor->initials }}</span>
                                        </div>
                                        <div>
                                            <div class="text-sm font-medium text-gray-900">{{ $operation->supervisor->full_name }}</div>
                                            <div class="text-xs text-gray-500">{{ $operation->supervisor->employee_id }}</div>
                                        </div>
                                    </div>
                                @else
                                    <span class="text-gray-400">Not assigned</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                <div class="text-center">
                                    <div class="font-medium">{{ $operation->personnel_count_underground ?? 0 }}</div>
                                    <div class="text-xs text-gray-500">underground</div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full 
                                    {{ $operation->status === 'active' ? 'bg-yellow-100 text-yellow-800' : 
                                       ($operation->status === 'completed' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800') }}">
                                    {{ ucfirst($operation->status) }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <div class="flex space-x-2">
                                    <button class="text-blue-600 hover:text-blue-900" title="View Details">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    
                                    <!-- Approval Actions -->
                                    <a href="{{ route('safety.blasting.approval', $operation->operation_code) }}" 
                                       class="text-purple-600 hover:text-purple-900" title="Manage Approvals">
                                        <i class="fas fa-clipboard-check"></i>
                                    </a>
                                    
                                    @if($operation->status === 'initiated')
                                        <!-- Request Approvals Button -->
                                        <button onclick="requestApprovals('{{ $operation->operation_code }}')" 
                                                class="text-orange-600 hover:text-orange-900" title="Request Approvals">
                                            <i class="fas fa-hand-paper"></i>
                                        </button>
                                    @endif
                                    
                                    @if($operation->status === 'ready_to_execute')
                                        <!-- Execute Blast Button -->
                                        <form method="POST" action="{{ route('safety.blasting.execute', $operation->operation_code) }}" 
                                              class="inline" onsubmit="return confirm('Are you sure you want to execute this blast? This action cannot be undone!')">
                                            @csrf
                                            <button type="submit" class="text-red-600 hover:text-red-900" title="Execute Blast">
                                                <i class="fas fa-bomb"></i>
                                            </button>
                                        </form>
                                    @endif
                                    
                                    @if($operation->status === 'active')
                                        <button class="text-green-600 hover:text-green-900" title="Complete">
                                            <i class="fas fa-check"></i>
                                        </button>
                                        <button class="text-red-600 hover:text-red-900" title="Cancel">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-6 py-12 text-center text-gray-500">
                                <div class="flex flex-col items-center">
                                    <i class="fas fa-bomb text-4xl text-gray-300 mb-4"></i>
                                    <p class="text-lg font-medium">No blasting operations found</p>
                                    <p class="text-sm">Start a new operation to begin monitoring.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        @if($operations->hasPages())
            <div class="px-6 py-4 border-t border-gray-200 bg-gray-50">
                <div class="flex items-center justify-between">
                    <div class="text-sm text-gray-700">
                        Showing {{ $operations->firstItem() }} to {{ $operations->lastItem() }} of {{ $operations->total() }} results
                    </div>
                    <div class="flex space-x-2">
                        @if($operations->previousPageUrl())
                            <a href="{{ $operations->previousPageUrl() }}" class="px-3 py-1 text-sm text-gray-500 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors">
                                Previous
                            </a>
                        @endif
                        
                        @foreach($operations->getUrlRange(1, $operations->lastPage()) as $page => $url)
                            @if($page == $operations->currentPage())
                                <span class="px-3 py-1 text-sm text-white bg-red-500 rounded-md">{{ $page }}</span>
                            @else
                                <a href="{{ $url }}" class="px-3 py-1 text-sm text-gray-500 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors">{{ $page }}</a>
                            @endif
                        @endforeach
                        
                        @if($operations->nextPageUrl())
                            <a href="{{ $operations->nextPageUrl() }}" class="px-3 py-1 text-sm text-gray-500 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors">
                                Next
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        @endif
    </div>

    <!-- Safety Monitoring Panel -->
    <div class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-green-50">
                <h3 class="text-lg font-medium text-gray-900">
                    <i class="fas fa-users text-green-600 mr-2"></i>
                    Personnel Status
                </h3>
            </div>
            <div class="p-6">
                <div class="space-y-4">
                    <div class="flex items-center justify-between p-3 {{ $undergroundCount > 0 ? 'bg-red-50' : 'bg-green-50' }} rounded-lg">
                        <div class="flex items-center">
                            <div class="w-3 h-3 {{ $undergroundCount > 0 ? 'bg-red-500' : 'bg-green-500' }} rounded-full mr-3"></div>
                            <span class="text-sm font-medium text-gray-900">{{ $undergroundCount > 0 ? 'Personnel Underground' : 'All Clear' }}</span>
                        </div>
                        <span class="text-sm {{ $undergroundCount > 0 ? 'text-red-600' : 'text-gray-600' }}">{{ $undergroundCount }} underground</span>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-yellow-50 rounded-lg">
                        <div class="flex items-center">
                            <div class="w-3 h-3 bg-yellow-500 rounded-full mr-3"></div>
                            <span class="text-sm font-medium text-gray-900">Warning Zone</span>
                        </div>
                        <span class="text-sm text-gray-600">Safe distance</span>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-red-50 rounded-lg">
                        <div class="flex items-center">
                            <div class="w-3 h-3 bg-red-500 rounded-full mr-3"></div>
                            <span class="text-sm font-medium text-gray-900">Danger Zone</span>
                        </div>
                        <span class="text-sm text-gray-600">Restricted</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-blue-50">
                <h3 class="text-lg font-medium text-gray-900">
                    <i class="fas fa-broadcast-tower text-blue-600 mr-2"></i>
                    Communication Status
                </h3>
            </div>
            <div class="p-6">
                <div class="space-y-4">
                    <div class="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                        <div class="flex items-center">
                            <div class="w-3 h-3 bg-green-500 rounded-full mr-3"></div>
                            <span class="text-sm font-medium text-gray-900">Radio System</span>
                        </div>
                        <span class="text-sm text-green-600">Operational</span>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                        <div class="flex items-center">
                            <div class="w-3 h-3 bg-green-500 rounded-full mr-3"></div>
                            <span class="text-sm font-medium text-gray-900">Emergency Alerts</span>
                        </div>
                        <span class="text-sm text-green-600">Active</span>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                        <div class="flex items-center">
                            <div class="w-3 h-3 bg-green-500 rounded-full mr-3"></div>
                            <span class="text-sm font-medium text-gray-900">GPS Tracking</span>
                        </div>
                        <span class="text-sm text-green-600">Online</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Start Operation Modal -->
<div id="startOperationModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Start New Blasting Operation</h3>
            <form id="startOperationForm">
                @csrf
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Blast Zone</label>
                    <select name="blast_zone" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-red-500 focus:border-red-500">
                        <option value="">Select Blast Zone</option>
                        <option value="Zone A - North Pit">Zone A - North Pit</option>
                        <option value="Zone B - South Pit">Zone B - South Pit</option>
                        <option value="Zone C - East Face">Zone C - East Face</option>
                        <option value="Zone D - West Face">Zone D - West Face</option>
                        <option value="Zone E - Central Area">Zone E - Central Area</option>
                    </select>
                </div>
                <div class="mb-4">
                    <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:outline-none focus:ring-red-500 focus:border-red-500" placeholder="Optional notes about this operation..."></textarea>
                </div>
                <div class="flex justify-end space-x-2">
                    <button type="button" onclick="closeStartOperationModal()" class="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors">
                        Cancel
                    </button>
                    <button type="submit" class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors">
                        Start Operation
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

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

    function closeStartOperationModal() {
        document.getElementById('startOperationModal').classList.add('hidden');
        document.getElementById('startOperationForm').reset();
    }

    // Handle form submission
    document.getElementById('startOperationForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        
        fetch('{{ route("safety.blasting-operations.create") }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Blasting operation started successfully!');
                closeStartOperationModal();
                location.reload(); // Refresh page to show new operation
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while starting the operation.');
        });
    });

    // Close modal when clicking outside
    window.onclick = function(event) {
        const modal = document.getElementById('startOperationModal');
        if (event.target === modal) {
            closeStartOperationModal();
        }
    }

    // Request Approvals Function
    function requestApprovals(operationId) {
        if (confirm('Request approvals for this blasting operation? This will notify all required approvers.')) {
            window.location.href = `/safety/blasting/${operationId}/approval`;
        }
    }

    // Check Approval Status
    function checkApprovalStatus(operationId) {
        fetch(`/safety/blasting/${operationId}/approval-status`)
            .then(response => response.json())
            .then(data => {
                console.log('Approval Status:', data);
                // Update UI based on approval status
                updateApprovalUI(operationId, data);
            })
            .catch(error => {
                console.error('Error checking approval status:', error);
            });
    }

    // Update Approval UI
    function updateApprovalUI(operationId, data) {
        const statusElement = document.querySelector(`[data-operation-id="${operationId}"] .status-badge`);
        if (statusElement) {
            if (data.ready_to_execute) {
                statusElement.className = 'inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800';
                statusElement.textContent = 'Ready to Execute';
            } else if (data.approved_count > 0) {
                statusElement.className = 'inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800';
                statusElement.textContent = `${data.approved_count}/3 Approved`;
            }
        }
    }

    // Auto-refresh approval status every 30 seconds
    setInterval(function() {
        document.querySelectorAll('[data-operation-id]').forEach(element => {
            const operationId = element.getAttribute('data-operation-id');
            if (operationId) {
                checkApprovalStatus(operationId);
            }
        });
    }, 30000);
</script>

<!-- Approval Request Modal -->
<div id="approvalModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <div class="flex items-center justify-center w-12 h-12 mx-auto bg-purple-100 rounded-full">
                <i class="fas fa-clipboard-check text-purple-600"></i>
            </div>
            <div class="mt-2 px-7 py-3">
                <h3 class="text-lg font-medium text-gray-900 text-center">Request Approvals</h3>
                <div class="mt-2 px-7 py-3">
                    <p class="text-sm text-gray-500 text-center">
                        This will create approval requests for all three required roles:
                    </p>
                    <ul class="text-sm text-gray-600 mt-2">
                        <li>• Blast Manager</li>
                        <li>• Safety Manager</li>
                        <li>• Mine Manager</li>
                    </ul>
                </div>
            </div>
            <div class="items-center px-4 py-3">
                <button id="confirmApprovalRequest" 
                        class="px-4 py-2 bg-purple-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-300">
                    Request Approvals
                </button>
                <button onclick="closeApprovalModal()" 
                        class="mt-3 px-4 py-2 bg-gray-300 text-gray-800 text-base font-medium rounded-md w-full shadow-sm hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    function closeApprovalModal() {
        document.getElementById('approvalModal').classList.add('hidden');
    }

    function showApprovalModal(operationId) {
        document.getElementById('approvalModal').classList.remove('hidden');
        document.getElementById('confirmApprovalRequest').onclick = function() {
            window.location.href = `/safety/blasting/${operationId}/approval`;
        };
    }

    // Emergency Override Functions
    function showEmergencyOverrideModal() {
        document.getElementById('emergencyOverrideModal').classList.remove('hidden');
    }

    function closeEmergencyOverrideModal() {
        document.getElementById('emergencyOverrideModal').classList.add('hidden');
        document.getElementById('emergencyOverrideForm').reset();
    }

    function executeEmergencyOverride() {
        const form = document.getElementById('emergencyOverrideForm');
        const formData = new FormData(form);
        
        // Show loading state
        const submitBtn = document.getElementById('emergencyOverrideSubmit');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Processing...';
        submitBtn.disabled = true;

        fetch('{{ route("safety.emergency-override") }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Emergency override activated successfully!');
                closeEmergencyOverrideModal();
                location.reload(); // Refresh to show updated status
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while activating emergency override.');
        })
        .finally(() => {
            // Reset button state
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        });
    }

    // System Check Functions
    function runSystemCheck() {
        const checkBtn = document.getElementById('systemCheckBtn');
        const originalText = checkBtn.innerHTML;
        checkBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Checking...';
        checkBtn.disabled = true;

        fetch('{{ route("safety.system-check") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showSystemCheckResults(data);
            } else {
                alert('System check failed: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred during system check.');
        })
        .finally(() => {
            // Reset button state
            checkBtn.innerHTML = originalText;
            checkBtn.disabled = false;
        });
    }

    function showSystemCheckResults(data) {
        const modal = document.getElementById('systemCheckModal');
        const resultsContainer = document.getElementById('systemCheckResults');
        
        // Clear previous results
        resultsContainer.innerHTML = '';
        
        // Overall status
        const statusColor = data.overall_status === 'operational' ? 'green' : 
                           data.overall_status === 'warning' ? 'yellow' : 'red';
        
        resultsContainer.innerHTML += `
            <div class="mb-4 p-4 bg-${statusColor}-50 border border-${statusColor}-200 rounded-lg">
                <h3 class="text-lg font-semibold text-${statusColor}-800 mb-2">
                    <i class="fas fa-${data.overall_status === 'operational' ? 'check-circle' : 'exclamation-triangle'} mr-2"></i>
                    Overall Status: ${data.overall_status.toUpperCase()}
                </h3>
                <p class="text-sm text-${statusColor}-700">Checked at: ${data.timestamp}</p>
            </div>
        `;
        
        // Individual checks
        Object.entries(data.checks).forEach(([checkName, result]) => {
            const checkColor = result.status ? 'green' : 'red';
            const icon = result.status ? 'check-circle' : 'times-circle';
            
            resultsContainer.innerHTML += `
                <div class="mb-3 p-3 bg-${checkColor}-50 border border-${checkColor}-200 rounded-lg">
                    <div class="flex items-center justify-between">
                        <h4 class="font-medium text-${checkColor}-800 capitalize">${checkName.replace('_', ' ')}</h4>
                        <i class="fas fa-${icon} text-${checkColor}-600"></i>
                    </div>
                    <p class="text-sm text-${checkColor}-700 mt-1">${result.message}</p>
                </div>
            `;
        });
        
        // Issues summary
        if (data.issues.length > 0) {
            resultsContainer.innerHTML += `
                <div class="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg">
                    <h4 class="font-medium text-red-800 mb-2">Issues Found:</h4>
                    <ul class="text-sm text-red-700">
                        ${data.issues.map(issue => `<li>• ${issue}</li>`).join('')}
                    </ul>
                </div>
            `;
        }
        
        modal.classList.remove('hidden');
    }

    function closeSystemCheckModal() {
        document.getElementById('systemCheckModal').classList.add('hidden');
    }
</script>

<!-- Emergency Override Modal -->
<div id="emergencyOverrideModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <div class="flex items-center justify-center w-12 h-12 mx-auto bg-red-100 rounded-full">
                <i class="fas fa-exclamation-triangle text-red-600"></i>
            </div>
            <div class="mt-2 px-7 py-3">
                <h3 class="text-lg font-medium text-gray-900 text-center">Emergency Override</h3>
                <div class="mt-2 px-7 py-3">
                    <p class="text-sm text-gray-500 text-center">
                        <strong>WARNING:</strong> This will bypass all safety checks and immediately arm the blasting system.
                    </p>
                </div>
            </div>
            
            <form id="emergencyOverrideForm" class="px-7 py-3">
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Operation Code</label>
                    <select name="operation_code" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-red-500 focus:border-red-500">
                        <option value="">Select Operation</option>
                        @foreach($operations as $operation)
                            <option value="{{ $operation->operation_code }}">{{ $operation->operation_code }} - {{ $operation->blast_zone }}</option>
                        @endforeach
                    </select>
                </div>
                
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Override Reason</label>
                    <textarea name="override_reason" required rows="3" 
                              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-red-500 focus:border-red-500"
                              placeholder="Enter emergency reason..."></textarea>
                </div>
                
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Authorization Code</label>
                    <input type="password" name="authorization_code" required
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-red-500 focus:border-red-500"
                           placeholder="Enter authorization code">
                    <p class="text-xs text-gray-500 mt-1">Use: EMERGENCY2025</p>
                </div>
            </form>
            
            <div class="items-center px-4 py-3">
                <button id="emergencyOverrideSubmit" onclick="executeEmergencyOverride()" 
                        class="px-4 py-2 bg-red-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-300">
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    Activate Override
                </button>
                <button onclick="closeEmergencyOverrideModal()" 
                        class="mt-3 px-4 py-2 bg-gray-300 text-gray-800 text-base font-medium rounded-md w-full shadow-sm hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>

<!-- System Check Results Modal -->
<div id="systemCheckModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
    <div class="relative top-10 mx-auto p-5 border w-4/5 max-w-4xl shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-900">System Check Results</h3>
                <button onclick="closeSystemCheckModal()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>
            
            <div id="systemCheckResults" class="max-h-96 overflow-y-auto">
                <!-- Results will be populated here -->
            </div>
            
            <div class="mt-4 flex justify-end">
                <button onclick="closeSystemCheckModal()" 
                        class="px-4 py-2 bg-gray-300 text-gray-800 text-base font-medium rounded-md shadow-sm hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    // Add ID to system check button for JavaScript access
    document.addEventListener('DOMContentLoaded', function() {
        const systemCheckBtn = document.querySelector('button[onclick="runSystemCheck()"]');
        if (systemCheckBtn) {
            systemCheckBtn.id = 'systemCheckBtn';
        }
    });
</script>
@endsection