@extends('layouts.app')

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

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Geofence Violations Report</h5>
                </div>
                <div class="card-body">
                    <!-- Filters -->
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <label class="form-label">Start Date</label>
                            <input type="date" class="form-control" name="start_date" value="{{ $startDate }}" onchange="applyFilters()">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">End Date</label>
                            <input type="date" class="form-control" name="end_date" value="{{ $endDate }}" onchange="applyFilters()">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Geofence</label>
                            <select class="form-select" name="geofence_id" onchange="applyFilters()">
                                <option value="">All Geofences</option>
                                @foreach($geofences as $geofence)
                                    <option value="{{ $geofence->id }}" {{ $filters['geofence_id'] == $geofence->id ? 'selected' : '' }}>
                                        {{ $geofence->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Employee</label>
                            <select class="form-select" name="employee_id" onchange="applyFilters()">
                                <option value="">All Employees</option>
                                @foreach($employees as $employee)
                                    <option value="{{ $employee->id }}" {{ $filters['employee_id'] == $employee->id ? 'selected' : '' }}>
                                        {{ $employee->full_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Violation Type</label>
                            <select class="form-select" name="violation_type" onchange="applyFilters()">
                                <option value="">All Types</option>
                                <option value="entry_violation" {{ $filters['violation_type'] == 'entry_violation' ? 'selected' : '' }}>Entry Violation</option>
                                <option value="exit_violation" {{ $filters['violation_type'] == 'exit_violation' ? 'selected' : '' }}>Exit Violation</option>
                                <option value="unauthorized_entry" {{ $filters['violation_type'] == 'unauthorized_entry' ? 'selected' : '' }}>Unauthorized Entry</option>
                                <option value="missed_checkpoint" {{ $filters['violation_type'] == 'missed_checkpoint' ? 'selected' : '' }}>Missed Checkpoint</option>
                                <option value="late_arrival" {{ $filters['violation_type'] == 'late_arrival' ? 'selected' : '' }}>Late Arrival</option>
                                <option value="early_departure" {{ $filters['violation_type'] == 'early_departure' ? 'selected' : '' }}>Early Departure</option>
                            </select>
                        </div>
                    </div>

                    <!-- Summary Cards -->
                    <div class="row mb-4">
                        <div class="col-md-2">
                            <div class="card bg-primary text-white">
                                <div class="card-body text-center">
                                    <h5>{{ $report['summary']['total_violations'] }}</h5>
                                    <p class="card-text">Total Violations</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card bg-success text-white">
                                <div class="card-body text-center">
                                    <h5>{{ $report['summary']['resolved_violations'] }}</h5>
                                    <p class="card-text">Resolved</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card bg-danger text-white">
                                <div class="card-body text-center">
                                    <h5>{{ $report['summary']['unresolved_violations'] }}</h5>
                                    <p class="card-text">Unresolved</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card bg-info text-white">
                                <div class="card-body text-center">
                                    <h5>{{ $report['summary']['resolution_rate'] }}%</h5>
                                    <p class="card-text">Resolution Rate</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card bg-warning text-white">
                                <div class="card-body text-center">
                                    <h5>{{ $report['summary']['most_common_type'] }}</h5>
                                    <p class="card-text">Most Common Type</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card bg-secondary text-white">
                                <div class="card-body text-center">
                                    <h5>{{ count($report['summary']['violation_types']) }}</h5>
                                    <p class="card-text">Violation Types</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Violation Types Chart -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">Violation Types Distribution</h6>
                                </div>
                                <div class="card-body">
                                    <canvas id="violationTypesChart" width="400" height="200"></canvas>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">Time-based Patterns</h6>
                                </div>
                                <div class="card-body">
                                    <canvas id="violationPatternsChart" width="400" height="200"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Export Button -->
                    <div class="row mb-3">
                        <div class="col-12">
                            <button class="btn btn-success" onclick="exportReport()">
                                <i class="fas fa-file-export me-2"></i>
                                Export to CSV
                            </button>
                        </div>
                    </div>

                    <!-- Detailed Table -->
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Employee</th>
                                    <th>Geofence</th>
                                    <th>Violation Type</th>
                                    <th>Violation Time</th>
                                    <th>Location</th>
                                    <th>Status</th>
                                    <th>Resolution Notes</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($report['details'] as $violation)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <img src="{{ $violation->employee->avatar }}" class="rounded-circle me-2" width="32" height="32">
                                                <div>
                                                    <div class="fw-semibold">{{ $violation->employee->full_name }}</div>
                                                    <small class="text-muted">{{ $violation->employee->profile->employee_id ?? '' }}</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td>{{ $violation->geofence->name }}</td>
                                        <td>
                                            <span class="badge bg-{{ $violation->type_class }}">
                                                {{ ucfirst(str_replace('_', ' ', $violation->violation_type)) }}
                                            </span>
                                        </td>
                                        <td>{{ $violation->violation_time->format('M d, Y h:i A') }}</td>
                                        <td>
                                            <small>
                                                {{ $violation->latitude }}, {{ $violation->longitude }}
                                            </small>
                                        </td>
                                        <td>
                                            <span class="badge bg-{{ $violation->is_resolved ? 'success' : 'danger' }}">
                                                {{ $violation->is_resolved ? 'Resolved' : 'Unresolved' }}
                                            </span>
                                        </td>
                                        <td>{{ $violation->resolution_notes ?? 'N/A' }}</td>
                                        <td>
                                            <div class="btn-group btn-group-sm">
                                                @if(!$violation->is_resolved)
                                                    <button class="btn btn-outline-success" onclick="resolveViolation({{ $violation->id }})">
                                                        <i class="fas fa-check"></i>
                                                    </button>
                                                @endif
                                                <button class="btn btn-outline-primary" onclick="viewOnMap({{ $violation->latitude }}, {{ $violation->longitude }})">
                                                    <i class="fas fa-map-marker-alt"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" class="text-center text-muted">No violation records found</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Hotspots Analysis -->
                    <div class="row mt-4">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">Violation Hotspots</h6>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-sm">
                                            <thead>
                                                <tr>
                                                    <th>Geofence</th>
                                                    <th>Violations</th>
                                                    <th>Unique Employees</th>
                                                    <th>Risk Level</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse($report['hotspots']['top_hotspots'] ?? [] as $hotspot)
                                                    <tr>
                                                        <td>{{ $hotspot['geofence']['name'] }}</td>
                                                        <td>{{ $hotspot['violation_count'] }}</td>
                                                        <td>{{ $hotspot['unique_employees'] }}</td>
                                                        <td>
                                                            @php
                                                                $riskLevel = $hotspot['violation_count'] > 10 ? 'High' : ($hotspot['violation_count'] > 5 ? 'Medium' : 'Low');
                                                                $riskColor = $riskLevel === 'High' ? 'danger' : ($riskLevel === 'Medium' ? 'warning' : 'success');
                                                            @endphp
                                                            <span class="badge bg-{{ $riskColor }}">{{ $riskLevel }}</span>
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="4" class="text-center text-muted">No hotspots data available</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">Employee Violation Patterns</h6>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-sm">
                                            <thead>
                                                <tr>
                                                    <th>Employee</th>
                                                    <th>Violations</th>
                                                    <th>Geofences</th>
                                                    <th>Common Type</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse($report['patterns']['employee_violation_patterns'] ?? [] as $pattern)
                                                    <tr>
                                                        <td>{{ $pattern['employee']['full_name'] }}</td>
                                                        <td>{{ $pattern['violation_count'] }}</td>
                                                        <td>{{ $pattern['geofences_violated'] }}</td>
                                                        <td>
                                                            @php
                                                                $mostCommonType = $pattern['violation_types']->sortDesc()->keys()->first();
                                                            @endphp
                                                            <span class="badge bg-warning">{{ ucfirst(str_replace('_', ' ', $mostCommonType)) }}</span>
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="4" class="text-center text-muted">No pattern data available</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Pattern Analysis -->
                    <div class="row mt-4">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">Hourly Violation Pattern</h6>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-sm">
                                            <thead>
                                                <tr>
                                                    <th>Hour</th>
                                                    <th>Violations</th>
                                                    <th>Risk Level</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse($report['patterns']['hourly_pattern'] ?? [] as $hour => $count)
                                                    <tr>
                                                        <td>{{ $hour }}:00</td>
                                                        <td>{{ $count }}</td>
                                                        <td>
                                                            @php
                                                                $riskLevel = $count > 5 ? 'High' : ($count > 2 ? 'Medium' : 'Low');
                                                                $riskColor = $riskLevel === 'High' ? 'danger' : ($riskLevel === 'Medium' ? 'warning' : 'success');
                                                            @endphp
                                                            <span class="badge bg-{{ $riskColor }}">{{ $riskLevel }}</span>
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="3" class="text-center text-muted">No hourly data available</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">Daily Violation Pattern</h6>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-sm">
                                            <thead>
                                                <tr>
                                                    <th>Day</th>
                                                    <th>Violations</th>
                                                    <th>Risk Level</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse($report['patterns']['daily_pattern'] ?? [] as $day => $count)
                                                    <tr>
                                                        <td>{{ $day }}</td>
                                                        <td>{{ $count }}</td>
                                                        <td>
                                                            @php
                                                                $riskLevel = $count > 10 ? 'High' : ($count > 5 ? 'Medium' : 'Low');
                                                                $riskColor = $riskLevel === 'High' ? 'danger' : ($riskLevel === 'Medium' ? 'warning' : 'success');
                                                            @endphp
                                                            <span class="badge bg-{{ $riskColor }}">{{ $riskLevel }}</span>
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="3" class="text-center text-muted">No daily data available</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let violationTypesChart, violationPatternsChart;

document.addEventListener('DOMContentLoaded', function() {
    createViolationTypesChart();
    createViolationPatternsChart();
});

function createViolationTypesChart() {
    const ctx = document.getElementById('violationTypesChart').getContext('2d');
    
    violationTypesChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: @json($report['summary']['violation_types']->keys()),
            datasets: [{
                data: @json($report['summary']['violation_types']->values()),
                backgroundColor: [
                    'rgba(255, 99, 132, 0.8)',
                    'rgba(54, 162, 235, 0.8)',
                    'rgba(255, 206, 86, 0.8)',
                    'rgba(75, 192, 192, 0.8)',
                    'rgba(153, 102, 255, 0.8)',
                    'rgba(255, 159, 64, 0.8)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
}

function createViolationPatternsChart() {
    const ctx = document.getElementById('violationPatternsChart').getContext('2d');
    
    violationPatternsChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: @json($report['patterns']['hourly_pattern']->keys()),
            datasets: [{
                label: 'Violations by Hour',
                data: @json($report['patterns']['hourly_pattern']->values()),
                backgroundColor: 'rgba(255, 99, 132, 0.8)',
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

function applyFilters() {
    const form = document.createElement('form');
    form.method = 'GET';
    form.action = window.location.pathname;
    
    const inputs = document.querySelectorAll('input[name], select[name]');
    inputs.forEach(input => {
        const inputClone = input.cloneNode(true);
        form.appendChild(inputClone);
    });
    
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
}

function exportReport() {
    const params = new URLSearchParams(window.location.search);
    window.location.href = `{{ route('reports.geofence.export') }}?${params.toString()}`;
}

function resolveViolation(violationId) {
    const notes = prompt('Enter resolution notes:');
    if (notes) {
        // Implement resolution logic
        fetch(`/geofences/violations/${violationId}/resolve`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({ resolution_notes: notes })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error resolving violation: ' + data.message);
            }
        })
        .catch(error => console.error('Error:', error));
    }
}

function viewOnMap(latitude, longitude) {
    // Open in Google Maps or internal map view
    window.open(`https://maps.google.com/?q=${latitude},${longitude}`, '_blank');
}
</script>
@endsection