@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
<div class="space-y-6">
    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Total Employees -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0 bg-blue-100 rounded-lg p-3">
                    <i class="fas fa-users text-blue-600 text-xl"></i>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Total Employees</dt>
                        <dd class="text-lg font-medium text-gray-900" data-stat="total_employees">{{ $stats['total_employees'] }}</dd>
                    </dl>
                </div>
            </div>
        </div>

        <!-- Present Today -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0 bg-green-100 rounded-lg p-3">
                    <i class="fas fa-user-check text-green-600 text-xl"></i>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Present Today</dt>
                        <dd class="text-lg font-medium text-gray-900" data-stat="present_today">{{ $stats['present_today'] }}</dd>
                    </dl>
                </div>
            </div>
        </div>

        <!-- Active Patrols -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0 bg-purple-100 rounded-lg p-3">
                    <i class="fas fa-shield-alt text-purple-600 text-xl"></i>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Active Patrols</dt>
                        <dd class="text-lg font-medium text-gray-900" data-stat="active_patrols">{{ $stats['active_patrols'] }}</dd>
                    </dl>
                </div>
            </div>
        </div>

        <!-- Total Clients -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0 bg-orange-100 rounded-lg p-3">
                    <i class="fas fa-building text-orange-600 text-xl"></i>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Total Clients</dt>
                        <dd class="text-lg font-medium text-gray-900" data-stat="total_clients">{{ $stats['total_clients'] }}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts and Tables -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Attendance Overview Chart -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-900">Attendance Overview</h3>
                <span class="text-sm text-gray-500">This Week</span>
            </div>
            <div class="h-64">
                <canvas id="attendanceChart"></canvas>
            </div>
        </div>

        <!-- Recent Activities -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-900">Recent Activities</h3>
                <a href="{{ route('activities.index') }}" class="text-sm text-primary-600 hover:text-primary-800">View All</a>
            </div>
            <div class="space-y-3 max-h-64 overflow-y-auto">
                @forelse($recentActivities as $activity)
                    <div class="flex items-start space-x-3">
                        <div class="flex-shrink-0">
                            <div class="w-8 h-8 rounded-full bg-{{ $activity['color'] }}-100 flex items-center justify-center">
                                <i class="fas fa-{{ $activity['icon'] }} text-{{ $activity['color'] }}-600 text-xs"></i>
                            </div>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm text-gray-900">{{ $activity['description'] }}</p>
                            <p class="text-xs text-gray-500">{{ $activity['time'] }}</p>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-8">
                        <i class="fas fa-inbox text-gray-400 text-2xl mb-2"></i>
                        <p class="text-sm text-gray-500">No recent activities</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>

    <!-- Today's Patrols -->
    <div class="bg-white rounded-lg shadow">
        <div class="px-6 py-4 border-b border-gray-200">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-medium text-gray-900">Today's Patrols</h3>
                <a href="{{ route('patrols.schedules') }}" class="text-sm text-primary-600 hover:text-primary-800">View All</a>
            </div>
        </div>
        <div class="overflow-x-auto">
            @if(count($todayPatrols) > 0)
                <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">Employee</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Shift</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach($todayPatrols as $patrol)
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <img class="h-8 w-8 rounded-full mr-3" src="https://ui-avatars.com/api/?name={{ urlencode($patrol['employee']) }}&color=7F9CF5&background=EBF4FF" alt="">
                                        <span class="text-sm font-medium text-gray-900">{{ $patrol['employee'] }}</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $patrol['client'] }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $patrol['location'] }}</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full {{ $patrol['shift'] === 'day' ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-800' }}">
                                        {{ $patrol['shift'] }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $patrol['time'] }}</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full {{ $patrol['status'] === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                                        {{ ucfirst($patrol['status']) }}
                                    </span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @else
                <div class="text-center py-8">
                    <i class="fas fa-shield-alt text-gray-400 text-2xl mb-2"></i>
                    <p class="text-sm text-gray-500">No patrols scheduled for today</p>
                </div>
            @endif
        </div>
    </div>

    <!-- Upcoming Events -->
    <div class="bg-white rounded-lg shadow p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-medium text-gray-900">Upcoming Events</h3>
            <a href="{{ route('calendar.index') }}" class="text-sm text-primary-600 hover:text-primary-800">View Calendar</a>
        </div>
        <div class="space-y-3">
            @forelse($upcomingEvents as $event)
                <div class="flex items-center space-x-4 p-3 rounded-lg hover:bg-gray-50">
                    <div class="flex-shrink-0">
                        <div class="w-10 h-10 rounded-full bg-{{ $event['color'] }}-100 flex items-center justify-center">
                            <i class="fas fa-{{ $event['type'] === 'patrol' ? 'shield-alt' : 'calendar' }} text-{{ $event['color'] }}-600"></i>
                        </div>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-medium text-gray-900">{{ $event['title'] }}</p>
                        <p class="text-xs text-gray-500">{{ $event['location'] ?? 'No location' }}</p>
                    </div>
                    <div class="flex-shrink-0 text-right">
                        <p class="text-sm font-medium text-gray-900">{{ $event['date'] }}</p>
                        <p class="text-xs text-gray-500">{{ $event['time'] }}</p>
                    </div>
                </div>
            @empty
                <div class="text-center py-8">
                    <i class="fas fa-calendar-alt text-gray-400 text-2xl mb-2"></i>
                    <p class="text-sm text-gray-500">No upcoming events</p>
                </div>
            @endforelse
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Attendance Chart
const ctx = document.getElementById('attendanceChart');
if (ctx) {
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: @json($attendanceOverview['labels']),
            datasets: [{
                label: 'Attendance',
                data: @json($attendanceOverview['data']),
                borderColor: 'rgb(59, 130, 246)',
                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                tension: 0.4,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            }
        }
    });
}

// Auto-refresh dashboard data
setInterval(() => {
    fetch('/api/dashboard/stats')
        .then(response => response.json())
        .then(data => {
            // Update stats cards
            document.querySelector('[data-stat="total_employees"]').textContent = data.total_employees;
            document.querySelector('[data-stat="present_today"]').textContent = data.present_today;
            document.querySelector('[data-stat="active_patrols"]').textContent = data.active_patrols;
            document.querySelector('[data-stat="total_clients"]').textContent = data.total_clients;
        })
        .catch(error => console.error('Error refreshing dashboard:', error));
}, 60000); // Refresh every minute
</script>
@endpush