@extends('layouts.app')

@section('title', 'Analytics Dashboard')
@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">Analytics Dashboard</h5>
                    <div class="d-flex gap-2">
                        <select class="form-select" id="periodSelector" onchange="changePeriod()">
                            <option value="7days" {{ $period === '7days' ? 'selected' : '' }}>Last 7 Days</option>
                            <option value="30days" {{ $period === '30days' ? 'selected' : '' }}>Last 30 Days</option>
                            <option value="90days" {{ $period === '90days' ? 'selected' : '' }}>Last 90 Days</option>
                            <option value="1year" {{ $period === '1year' ? 'selected' : '' }}>Last Year</option>
                        </select>
                        <button class="btn btn-outline-primary" onclick="refreshData()">
                            <i class="fas fa-sync"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Overview Stats -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="card bg-primary text-white">
                                <div class="card-body text-center">
                                    <h5>{{ $analytics['overview']['total_employees'] }}</h5>
                                    <p class="card-text">Total Employees</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-success text-white">
                                <div class="card-body text-center">
                                    <h5>{{ $analytics['overview']['active_clients'] }}</h5>
                                    <p class="card-text">Active Clients</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-info text-white">
                                <div class="card-body text-center">
                                    <h5>{{ $analytics['overview']['total_attendances'] }}</h5>
                                    <p class="card-text">Total Attendances</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-warning text-white">
                                <div class="card-body text-center">
                                    <h5>{{ $analytics['overview']['total_violations'] }}</h5>
                                    <p class="card-text">Total Violations</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Charts Row 1 -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">Attendance Trends</h6>
                                </div>
                                <div class="card-body">
                                    <canvas id="attendanceChart" width="400" height="200"></canvas>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">Transit Status Distribution</h6>
                                </div>
                                <div class="card-body">
                                    <canvas id="transitChart" width="400" height="200"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Charts Row 2 -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">Violation Patterns</h6>
                                </div>
                                <div class="card-body">
                                    <canvas id="violationChart" width="400" height="200"></canvas>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">Department Performance</h6>
                                </div>
                                <div class="card-body">
                                    <canvas id="departmentChart" width="400" height="200"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Performance Tables -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">Top Performers</h6>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-sm">
                                            <thead>
                                                <tr>
                                                    <th>Employee</th>
                                                    <th>Department</th>
                                                    <th>Attendance Rate</th>
                                                    <th>Transit Completion</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse($analytics['attendance']['analytics']['top_performers'] ?? [] as $performer)
                                                    <tr>
                                                        <td>{{ $performer['employee']['full_name'] }}</td>
                                                        <td>{{ $performer['employee']['departments']->pluck('name')->join(', ') ?: 'N/A' }}</td>
                                                        <td>
                                                            <span class="badge bg-success">{{ $performer['attendance_rate'] }}%</span>
                                                        </td>
                                                        <td>
                                                            <span class="badge bg-info">{{ $performer['completion_rate'] }}%</span>
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="4" class="text-center text-muted">No 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">Needs Attention</h6>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-sm">
                                            <thead>
                                                <tr>
                                                    <th>Employee</th>
                                                    <th>Issues</th>
                                                    <th>Attendance Rate</th>
                                                    <th>Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse($analytics['attendance']['analytics']['needs_attention'] ?? [] as $employee)
                                                    <tr>
                                                        <td>{{ $employee['employee']['full_name'] }}</td>
                                                        <td>
                                                            <span class="badge bg-warning">{{ $employee['attendance_rate'] }}%</span>
                                                        </td>
                                                        <td>
                                                            <span class="badge bg-danger">{{ $employee['attendance_rate'] }}%</span>
                                                        </td>
                                                        <td>
                                                            <button class="btn btn-sm btn-outline-primary" onclick="viewEmployee({{ $employee['employee']['id'] }})">
                                                                <i class="fas fa-eye"></i>
                                                            </button>
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="4" class="text-center text-muted">No employees need attention</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 attendanceChart, transitChart, violationChart, departmentChart;

// Initialize charts on page load
document.addEventListener('DOMContentLoaded', function() {
    loadCharts();
});

function changePeriod() {
    const period = document.getElementById('periodSelector').value;
    window.location.href = `{{ route('reports.analytics') }}?period=${period}`;
}

function refreshData() {
    const period = document.getElementById('periodSelector').value;
    
    fetch(`{{ route('reports.dashboard-data') }}?period=${period}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                updateCharts(data.data);
            }
        })
        .catch(error => console.error('Error refreshing data:', error));
}

function loadCharts() {
    const period = '{{ $period }}';
    
    // Load initial chart data
    fetch(`{{ route('reports.chart-data') }}?type=attendance_trends&period=${period}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                createAttendanceChart(data.data);
            }
        });
    
    fetch(`{{ route('reports.chart-data') }}?type=transit_trends&period=${period}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                createTransitChart(data.data);
            }
        });
    
    fetch(`{{ route('reports.chart-data') }}?type=violation_trends&period=${period}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                createViolationChart(data.data);
            }
        });
    
    fetch(`{{ route('reports.chart-data') }}?type=department_performance&period=${period}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                createDepartmentChart(data.data);
            }
        });
}

function createAttendanceChart(data) {
    const ctx = document.getElementById('attendanceChart').getContext('2d');
    
    if (attendanceChart) {
        attendanceChart.destroy();
    }
    
    attendanceChart = new Chart(ctx, {
        type: 'line',
        data: data,
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'Attendance Trends'
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

function createTransitChart(data) {
    const ctx = document.getElementById('transitChart').getContext('2d');
    
    if (transitChart) {
        transitChart.destroy();
    }
    
    transitChart = new Chart(ctx, {
        type: 'doughnut',
        data: data,
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom',
                },
                title: {
                    display: true,
                    text: 'Transit Status Distribution'
                }
            }
        }
    });
}

function createViolationChart(data) {
    const ctx = document.getElementById('violationChart').getContext('2d');
    
    if (violationChart) {
        violationChart.destroy();
    }
    
    violationChart = new Chart(ctx, {
        type: 'bar',
        data: data,
        options: {
            responsive: true,
            plugins: {
                legend: {
                    display: false
                },
                title: {
                    display: true,
                    text: 'Violation Patterns'
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

function createDepartmentChart(data) {
    const ctx = document.getElementById('departmentChart').getContext('2d');
    
    if (departmentChart) {
        departmentChart.destroy();
    }
    
    departmentChart = new Chart(ctx, {
        type: 'bar',
        data: data,
        options: {
            responsive: true,
            plugins: {
                legend: {
                    display: false
                },
                title: {
                    display: true,
                    text: 'Department Performance'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100
                }
            }
        }
    });
}

function updateCharts(analyticsData) {
    // Update overview stats
    // This would update the stat cards with new data
    
    // Reload charts with new data
    loadCharts();
}

function viewEmployee(employeeId) {
    window.open(`/employees/${employeeId}`, '_blank');
}
</script>
@endsection