@extends('admin.layouts.master')

@section('title', 'LynX Admin - God\'s Eye')
@section('page-title', '👁️ God\'s Eye™ Safety Center')

@section('content')
    <div class="stats-grid">
        <div class="stat-card animate-in" style="border-left: 2px solid var(--warning);">
            <div class="stat-header">
                <div>
                    <div class="value" style="color: var(--warning);">{{ $deviations->count() }}</div>
                    <div class="label">Active Route Deviations</div>
                </div>
                <span class="icon">⚠️</span>
            </div>
            @if($deviations->count() > 0)
                <div style="margin-top: 8px;">
                    <span class="glowing-dot warning"></span>
                    <span style="font-size: 11px; color: var(--text-muted); margin-left: 4px;">Requires attention</span>
                </div>
            @endif
        </div>
        <div class="stat-card animate-in animate-in-delay-1" style="border-left: 2px solid var(--danger);">
            <div class="stat-header">
                <div>
                    <div class="value" style="color: var(--danger);">{{ $alerts->count() }}</div>
                    <div class="label">Active SOS Alerts</div>
                </div>
                <span class="icon">🆘</span>
            </div>
        </div>
        <div class="stat-card animate-in animate-in-delay-2" style="border-left: 2px solid var(--success);">
            <div class="stat-header">
                <div>
                    <div class="value" style="color: var(--success);">{{ $resolvedHistory->count() }}</div>
                    <div class="label">Resolved This Month</div>
                </div>
                <span class="icon">✅</span>
            </div>
        </div>
    </div>

    <div class="grid-2">
        <!-- Active Deviations -->
        <div class="glass-card animate-in">
            <div class="flex-between mb-16">
                <h3 style="font-size: 18px; font-weight: 600;">⚠️ Active Route Deviations</h3>
                @if($deviations->count() > 0)
                    <span class="glowing-dot warning"></span>
                @endif
            </div>
            @forelse($deviations as $deviation)
                <div style="padding: 16px; background: rgba(255,149,0,0.05); border-radius: 12px; margin-bottom: 12px; border: 1px solid rgba(255,149,0,0.15); transition: all 0.3s;">
                    <div class="flex-between">
                        <div>
                            <strong style="color: var(--warning);">Deviation #{{ $deviation->id }}</strong>
                            <span class="status-badge {{ $deviation->status === 'escalated' ? 'status-danger' : 'status-pending' }}">
                                {{ ucfirst($deviation->status) }}
                            </span>
                        </div>
                        <span style="font-size: 12px; color: var(--text-muted);">{{ $deviation->detected_at?->diffForHumans() }}</span>
                    </div>
                    <div style="margin-top: 10px; font-size: 13px; color: var(--text-muted); display: grid; gap: 6px;">
                        <div>🚗 Driver deviated <strong style="color: var(--warning);">{{ number_format($deviation->deviation_distance_meters, 0) }}m</strong> from route</div>
                        <div>👤 User: <strong>{{ $deviation->user?->full_name ?? 'Unknown' }}</strong></div>
                        <div>🚗 Driver: <strong>{{ $deviation->driver?->full_name ?? 'Unknown' }}</strong></div>
                        <div style="margin-top: 4px; font-size: 12px;">
                            <span style="color: var(--success);">📍 Expected:</span> {{ number_format($deviation->expected_lat, 4) }}, {{ number_format($deviation->expected_lng, 4) }}
                            <br>
                            <span style="color: var(--danger);">📍 Actual:</span> {{ number_format($deviation->actual_lat, 4) }}, {{ number_format($deviation->actual_lng, 4) }}
                        </div>
                    </div>
                    <div style="margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap;">
                        @if($deviation->status === 'detected')
                            <form action="{{ route('admin.gods-eye.acknowledge', $deviation->id) }}" method="POST" style="display: inline;">
                                @csrf
                                <button type="submit" class="btn btn-success btn-sm">✅ Acknowledge</button>
                            </form>
                            <form action="{{ route('admin.gods-eye.escalate', $deviation->id) }}" method="POST" style="display: inline;">
                                @csrf
                                <button type="submit" class="btn btn-danger btn-sm">🚨 Escalate Now</button>
                            </form>
                        @endif
                        <a href="https://www.google.com/maps/dir/{{ $deviation->expected_lat }},{{ $deviation->expected_lng }}/{{ $deviation->actual_lat }},{{ $deviation->actual_lng }}" target="_blank" class="btn btn-outline btn-sm">📍 View Route</a>
                    </div>
                </div>
            @empty
                <div style="text-align: center; padding: 48px 24px;">
                    <div style="font-size: 48px; margin-bottom: 16px;">✅</div>
                    <p style="color: var(--text-muted); font-size: 15px;">No active deviations. All rides on track!</p>
                    <p style="color: var(--text-dim); font-size: 13px; margin-top: 4px;">God's Eye is monitoring in real-time</p>
                </div>
            @endforelse
        </div>

        <!-- Active SOS Alerts -->
        <div class="glass-card animate-in animate-in-delay-1">
            <div class="flex-between mb-16">
                <h3 style="font-size: 18px; font-weight: 600;">🆘 Active SOS Alerts</h3>
                @if($alerts->count() > 0)
                    <span class="glowing-dot danger"></span>
                @endif
            </div>
            @forelse($alerts as $alert)
                <div style="padding: 16px; background: rgba(255,59,48,0.05); border-radius: 12px; margin-bottom: 12px; border: 1px solid rgba(255,59,48,0.15);">
                    <div class="flex-between">
                        <div>
                            <strong style="color: var(--danger);">{{ strtoupper($alert->type) }}</strong>
                            <span class="status-badge status-danger">ACTIVE</span>
                        </div>
                        <span style="font-size: 12px; color: var(--text-muted);">{{ $alert->created_at->diffForHumans() }}</span>
                    </div>
                    <div style="margin-top: 10px; font-size: 13px; color: var(--text-muted); display: grid; gap: 4px;">
                        <div>👤 User: <strong>{{ $alert->user?->full_name ?? 'Unknown' }}</strong> ({{ $alert->user?->phone ?? 'No phone' }})</div>
                        @if($alert->ride)
                            <div>🛵 Ride: <strong>#{{ substr($alert->ride_id, 0, 10) }}</strong></div>
                        @endif
                        <div>📍 Location: {{ number_format($alert->latitude, 4) }}, {{ number_format($alert->longitude, 4) }}</div>
                        @if($alert->description)
                            <div style="margin-top: 4px; padding: 8px 12px; background: rgba(255,59,48,0.08); border-radius: 8px; font-style: italic; font-size: 12px;">
                                "{{ $alert->description }}"
                            </div>
                        @endif
                    </div>
                    <div style="margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap;">
                        <form action="{{ route('admin.gods-eye.resolve', $alert->id) }}" method="POST" style="display: inline;">
                            @csrf
                            <input type="hidden" name="resolution" value="Responded to emergency">
                            <button type="submit" class="btn btn-success btn-sm">✅ Mark Resolved</button>
                        </form>
                        <a href="https://www.google.com/maps?q={{ $alert->latitude }},{{ $alert->longitude }}" target="_blank" class="btn btn-outline btn-sm">📍 View on Maps</a>
                        <a href="tel:{{ $alert->user?->phone ?? '' }}" class="btn btn-primary btn-sm">📞 Call User</a>
                    </div>
                </div>
            @empty
                <div style="text-align: center; padding: 48px 24px;">
                    <div style="font-size: 48px; margin-bottom: 16px;">✅</div>
                    <p style="color: var(--text-muted); font-size: 15px;">No active SOS alerts.</p>
                </div>
            @endforelse
        </div>
    </div>

    <!-- Resolved History -->
    <div class="glass-card animate-in animate-in-delay-2 mt-24">
        <div class="flex-between mb-16">
            <h3 style="font-size: 18px; font-weight: 600;">📋 Resolved History</h3>
            <span style="font-size: 12px; color: var(--text-muted);">Last 20 records</span>
        </div>
        <div class="table-container" style="padding: 0; border: none; background: transparent;">
            <table>
                <thead>
                    <tr><th>ID</th><th>Type</th><th>User</th><th>Status</th><th>Deviation</th><th>Detected</th><th>Resolved</th></tr>
                </thead>
                <tbody>
                    @forelse($resolvedHistory as $deviation)
                    <tr>
                        <td style="color: var(--primary); font-weight: 600;">#{{ $deviation->id }}</td>
                        <td>
                            <span class="status-badge {{ $deviation->status === 'user_acknowledged' ? 'status-active' : 'status-info' }}">
                                {{ str_replace('_', ' ', ucfirst($deviation->status)) }}
                            </span>
                        </td>
                        <td>{{ $deviation->user?->full_name ?? 'N/A' }}</td>
                        <td style="font-size: 13px; color: var(--text-muted);">{{ $deviation->status }}</td>
                        <td style="font-weight: 600;">{{ number_format($deviation->deviation_distance_meters, 0) }}m</td>
                        <td style="font-size: 12px; color: var(--text-muted);">{{ $deviation->detected_at?->diffForHumans() }}</td>
                        <td style="font-size: 12px; color: var(--text-muted);">{{ $deviation->acknowledged_at?->diffForHumans() ?? $deviation->updated_at->diffForHumans() }}</td>
                    </tr>
                    @empty
                    <tr><td colspan="7" style="text-align: center; padding: 32px; color: var(--text-dim);">No resolved deviations yet</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection