@extends('layouts.app')

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

@push('styles')
<style>
body {
    width: 81%;
    margin-top: 50px;
    margin-left: 259px;
    overflow-x: hidden;
}
</style>
@endpush

@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">
                <a href="{{ route('transit.index') }}" class="bg-gray-600 hover:bg-gray-700 text-white font-medium py-2 px-4 rounded-md transition duration-150 ease-in-out flex items-center">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Back to Active Transits
                </a>
                <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()">
                    <i class="fas fa-download mr-2"></i>
                    Export
                </button>
            </div>
        </div>

        <!-- Filters -->
        <div class="bg-white shadow rounded-lg mb-6 p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Filters</h3>
            <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 From</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">Date To</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 }}" {{ request('employee_id') == $employee->id ? 'selected' : '' }}>
                                {{ $employee->full_name ?? $employee->first_name . ' ' . $employee->last_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" {{ request('status') == 'completed' ? 'selected' : '' }}>Completed</option>
                        <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Rejected</option>
                    </select>
                </div>
                <div class="md:col-span-4">
                    <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-md transition duration-150 ease-in-out" onclick="filterHistory()">
                        <i class="fas fa-filter mr-2"></i>Apply Filters
                    </button>
                    <button class="ml-2 bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-6 rounded-md transition duration-150 ease-in-out" onclick="clearFilters()">
                        <i class="fas fa-times mr-2"></i>Clear
                    </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->total() }}</p>
                    </div>
                    <div class="ml-4">
                        <i class="fas fa-route text-blue-300 text-3xl"></i>
                    </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->getCollection()->where('status', 'completed')->count() }}</p>
                    </div>
                    <div class="ml-4">
                        <i class="fas fa-check-circle text-green-300 text-3xl"></i>
                    </div>
                </div>
            </div>
            <div class="bg-red-600 rounded-lg shadow p-6">
                <div class="flex items-center">
                    <div class="flex-1">
                        <p class="text-red-100 text-sm font-medium">Rejected</p>
                        <p class="text-3xl font-bold text-white">{{ $transits->getCollection()->where('status', 'rejected')->count() }}</p>
                    </div>
                    <div class="ml-4">
                        <i class="fas fa-times-circle text-red-300 text-3xl"></i>
                    </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">
                        <i class="fas fa-clock text-purple-300 text-3xl"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Transits Table -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <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">
                                    @if($transit->transit_duration_minutes)
                                        {{ $transit->transit_duration_minutes }} min
                                    @else
                                        N/A
                                    @endif
                                </td>
                                <td class="px-6 py-4 text-center">
                                    @switch($transit->status)
                                        @case('completed')
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                                <i class="fas fa-check-circle mr-1"></i>Completed
                                            </span>
                                            @break
                                        @case('rejected')
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                                <i class="fas fa-times-circle mr-1"></i>Rejected
                                            </span>
                                            @break
                                        @default
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                                {{ $transit->status }}
                                            </span>
                                    @endswitch
                                </td>
                                <td class="px-6 py-4 text-right">
                                    <a href="{{ route('transit.show', $transit->id) }}?from_history=1" 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">
                                        <i class="fas fa-eye mr-1"></i>View
                                    </a>
                                </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 -->
            @if($transits->hasPages())
                <div class="px-6 py-4 border-t border-gray-200">
                    {{ $transits->links() }}
                </div>
            @endif
        </div>
    </div>
</div>

@push('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 clearFilters() {
    window.location.href = `{{ route('transit.history') }}`;
}

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 = `{{ route('transit.history.export') }}?${params.toString()}`;
}
</script>
@endpush