@extends('layouts.app')

@section('title', 'Geofence Monitoring')
@section('no-page-header')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Real-time Geofence Monitoring</h5>
                    <div class="d-flex gap-2">
                        <button class="btn btn-outline-success" onclick="refreshMonitoring()">
                            <i class="fas fa-sync me-2"></i>Refresh
                        </button>
                        <button class="btn btn-outline-primary" onclick="toggleAutoRefresh()">
                            <i class="fas fa-clock me-2"></i>Auto Refresh: <span id="autoRefreshStatus">OFF</span>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Statistics Cards -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="card bg-primary text-white">
                                <div class="card-body">
                                    <h5 class="card-title">{{ $stats['total_geofences'] }}</h5>
                                    <p class="card-text">Total Geofences</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-success text-white">
                                <div class="card-body">
                                    <h5 class="card-title">{{ $stats['active_geofences'] }}</h5>
                                    <p class="card-text">Active Geofences</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-warning text-white">
                                <div class="card-body">
                                    <h5 class="card-title">{{ $stats['unresolved_violations'] }}</h5>
                                    <p class="card-text">Unresolved Violations</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-info text-white">
                                <div class="card-body">
                                    <h5 class="card-title">{{ $stats['today_violations'] }}</h5>
                                    <p class="card-text">Today's Violations</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Live Map and Status -->
                    <div class="row mb-4">
                        <div class="col-md-8">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">Live Geofence Map</h6>
                                </div>
                                <div class="card-body">
                                    <div id="monitoringMap" style="height: 400px; background: #f8f9fa; display: flex; align-items: center; justify-content: center;">
                                        <div class="text-center">
                                            <i class="fas fa-map-marked-alt fa-3x text-muted mb-3"></i>
                                            <p class="text-muted">Interactive map will be displayed here</p>
                                            <small class="text-muted">Integration with Google Maps API</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">Recent Violations</h6>
                                </div>
                                <div class="card-body" style="max-height: 400px; overflow-y: auto;">
                                    @forelse($recentViolations as $violation)
                                        <div class="alert alert-warning alert-sm mb-2">
                                            <div class="d-flex justify-content-between align-items-start">
                                                <div>
                                                    <strong>{{ $violation->geofence->name }}</strong><br>
                                                    <small>{{ $violation->employee->full_name }}</small><br>
                                                    <small class="text-muted">{{ $violation->violation_time->format('h:i A') }}</small>
                                                </div>
                                                <button class="btn btn-sm btn-outline-primary" onclick="viewViolation({{ $violation->id }})">
                                                    <i class="fas fa-eye"></i>
                                                </button>
                                            </div>
                                        </div>
                                    @empty
                                        <p class="text-muted text-center">No recent violations</p>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Active Employees Tracking -->
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">Active Employee Tracking</h6>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-sm">
                                            <thead>
                                                <tr>
                                                    <th>Employee</th>
                                                    <th>Last Location</th>
                                                    <th>Coordinates</th>
                                                    <th>Geofence Status</th>
                                                    <th>Last Update</th>
                                                    <th>Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse($activeEmployees as $employee)
                                                    <tr>
                                                        <td>
                                                            <div class="d-flex align-items-center">
                                                                <img src="{{ $employee->avatar }}" class="rounded-circle me-2" width="32" height="32">
                                                                <div>
                                                                    <div class="fw-semibold">{{ $employee->full_name }}</div>
                                                                    <small class="text-muted">{{ $employee->profile->employee_id ?? '' }}</small>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <span class="badge bg-info">Location Tracked</span>
                                                        </td>
                                                        <td>
                                                            <small>{{ $employee->latestLocation->latitude ?? 'N/A' }}, {{ $employee->latestLocation->longitude ?? 'N/A' }}</small>
                                                        </td>
                                                        <td>
                                                            <button class="btn btn-sm btn-outline-success" onclick="checkUserStatus({{ $employee->id }})">
                                                                <i class="fas fa-map-marker-alt"></i> Check
                                                            </button>
                                                        </td>
                                                        <td>
                                                            <small>{{ $employee->latestLocation->updated_at?->diffForHumans() ?? 'N/A' }}</small>
                                                        </td>
                                                        <td>
                                                            <div class="btn-group btn-group-sm">
                                                                <button class="btn btn-outline-primary" onclick="trackEmployee({{ $employee->id }})">
                                                                    <i class="fas fa-crosshairs"></i>
                                                                </button>
                                                                <button class="btn btn-outline-info" onclick="viewEmployee({{ $employee->id }})">
                                                                    <i class="fas fa-user"></i>
                                                                </button>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="6" class="text-center text-muted">No active employees with location data</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Test Location Modal -->
<div class="modal fade" id="testLocationModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Test Location</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="testLocationForm">
                    <div class="mb-3">
                        <label class="form-label">Latitude</label>
                        <input type="number" step="any" class="form-control" id="testLatitude" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Longitude</label>
                        <input type="number" step="any" class="form-control" id="testLongitude" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Geofence</label>
                        <select class="form-select" id="testGeofence" required>
                            <option value="">Select Geofence</option>
                            @foreach($stats['total_geofences'] > 0 ? \App\Models\Geofence::byTenant()->get() : [] as $geofence)
                                <option value="{{ $geofence->id }}">{{ $geofence->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="testLocation()">Test Point</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
let autoRefreshInterval = null;
let autoRefreshEnabled = false;

function refreshMonitoring() {
    location.reload();
}

function toggleAutoRefresh() {
    autoRefreshEnabled = !autoRefreshEnabled;
    const statusElement = document.getElementById('autoRefreshStatus');
    
    if (autoRefreshEnabled) {
        statusElement.textContent = 'ON';
        statusElement.className = 'text-success';
        autoRefreshInterval = setInterval(refreshMonitoring, 30000); // Refresh every 30 seconds
    } else {
        statusElement.textContent = 'OFF';
        statusElement.className = 'text-danger';
        if (autoRefreshInterval) {
            clearInterval(autoRefreshInterval);
            autoRefreshInterval = null;
        }
    }
}

function checkUserStatus(userId) {
    // Get user's current location (in real app, this would come from GPS)
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            fetch(`/geofences/user-status`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude,
                    user_id: userId
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showGeofenceStatus(data.status);
                }
            });
        }, function(error) {
            alert('Unable to get your location. Please enable GPS.');
        });
    } else {
        alert('Geolocation is not supported by this browser.');
    }
}

function showGeofenceStatus(status) {
    let statusHtml = '<h6>Geofence Status</h6>';
    
    status.forEach(function(item) {
        const statusClass = item.is_inside ? 'success' : 'danger';
        const statusText = item.is_inside ? 'Inside' : 'Outside';
        
        statusHtml += `
            <div class="alert alert-${statusClass} alert-sm mb-2">
                <strong>${item.geofence_name}</strong><br>
                <small>${item.client_name} - ${item.location_name}</small><br>
                <small>Status: ${statusText}</small>
                ${item.distance_from_center ? `<br><small>Distance: ${(item.distance_from_center / 1000).toFixed(2)}km</small>` : ''}
            </div>
        `;
    });
    
    // Show in modal or alert
    alert(statusHtml.replace(/<[^>]*>/g, '\n').replace(/\n+/g, '\n').trim());
}

function trackEmployee(userId) {
    alert(`Real-time tracking for employee ${userId} would be implemented with WebSocket connection`);
}

function viewEmployee(userId) {
    window.open(`/employees/${userId}`, '_blank');
}

function viewViolation(violationId) {
    fetch(`/geofences/violations/${violationId}`)
        .then(response => response.json())
        .then(data => {
            alert(`Violation Details:\nGeofence: ${data.geofence.name}\nEmployee: ${data.employee.full_name}\nTime: ${data.violation_time}\nType: ${data.violation_type}`);
        });
}

function testLocation() {
    const latitude = document.getElementById('testLatitude').value;
    const longitude = document.getElementById('testLongitude').value;
    const geofenceId = document.getElementById('testGeofence').value;
    
    fetch(`/geofences/test-point`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            latitude: latitude,
            longitude: longitude,
            geofence_id: geofenceId
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const status = data.is_inside ? 'INSIDE' : 'OUTSIDE';
            const distance = data.distance_from_center ? `\nDistance from center: ${(data.distance_from_center / 1000).toFixed(2)}km` : '';
            alert(`Test Result:\nStatus: ${status}${distance}`);
        }
    });
}

// Initialize monitoring dashboard
document.addEventListener('DOMContentLoaded', function() {
    // Auto-refresh toggle
    console.log('Geofence monitoring dashboard initialized');
});
</script>
@endsection