@extends('layouts.app')

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

@section('content')
<div class="min-h-screen bg-gray-50 p-4 md:p-6 lg:p-8">
    <div class="max-w-7xl mx-auto">
        <!-- Header -->
        <div class="flex justify-between items-center mb-8">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">Transit History</h1>
                <p class="mt-2 text-gray-600">View historical transit movements and records</p>
            </div>
            <div class="flex space-x-3">
                <button class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-md transition duration-150 ease-in-out flex items-center" onclick="exportHistory()">
                    <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                    Export
                </button>
            </div>
        </div>

        <!-- Filters -->
        <div class="bg-white shadow rounded-lg mb-6 p-6">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Date Range</label>
                    <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" id="date_from" value="{{ request('date_from', now()->subDays(30)->format('Y-m-d')) }}">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">&nbsp;</label>
                    <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" id="date_to" value="{{ request('date_to', now()->format('Y-m-d')) }}">
                </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 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" id="employee_filter">
                        <option value="">All Employees</option>
                        @foreach($employees ?? [] as $employee)
                            <option value="{{ $employee->id }}">{{ $employee->full_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 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" id="status_filter">
                        <option value="">All Status</option>
                        <option value="completed">Completed</option>
                        <option value="rejected">Rejected</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">&nbsp;</label>
                    <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition duration-150 ease-in-out" onclick="filterHistory()">Filter</button>
                </div>
            </div>
        </div>

        <!-- Summary Cards -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
            <div class="bg-blue-600 rounded-lg shadow p-6">
                <div class="flex items-center">
                    <div class="flex-1">
                        <p class="text-blue-100 text-sm font-medium">Total Transits</p>
                        <p class="text-3xl font-bold text-white">{{ $transits->count() }}</p>
                    </div>
                    <div class="ml-4">
                        <svg class="h-12 w-12 text-blue-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="bg-green-600 rounded-lg shadow p-6">
                <div class="flex items-center">
                    <div class="flex-1">
                        <p class="text-green-100 text-sm font-medium">Completed</p>
                        <p class="text-3xl font-bold text-white">{{ $transits->where('status', 'completed')->count() }}</p>
                    </div>
                    <div class="ml-4">
                        <svg class="h-12 w-12 text-green-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="bg-yellow-600 rounded-lg shadow p-6">
                <div class="flex items-center">
                    <div class="flex-1">
                        <p class="text-yellow-100 text-sm font-medium">Rejected</p>
                        <p class="text-3xl font-bold text-white">{{ $transits->where('status', 'rejected')->count() }}</p>
                    </div>
                    <div class="ml-4">
                        <svg class="h-12 w-12 text-yellow-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="bg-purple-600 rounded-lg shadow p-6">
                <div class="flex items-center">
                    <div class="flex-1">
                        <p class="text-purple-100 text-sm font-medium">Avg Duration</p>
                        <p class="text-3xl font-bold text-white">{{ $transits->getCollection()->whereNotNull('transit_duration_minutes')->avg('transit_duration_minutes') ? round($transits->getCollection()->whereNotNull('transit_duration_minutes')->avg('transit_duration_minutes')) . 'm' : 'N/A' }}</p>
                    </div>
                    <div class="ml-4">
                        <svg class="h-12 w-12 text-purple-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                        </svg>
                    </div>
                </div>
            </div>
        </div>

                    <!-- Transits Table -->
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead class="bg-gradient-to-r from-gray-50 to-gray-100 border-b border-gray-200">
                                <tr>
                                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Date</th>
                                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Employee</th>
                                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">From</th>
                                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">To</th>
                                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Duration</th>
                                    <th class="px-6 py-3 text-center text-sm font-semibold text-gray-900">Status</th>
                                    <th class="px-6 py-3 text-right text-sm font-semibold text-gray-900">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200">
                                @forelse($transits ?? [] as $transit)
                                    <tr class="hover:bg-gray-50 transition-colors">
                                        <td class="px-6 py-4 text-sm text-gray-700">
                                            {{ $transit->transit_date?->format('M d, Y') ?? 'N/A' }}
                                        </td>
                                        <td class="px-6 py-4">
                                            <div class="flex items-center gap-3">
                                                <div class="flex-shrink-0">
                                                    <div class="flex items-center justify-center h-8 w-8 rounded-full bg-blue-100">
                                                        <i class="fas fa-user text-blue-600 text-sm"></i>
                                                    </div>
                                                </div>
                                                <div>
                                                    <p class="text-sm font-medium text-gray-900">{{ $transit->employee?->full_name ?? 'N/A' }}</p>
                                                    <p class="text-xs text-gray-500">{{ $transit->employee?->profile?->employee_id ?? '' }}</p>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4">
                                            <p class="text-sm font-medium text-gray-900">{{ $transit->fromService?->service_name ?? 'N/A' }}</p>
                                            <p class="text-xs text-gray-500">{{ $transit->fromService?->client?->name ?? '' }}</p>
                                        </td>
                                        <td class="px-6 py-4">
                                            <p class="text-sm font-medium text-gray-900">{{ $transit->toService?->service_name ?? 'N/A' }}</p>
                                            <p class="text-xs text-gray-500">{{ $transit->toService?->client?->name ?? '' }}</p>
                                        </td>
                                        <td class="px-6 py-4 text-sm text-gray-700">
                                            {{ $transit->formatted_duration }}
                                        </td>
                                        <td class="px-6 py-4 text-center">
                                            {!! $transit->status_badge !!}
                                        </td>
                                        <td class="px-6 py-4 text-right">
                                            <div class="flex justify-end gap-2">
                                                <button class="inline-flex items-center px-3 py-1 text-sm text-blue-600 hover:text-blue-900 hover:bg-blue-50 rounded transition-colors" onclick="viewTransit({{ $transit->id }})">
                                                    <i class="fas fa-eye mr-1"></i>View
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center py-12">
                                            <i class="fas fa-route text-gray-300 text-5xl mb-4"></i>
                                            <h3 class="text-lg font-medium text-gray-900 mb-2">No transit history found</h3>
                                            <p class="text-gray-600">Try adjusting your filters.</p>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    {{ $transits->links() }}
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
function filterHistory() {
    const params = new URLSearchParams({
        date_from: document.getElementById('date_from').value,
        date_to: document.getElementById('date_to').value,
        employee_id: document.getElementById('employee_filter').value,
        status: document.getElementById('status_filter').value
    });
    
    window.location.href = `{{ route('transit.history') }}?${params.toString()}`;
}

function viewTransit(id) {
    fetch(`/transit/${id}`)
        .then(response => response.json())
        .then(data => {
            const content = `
                <div class="row">
                    <div class="col-md-6">
                        <h6>Transit Information</h6>
                        <p><strong>ID:</strong> ${data.id}</p>
                        <p><strong>Status:</strong> ${data.status}</p>
                        <p><strong>Transit Date:</strong> ${data.transit_date || 'N/A'}</p>
                        <p><strong>Start Time:</strong> ${data.start_time || 'N/A'}</p>
                        <p><strong>End Time:</strong> ${data.end_time || 'N/A'}</p>
                        <p><strong>Duration:</strong> ${data.transit_duration_minutes ? data.transit_duration_minutes + ' min' : 'N/A'}</p>
                    </div>
                    <div class="col-md-6">
                        <h6>Route Information</h6>
                        <p><strong>From:</strong> ${(data.from_service?.service_name || 'N/A')} ${(data.from_service?.client?.name ? '(' + data.from_service.client.name + ')' : '')}</p>
                        <p><strong>To:</strong> ${(data.to_service?.service_name || 'N/A')} ${(data.to_service?.client?.name ? '(' + data.to_service.client.name + ')' : '')}</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <h6>Employee Information</h6>
                        <p><strong>Name:</strong> ${data.employee.full_name}</p>
                        <p><strong>Email:</strong> ${data.employee.email}</p>
                        <p><strong>Employee ID:</strong> ${data.employee.profile?.employee_id || 'N/A'}</p>
                    </div>
                </div>
                ${data.approval_notes ? `
                    <div class="row mt-3">
                        <div class="col-12">
                            <h6>Notes</h6>
                            <p>${data.approval_notes}</p>
                        </div>
                    </div>
                ` : ''}
            `;
            
            document.getElementById('transitDetailsContent').innerHTML = content;
            new bootstrap.Modal(document.getElementById('transitDetailsModal')).show();
        });
}

function exportHistory() {
    const params = new URLSearchParams({
        date_from: document.getElementById('date_from').value,
        date_to: document.getElementById('date_to').value,
        employee_id: document.getElementById('employee_filter').value,
        status: document.getElementById('status_filter').value
    });
    
    window.location.href = `/transit/history/export?${params.toString()}`;
}
</script>
@endsection