@extends('layouts.app')

@section('title', 'Transit Details - #' . $transit->id)

@section('content')
<div class="min-h-screen bg-gray-50 p-4 md:p-6 lg:p-8">
    <div class="max-w-4xl mx-auto">
        <!-- Header -->
        <div class="flex justify-between items-center mb-8">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">Transit Details</h1>
                <p class="mt-2 text-gray-600">View detailed information about this transit</p>
            </div>
            <div class="flex space-x-3">
                <a href="{{ request()->get('from_history') ? route('transit.history') : 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>
                    {{ request()->get('from_history') ? 'Back to History' : 'Back to Transits' }}
                </a>
            </div>
        </div>

        <!-- Status Badge -->
        <div class="mb-6">
            @switch($transit->status)
                @case('pending')
                    <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
                        <i class="fas fa-clock mr-2"></i>Pending Approval
                    </span>
                    @break
                @case('approved')
                    <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                        <i class="fas fa-check-circle mr-2"></i>Approved
                    </span>
                    @break
                @case('in_progress')
                    <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-purple-100 text-purple-800">
                        <i class="fas fa-play-circle mr-2"></i>In Progress
                    </span>
                    @break
                @case('completed')
                    <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-green-100 text-green-800">
                        <i class="fas fa-check-circle mr-2"></i>Completed
                    </span>
                    @break
                @case('rejected')
                    <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-red-100 text-red-800">
                        <i class="fas fa-times-circle mr-2"></i>Rejected
                    </span>
                    @break
                @default
                    <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-gray-100 text-gray-800">
                        {{ $transit->status }}
                    </span>
            @endswitch
        </div>

        <!-- Main Content Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Left Column - Main Info -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Transit Information -->
                <div class="bg-white shadow rounded-lg p-6">
                    <h2 class="text-xl font-semibold text-gray-900 mb-4 flex items-center">
                        <i class="fas fa-route mr-2 text-blue-600"></i>
                        Transit Information
                    </h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <p class="text-sm font-medium text-gray-500">Transit ID</p>
                            <p class="text-lg font-semibold text-gray-900">#{{ $transit->id }}</p>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-500">Transit Date</p>
                            <p class="text-lg font-semibold text-gray-900">{{ $transit->transit_date?->format('M d, Y') ?? 'N/A' }}</p>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-500">Start Time</p>
                            <p class="text-lg font-semibold text-gray-900">{{ $transit->start_time?->format('h:i A') ?? 'Not set' }}</p>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-500">End Time</p>
                            <p class="text-lg font-semibold text-gray-900">{{ $transit->end_time?->format('h:i A') ?? 'Not set' }}</p>
                        </div>
                        <div class="md:col-span-2">
                            <p class="text-sm font-medium text-gray-500">Duration</p>
                            <p class="text-lg font-semibold text-gray-900">
                                @if($transit->transit_duration_minutes)
                                    {{ $transit->transit_duration_minutes }} minutes
                                @else
                                    Not calculated
                                @endif
                            </p>
                        </div>
                        @if($transit->reason)
                            <div class="md:col-span-2">
                                <p class="text-sm font-medium text-gray-500">Reason</p>
                                <p class="text-lg font-semibold text-gray-900">{{ $transit->reason }}</p>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Route Information -->
                <div class="bg-white shadow rounded-lg p-6">
                    <h2 class="text-xl font-semibold text-gray-900 mb-4 flex items-center">
                        <i class="fas fa-exchange-alt mr-2 text-green-600"></i>
                        Route Information
                    </h2>
                    <div class="space-y-6">
                        <!-- From Location -->
                        <div class="flex items-start space-x-4">
                            <div class="flex-shrink-0">
                                <div class="flex items-center justify-center h-10 w-10 rounded-full bg-red-100">
                                    <i class="fas fa-map-marker-alt text-red-600"></i>
                                </div>
                            </div>
                            <div class="flex-1">
                                <h3 class="text-lg font-medium text-gray-900">From</h3>
                                <p class="text-gray-900 font-semibold">{{ $transit->fromService?->service_name ?? 'N/A' }}</p>
                                <p class="text-sm text-gray-600">{{ $transit->fromService?->client?->name ?? '' }}</p>
                            </div>
                        </div>

                        <!-- Arrow -->
                        <div class="flex justify-center">
                            <div class="flex items-center text-gray-400">
                                <i class="fas fa-arrow-down text-2xl"></i>
                            </div>
                        </div>

                        <!-- To Location -->
                        <div class="flex items-start space-x-4">
                            <div class="flex-shrink-0">
                                <div class="flex items-center justify-center h-10 w-10 rounded-full bg-green-100">
                                    <i class="fas fa-map-marker-alt text-green-600"></i>
                                </div>
                            </div>
                            <div class="flex-1">
                                <h3 class="text-lg font-medium text-gray-900">To</h3>
                                <p class="text-gray-900 font-semibold">{{ $transit->toService?->service_name ?? 'N/A' }}</p>
                                <p class="text-sm text-gray-600">{{ $transit->toService?->client?->name ?? '' }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Approval Information (if applicable) -->
                @if($transit->approvedBy || $transit->approval_notes)
                    <div class="bg-white shadow rounded-lg p-6">
                        <h2 class="text-xl font-semibold text-gray-900 mb-4 flex items-center">
                            <i class="fas fa-stamp mr-2 text-purple-600"></i>
                            Approval Information
                        </h2>
                        <div class="space-y-4">
                            @if($transit->approvedBy)
                                <div>
                                    <p class="text-sm font-medium text-gray-500">Approved By</p>
                                    <p class="text-lg font-semibold text-gray-900">{{ $transit->approvedBy->full_name }}</p>
                                    <p class="text-sm text-gray-600">{{ $transit->approvedBy->email }}</p>
                                </div>
                            @endif
                            @if($transit->approval_notes)
                                <div>
                                    <p class="text-sm font-medium text-gray-500">Approval Notes</p>
                                    <p class="text-gray-900">{{ $transit->approval_notes }}</p>
                                </div>
                            @endif
                        </div>
                    </div>
                @endif
            </div>

            <!-- Right Column - Employee & Actions -->
            <div class="space-y-6">
                <!-- Employee Information -->
                <div class="bg-white shadow rounded-lg p-6">
                    <h2 class="text-xl font-semibold text-gray-900 mb-4 flex items-center">
                        <i class="fas fa-user mr-2 text-indigo-600"></i>
                        Employee Information
                    </h2>
                    <div class="text-center mb-4">
                        <div class="flex items-center justify-center h-16 w-16 rounded-full bg-indigo-100 mx-auto mb-3">
                            <i class="fas fa-user text-indigo-600 text-2xl"></i>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900">{{ $transit->employee?->full_name ?? 'N/A' }}</h3>
                        <p class="text-sm text-gray-600">{{ $transit->employee?->email ?? '' }}</p>
                    </div>
                    <div class="space-y-3">
                        <div>
                            <p class="text-sm font-medium text-gray-500">Employee ID</p>
                            <p class="text-gray-900">{{ $transit->employee?->profile?->employee_id ?? 'N/A' }}</p>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-500">Department</p>
                            <p class="text-gray-900">{{ $transit->employee?->profile?->department ?? 'N/A' }}</p>
                        </div>
                    </div>
                </div>

                <!-- Timeline -->
                <div class="bg-white shadow rounded-lg p-6">
                    <h2 class="text-xl font-semibold text-gray-900 mb-4 flex items-center">
                        <i class="fas fa-history mr-2 text-orange-600"></i>
                        Timeline
                    </h2>
                    <div class="space-y-4">
                        <div class="flex items-start space-x-3">
                            <div class="flex-shrink-0">
                                <div class="flex items-center justify-center h-6 w-6 rounded-full bg-blue-100">
                                    <i class="fas fa-plus text-blue-600 text-xs"></i>
                                </div>
                            </div>
                            <div>
                                <p class="text-sm font-medium text-gray-900">Created</p>
                                <p class="text-xs text-gray-600">{{ $transit->created_at->format('M d, Y h:i A') }}</p>
                            </div>
                        </div>

                        @if($transit->start_time)
                            <div class="flex items-start space-x-3">
                                <div class="flex-shrink-0">
                                    <div class="flex items-center justify-center h-6 w-6 rounded-full bg-purple-100">
                                        <i class="fas fa-play text-purple-600 text-xs"></i>
                                    </div>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-900">Started</p>
                                    <p class="text-xs text-gray-600">{{ $transit->start_time->format('M d, Y h:i A') }}</p>
                                </div>
                            </div>
                        @endif

                        @if($transit->end_time)
                            <div class="flex items-start space-x-3">
                                <div class="flex-shrink-0">
                                    <div class="flex items-center justify-center h-6 w-6 rounded-full bg-green-100">
                                        <i class="fas fa-stop text-green-600 text-xs"></i>
                                    </div>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-900">Completed</p>
                                    <p class="text-xs text-gray-600">{{ $transit->end_time->format('M d, Y h:i A') }}</p>
                                </div>
                            </div>
                        @endif

                        @if($transit->updated_at && $transit->updated_at != $transit->created_at)
                            <div class="flex items-start space-x-3">
                                <div class="flex-shrink-0">
                                    <div class="flex items-center justify-center h-6 w-6 rounded-full bg-gray-100">
                                        <i class="fas fa-edit text-gray-600 text-xs"></i>
                                    </div>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-900">Last Updated</p>
                                    <p class="text-xs text-gray-600">{{ $transit->updated_at->format('M d, Y h:i A') }}</p>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection