@extends('layouts.app')

@section('title', 'Transit Tracking Report')
@section('no-page-header')

@section('content')
<div class="space-y-6">
    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 rounded-t-lg">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <h5 class="text-lg font-semibold text-gray-900">Transit Tracking Report</h5>
                <div class="flex flex-col sm:flex-row gap-2">
                    <button class="inline-flex items-center px-4 py-2 bg-green-600 border border-transparent text-sm font-medium text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors" onclick="generateReport()">
                        <i class="fas fa-file-alt mr-2"></i>Generate Report
                    </button>
                    <button class="inline-flex items-center px-4 py-2 bg-blue-600 border border-transparent text-sm font-medium text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors" onclick="exportReport()">
                        <i class="fas fa-download mr-2"></i>Export
                    </button>
                </div>
            </div>
        </div>
        <div class="p-6">
                <!-- Filters -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Start Date</label>
                        <input type="date" class="w-full px-3 py-2 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" name="start_date" value="{{ $startDate }}" onchange="applyFilters()">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">End Date</label>
                        <input type="date" class="w-full px-3 py-2 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" name="end_date" value="{{ $endDate }}" onchange="applyFilters()">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Employee</label>
                        <select class="w-full px-3 py-2 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 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>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Client</label>
                        <select class="w-full px-3 py-2 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" name="client_id" onchange="applyFilters()">
                            <option value="">All Clients</option>
                            @foreach($clients as $client)
                                <option value="{{ $client->id }}" {{ $filters['client_id'] == $client->id ? 'selected' : '' }}>
                                    {{ $client->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                        <select class="w-full px-3 py-2 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" name="status" onchange="applyFilters()">
                            <option value="">All Status</option>
                            <option value="in_transit" {{ $filters['status'] == 'in_transit' ? 'selected' : '' }}>In Transit</option>
                            <option value="arrived" {{ $filters['status'] == 'arrived' ? 'selected' : '' }}>Arrived</option>
                            <option value="delayed" {{ $filters['status'] == 'delayed' ? 'selected' : '' }}>Delayed</option>
                            <option value="cancelled" {{ $filters['status'] == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                        </select>
                    </div>
                </div>

                <!-- Summary Cards -->
                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-8">
                    <div class="bg-blue-600 text-white rounded-lg p-4 shadow-sm hover:shadow-md transition-all hover:scale-105 duration-200">
                        <div class="text-center">
                            <div class="flex items-center justify-center mb-2">
                                <i class="fas fa-route text-2xl opacity-80"></i>
                            </div>
                            <h3 class="text-2xl font-bold mb-1">{{ $report['summary']['total_transits'] }}</h3>
                            <p class="text-sm text-blue-100">Total Transits</p>
                        </div>
                    </div>
                    <div class="bg-green-600 text-white rounded-lg p-4 shadow-sm hover:shadow-md transition-all hover:scale-105 duration-200">
                        <div class="text-center">
                            <div class="flex items-center justify-center mb-2">
                                <i class="fas fa-check-double text-2xl opacity-80"></i>
                            </div>
                            <h3 class="text-2xl font-bold mb-1">{{ $report['summary']['completed_transits'] }}</h3>
                            <p class="text-sm text-green-100">Completed</p>
                        </div>
                    </div>
                    <div class="bg-cyan-600 text-white rounded-lg p-4 shadow-sm hover:shadow-md transition-all hover:scale-105 duration-200">
                        <div class="text-center">
                            <div class="flex items-center justify-center mb-2">
                                <i class="fas fa-truck-loading text-2xl opacity-80"></i>
                            </div>
                            <h3 class="text-2xl font-bold mb-1">{{ $report['summary']['in_progress_transits'] }}</h3>
                            <p class="text-sm text-cyan-100">In Progress</p>
                        </div>
                    </div>
                    <div class="bg-yellow-600 text-white rounded-lg p-4 shadow-sm hover:shadow-md transition-all hover:scale-105 duration-200">
                        <div class="text-center">
                            <div class="flex items-center justify-center mb-2">
                                <i class="fas fa-clock text-2xl opacity-80"></i>
                            </div>
                            <h3 class="text-2xl font-bold mb-1">{{ $report['summary']['delayed_transits'] }}</h3>
                            <p class="text-sm text-yellow-100">Delayed</p>
                        </div>
                    </div>
                    <div class="bg-purple-600 text-white rounded-lg p-4 shadow-sm hover:shadow-md transition-all hover:scale-105 duration-200">
                        <div class="text-center">
                            <div class="flex items-center justify-center mb-2">
                                <i class="fas fa-percentage text-2xl opacity-80"></i>
                            </div>
                            <h3 class="text-2xl font-bold mb-1">{{ $report['summary']['completion_rate'] }}%</h3>
                            <p class="text-sm text-purple-100">Completion Rate</p>
                        </div>
                    </div>
                    <div class="bg-red-600 text-white rounded-lg p-4 shadow-sm hover:shadow-md transition-all hover:scale-105 duration-200">
                        <div class="text-center">
                            <div class="flex items-center justify-center mb-2">
                                <i class="fas fa-road text-2xl opacity-80"></i>
                            </div>
                            <h3 class="text-2xl font-bold mb-1">{{ $report['summary']['total_distance'] }}km</h3>
                            <p class="text-sm text-red-100">Total Distance</p>
                        </div>
                    </div>
                </div>

                <!-- Efficiency Metrics -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
                    <div class="bg-white rounded-lg shadow-md border border-gray-200">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h6 class="text-lg font-semibold text-gray-800 m-0">Efficiency Metrics</h6>
                        </div>
                        <div class="p-6">
                            <div class="grid grid-cols-2 gap-4 text-center">
                                <div>
                                    <h4 class="text-2xl font-bold text-green-600">{{ $report['efficiency']['on_time_rate'] }}%</h4>
                                    <small class="text-gray-500">On-Time Rate</small>
                                </div>
                                <div>
                                    <h4 class="text-2xl font-bold text-amber-600">{{ $report['efficiency']['average_delay'] }} min</h4>
                                    <small class="text-gray-500">Avg Delay</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="lg:col-span-2 bg-white rounded-lg shadow-md border border-gray-200">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h6 class="text-lg font-semibold text-gray-800 m-0">Transit Status Distribution</h6>
                        </div>
                        <div class="p-6">
                            <canvas id="transitStatusChart" width="400" height="150"></canvas>
                        </div>
                    </div>
                </div>

                <!-- Export Button -->
                <div class="flex flex-wrap gap-3 mb-6">
                    <button class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-lg flex items-center gap-2 transition-colors" onclick="exportReport()">
                        <i class="fas fa-file-export"></i>
                        <span>Export to CSV</span>
                    </button>
                    <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg flex items-center gap-2 transition-colors" onclick="printReport()">
                        <i class="fas fa-print"></i>
                        <span>Print Report</span>
                    </button>
                    <button class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded-lg flex items-center gap-2 transition-colors" onclick="resetFilters()">
                        <i class="fas fa-redo"></i>
                        <span>Reset Filters</span>
                    </button>
                </div>

                <!-- Detailed Table -->
                <div class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h6 class="text-lg font-semibold text-gray-800 m-0">Transit Details</h6>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50 sticky top-0 z-10">
                                <tr>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Employee</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">From Location</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">To Location</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Start Time</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Est. Arrival</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actual Arrival</th>
                                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Distance</th>
                                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Efficiency</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @forelse($report['details'] as $transit)
                                    <tr class="hover:bg-gray-50 transition-colors duration-150">
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <div class="flex-shrink-0 h-10 w-10">
                                                    <img src="{{ $transit->employee->avatar }}" class="h-10 w-10 rounded-full object-cover border-2 border-gray-200" onerror="this.src='/images/default-avatar.png'" alt="{{ $transit->employee->full_name }}">
                                                </div>
                                                <div class="ml-3">
                                                    <div class="text-sm font-medium text-gray-900 font-semibold">{{ $transit->employee->full_name }}</div>
                                                    <div class="text-xs text-gray-500">{{ $transit->employee->profile->employee_id ?? 'N/A' }}</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <div class="text-sm text-gray-900 font-medium">{{ $transit->client?->name ?? 'N/A' }}</div>
                                        </td>
                                        <td class="px-4 py-3">
                                            <div class="text-sm text-gray-900 max-w-xs truncate" title="{{ $transit->from_location }}">
                                                {{ $transit->from_location }}
                                            </div>
                                        </td>
                                        <td class="px-4 py-3">
                                            <div class="text-sm text-gray-900 max-w-xs truncate" title="{{ $transit->to_location }}">
                                                {{ $transit->to_location }}
                                            </div>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <div class="text-sm text-gray-900 font-medium">{{ $transit->start_time->format('M j, Y g:i A') }}</div>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <div class="text-sm text-gray-900">{{ $transit->estimated_arrival?->format('M j, Y g:i A') ?? 'N/A' }}</div>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <div class="text-sm text-gray-900">{{ $transit->actual_arrival?->format('M j, Y g:i A') ?? 'N/A' }}</div>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-center">
                                            <div class="text-sm text-gray-900 font-semibold">{{ $transit->distance ?? 'N/A' }} <span class="text-xs text-gray-500">km</span></div>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-center">
                                            @switch($transit->status)
                                                @case('arrived')
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 border border-green-200">
                                                        <svg class="-ml-0.5 mr-1.5 h-2 w-2 text-green-400" fill="currentColor" viewBox="0 0 8 8">
                                                            <circle cx="4" cy="4" r="3"/>
                                                        </svg>
                                                        Arrived
                                                    </span>
                                                    @break
                                                @case('delayed')
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800 border border-amber-200">
                                                        <svg class="-ml-0.5 mr-1.5 h-2 w-2 text-amber-400" fill="currentColor" viewBox="0 0 8 8">
                                                            <circle cx="4" cy="4" r="3"/>
                                                        </svg>
                                                        Delayed
                                                    </span>
                                                    @break
                                                @case('cancelled')
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 border border-red-200">
                                                        <svg class="-ml-0.5 mr-1.5 h-2 w-2 text-red-400" fill="currentColor" viewBox="0 0 8 8">
                                                            <circle cx="4" cy="4" r="3"/>
                                                        </svg>
                                                        Cancelled
                                                    </span>
                                                    @break
                                                @default
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-cyan-100 text-cyan-800 border border-cyan-200">
                                                        <svg class="-ml-0.5 mr-1.5 h-2 w-2 text-cyan-400 animate-pulse" fill="currentColor" viewBox="0 0 8 8">
                                                            <circle cx="4" cy="4" r="3"/>
                                                        </svg>
                                                        In Transit
                                                    </span>
                                            @endswitch
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-center">
                                            @if($transit->estimated_arrival && $transit->actual_arrival)
                                                @php
                                                    $efficiency = \Carbon\Carbon::parse($transit->estimated_arrival)->diffInMinutes(\Carbon\Carbon::parse($transit->actual_arrival));
                                                @endphp
                                                @if($efficiency <= 0)
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 border border-green-200">
                                                        <svg class="-ml-0.5 mr-1.5 h-2 w-2 text-green-400" fill="currentColor" viewBox="0 0 8 8">
                                                            <circle cx="4" cy="4" r="3"/>
                                                        </svg>
                                                        On Time
                                                    </span>
                                                @else
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800 border border-amber-200">
                                                        <svg class="-ml-0.5 mr-1.5 h-2 w-2 text-amber-400" fill="currentColor" viewBox="0 0 8 8">
                                                            <circle cx="4" cy="4" r="3"/>
                                                        </svg>
                                                        {{ $efficiency }} min late
                                                    </span>
                                                @endif
                                            @else
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600 border border-gray-200">
                                                    <svg class="-ml-0.5 mr-1.5 h-2 w-2 text-gray-400" fill="currentColor" viewBox="0 0 8 8">
                                                        <circle cx="4" cy="4" r="3"/>
                                                    </svg>
                                                    N/A
                                                </span>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="10" class="px-6 py-16 text-center">
                                            <div class="flex flex-col items-center justify-center space-y-4">
                                                <div class="flex items-center justify-center h-16 w-16 rounded-full bg-gray-100">
                                                    <i class="fas fa-route text-2xl text-gray-400"></i>
                                                </div>
                                                <div>
                                                    <h3 class="text-lg font-medium text-gray-900 mb-1">No transit records found</h3>
                                                    <p class="text-sm text-gray-500">Try adjusting your filters or date range to see results.</p>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Analytics Section -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8">
                    <div class="bg-white rounded-lg shadow-md border border-gray-200">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h6 class="text-lg font-semibold text-gray-800 m-0">Top Performers</h6>
                        </div>
                        <div class="overflow-hidden">
                            <div class="overflow-x-auto">
                                <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-center text-xs font-medium text-gray-500 uppercase tracking-wider">Transits</th>
                                            <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Completion Rate</th>
                                            <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Total Distance</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        @forelse($report['analytics']['top_performers'] ?? [] as $performer)
                                            <tr class="hover:bg-gray-50 transition-colors">
                                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $performer['employee']['full_name'] }}</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-900">{{ $performer['total_transits'] }}</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-center">
                                                    <div class="flex items-center justify-center">
                                                        <div class="w-16 bg-gray-200 rounded-full h-2 mr-2">
                                                            <div class="bg-green-600 h-2 rounded-full" style="width: {{ $performer['completion_rate'] }}%"></div>
                                                        </div>
                                                        <span class="text-sm text-gray-900">{{ $performer['completion_rate'] }}%</span>
                                                    </div>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-900">{{ $performer['total_distance'] }} km</td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="4" class="px-6 py-8 text-center">
                                                    <div class="flex flex-col items-center">
                                                        <i class="fas fa-users text-3xl text-gray-400 mb-2"></i>
                                                        <span class="text-gray-500">No data available</span>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg shadow-md border border-gray-200">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h6 class="text-lg font-semibold text-gray-800 m-0">Client-wise Analysis</h6>
                        </div>
                        <div class="overflow-hidden">
                            <div class="overflow-x-auto">
                                <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">Client</th>
                                            <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Transits</th>
                                            <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Completed</th>
                                            <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Total Distance</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        @forelse($report['analytics']['client_wise'] ?? [] as $clientData)
                                            <tr class="hover:bg-gray-50 transition-colors">
                                                <td class="px-6 py-4 text-sm font-medium text-gray-900" style="max-width: 120px;" title="{{ $clientData['client']['name'] }}">
                                                    <div class="truncate">{{ $clientData['client']['name'] }}</div>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-900">{{ $clientData['total_transits'] }}</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-900">{{ $clientData['completed_transits'] }}</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-900">{{ $clientData['total_distance'] }} km</td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="4" class="px-6 py-8 text-center">
                                                    <div class="flex flex-col items-center">
                                                        <i class="fas fa-building text-3xl text-gray-400 mb-2"></i>
                                                        <span class="text-gray-500">No data available</span>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let transitStatusChart;

// Utility functions
function showLoading(button) {
    const originalContent = button.innerHTML;
    button.disabled = true;
    button.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Processing...';
    return originalContent;
}

function hideLoading(button, originalContent) {
    button.disabled = false;
    button.innerHTML = originalContent;
}

function showNotification(message, type = 'info') {
    // Create notification element
    const notification = document.createElement('div');
    notification.className = `fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg transform transition-all duration-300 translate-x-full`;
    
    // Set color based on type
    const colors = {
        'success': 'bg-green-500 text-white',
        'error': 'bg-red-500 text-white',
        'warning': 'bg-amber-500 text-white',
        'info': 'bg-blue-500 text-white'
    };
    
    notification.className += ` ${colors[type]}`;
    notification.innerHTML = `
        <div class="flex items-center">
            <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'info-circle'} mr-2"></i>
            <span>${message}</span>
        </div>
    `;
    
    document.body.appendChild(notification);
    
    // Animate in
    setTimeout(() => {
        notification.classList.remove('translate-x-full');
    }, 100);
    
    // Remove after 3 seconds
    setTimeout(() => {
        notification.classList.add('translate-x-full');
        setTimeout(() => {
            document.body.removeChild(notification);
        }, 300);
    }, 3000);
}

document.addEventListener('DOMContentLoaded', function() {
    createTransitStatusChart();
    initializeEventListeners();
});

function initializeEventListeners() {
    // Add change event listeners to all filters
    const filterInputs = document.querySelectorAll('input[name], select[name]');
    filterInputs.forEach(input => {
        input.addEventListener('change', function() {
            // Add visual indicator that filters have changed
            this.classList.add('ring-2', 'ring-blue-500');
            setTimeout(() => {
                this.classList.remove('ring-2', 'ring-blue-500');
            }, 1000);
        });
    });
}

function createTransitStatusChart() {
    const ctx = document.getElementById('transitStatusChart');
    if (!ctx) {
        console.error('Chart canvas not found');
        return;
    }
    
    try {
        transitStatusChart = new Chart(ctx.getContext('2d'), {
            type: 'doughnut',
            data: {
                labels: ['Completed', 'In Progress', 'Delayed', 'Cancelled'],
                datasets: [{
                    data: [
                        {{ $report['summary']['completed_transits'] ?? 0 }},
                        {{ $report['summary']['in_progress_transits'] ?? 0 }},
                        {{ $report['summary']['delayed_transits'] ?? 0 }},
                        {{ $report['summary']['cancelled_transits'] ?? 0 }}
                    ],
                    backgroundColor: [
                        'rgba(34, 197, 94, 0.8)',
                        'rgba(59, 130, 246, 0.8)',
                        'rgba(245, 158, 11, 0.8)',
                        'rgba(239, 68, 68, 0.8)'
                    ],
                    borderColor: [
                        'rgba(34, 197, 94, 1)',
                        'rgba(59, 130, 246, 1)',
                        'rgba(245, 158, 11, 1)',
                        'rgba(239, 68, 68, 1)'
                    ],
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            padding: 15,
                            font: {
                                size: 12
                            }
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const label = context.label || '';
                                const value = context.parsed || 0;
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                const percentage = ((value / total) * 100).toFixed(1);
                                return `${label}: ${value} (${percentage}%)`;
                            }
                        }
                    }
                }
            }
        });
    } catch (error) {
        console.error('Error creating chart:', error);
        showNotification('Error loading chart data', 'error');
    }
}

function applyFilters() {
    try {
        const form = document.createElement('form');
        form.method = 'GET';
        form.action = window.location.pathname;
        
        // Get all filter inputs
        const inputs = document.querySelectorAll('input[name], select[name]');
        let hasFilters = false;
        
        inputs.forEach(input => {
            if (input.value && input.value !== '') {
                hasFilters = true;
                const inputClone = input.cloneNode(true);
                form.appendChild(inputClone);
            }
        });
        
        if (!hasFilters) {
            showNotification('Please select at least one filter', 'warning');
            return;
        }
        
        document.body.appendChild(form);
        form.submit();
        
    } catch (error) {
        console.error('Error applying filters:', error);
        showNotification('Error applying filters', 'error');
    }
}

function exportReport() {
    const button = event.target.closest('button');
    const originalContent = showLoading(button);
    
    try {
        // Get current filters
        const params = new URLSearchParams(window.location.search);
        
        // Add current date range if not present
        if (!params.has('start_date') && !params.has('end_date')) {
            const today = new Date();
            const lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
            
            params.set('start_date', lastMonth.toISOString().split('T')[0]);
            params.set('end_date', today.toISOString().split('T')[0]);
        }
        
        // Create export URL
        const exportUrl = `{{ route('reports.transit.export') }}?${params.toString()}`;
        
        // Create temporary link for download
        const link = document.createElement('a');
        link.href = exportUrl;
        link.target = '_blank';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        
        showNotification('Export started successfully!', 'success');
        
    } catch (error) {
        console.error('Error exporting report:', error);
        showNotification('Error exporting report. Please try again.', 'error');
    } finally {
        setTimeout(() => {
            hideLoading(button, originalContent);
        }, 1000);
    }
}

function generateReport() {
    const button = event.target.closest('button');
    const originalContent = showLoading(button);
    
    try {
        // Get current filters
        const params = new URLSearchParams(window.location.search);
        
        // Show report generation with current filters
        if (params.toString()) {
            // If filters are applied, refresh the page with filters to show updated report
            showNotification('Report refreshed with current filters!', 'success');
            
            // Reload the page to show updated report data
            setTimeout(() => {
                window.location.reload();
            }, 1000);
            
        } else {
            // Show prompt to select filters first
            showNotification('Please select filters first, then generate report', 'warning');
            // Scroll to filters section
            const filterSection = document.querySelector('.grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-5');
            if (filterSection) {
                filterSection.scrollIntoView({ 
                    behavior: 'smooth',
                    block: 'center'
                });
            }
        }
        
    } catch (error) {
        console.error('Error generating report:', error);
        showNotification('Error generating report. Please try again.', 'error');
    } finally {
        setTimeout(() => {
            hideLoading(button, originalContent);
        }, 1000);
    }
}

// Additional utility functions
function resetFilters() {
    try {
        const inputs = document.querySelectorAll('input[name], select[name]');
        inputs.forEach(input => {
            if (input.tagName === 'SELECT') {
                input.selectedIndex = 0;
            } else {
                input.value = '';
            }
        });
        
        showNotification('Filters reset successfully', 'info');
    } catch (error) {
        console.error('Error resetting filters:', error);
        showNotification('Error resetting filters', 'error');
    }
}

function printReport() {
    try {
        window.print();
        showNotification('Print dialog opened', 'info');
    } catch (error) {
        console.error('Error printing:', error);
        showNotification('Error opening print dialog', 'error');
    }
}

// Keyboard shortcuts
document.addEventListener('keydown', function(event) {
    // Ctrl/Cmd + E for export
    if ((event.ctrlKey || event.metaKey) && event.key === 'e') {
        event.preventDefault();
        exportReport();
    }
    
    // Ctrl/Cmd + G for generate report
    if ((event.ctrlKey || event.metaKey) && event.key === 'g') {
        event.preventDefault();
        generateReport();
    }
    
    // Ctrl/Cmd + R for reset filters
    if ((event.ctrlKey || event.metaKey) && event.key === 'r') {
        event.preventDefault();
        resetFilters();
    }
});
</script>