<x-app-layout>
    <x-slot name="header">
        <div class="flex justify-between items-center">
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ __('My Trips') }}
            </h2>
            <a href="{{ route('trips.create') }}" class="bg-blue-600 text-white px-4 py-2 rounded shadow hover:bg-blue-700">Add Trip</a>
        </div>
    </x-slot>

    <div class="py-6">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            
            @if(session('success'))
                <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-4" role="alert">
                    <p>{{ session('success') }}</p>
                </div>
            @endif

            @if(session('error'))
                <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4" role="alert">
                    <p>{{ session('error') }}</p>
                </div>
            @endif

            <!-- Driver Summary Card -->
            <div class="bg-white rounded-lg shadow-md p-4 mb-6 border-l-4 border-indigo-500 mx-4 sm:mx-0">
                <div class="flex justify-between items-center">
                    <div>
                        <h3 class="font-bold text-lg text-gray-800">{{ $driver->driver_name }}</h3>
                        <p class="text-sm text-gray-500">{{ $driver->phone }} • License: {{ $driver->license_number }}</p>
                    </div>
                    <div class="text-right">
                        <p class="text-xs text-gray-500">Total Trips</p>
                        <p class="text-2xl font-black text-indigo-600">{{ $trips->total() }}</p>
                    </div>
                </div>
            </div>

            @if($trips->isEmpty())
                <div class="bg-white rounded-lg shadow-md p-8 text-center mx-4 sm:mx-0">
                    <svg class="mx-auto h-16 w-16 text-gray-300 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 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"/>
                    </svg>
                    <h3 class="text-lg font-semibold text-gray-600">No trips yet</h3>
                    <p class="text-gray-400 mt-1">Start adding trips to see them here.</p>
                    <a href="{{ route('trips.create') }}" class="mt-4 inline-block bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition">Add Your First Trip</a>
                </div>
            @else
                <!-- Mobile First Card Layout -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 px-4 sm:px-0">
                    @foreach($trips as $trip)
                        <div class="bg-white rounded-lg shadow-md p-4 border-t-4 border-blue-500">
                            <div class="flex justify-between items-start mb-2">
                                <div>
                                    <span class="text-xs font-bold text-gray-400 uppercase">{{ $trip->date->format('d M Y') }}</span>
                                    <h3 class="font-bold text-lg text-gray-800">{{ $trip->location }}</h3>
                                </div>
                                <span class="px-2 py-1 bg-gray-100 text-xs font-bold rounded uppercase">{{ $trip->trip_type }}</span>
                            </div>
                            
                            <div class="text-sm text-gray-600 mb-4 border-b pb-2">
                                <p><strong>Vehicle:</strong> {{ $trip->vehicle->vehicle_number ?? 'N/A' }}</p>
                                <p><strong>Total KM:</strong> {{ $trip->total_km }} km</p>
                            </div>
                            
                            <div class="flex justify-between items-center">
                                <div>
                                    <p class="text-xs text-gray-500">Rent</p>
                                    <p class="font-bold text-green-600">₹{{ number_format($trip->rent_amount, 2) }}</p>
                                </div>
                                <div>
                                    <p class="text-xs text-gray-500">Fuel</p>
                                    <p class="font-bold text-red-500">₹{{ number_format($trip->fuel_cost, 2) }}</p>
                                </div>
                                <div class="text-right">
                                    <p class="text-xs text-gray-500">Profit</p>
                                    <p class="font-black text-blue-600">₹{{ number_format($trip->profit, 2) }}</p>
                                </div>
                            </div>
                            
                            <!-- Edit Button -->
                            <div class="mt-3 pt-3 border-t">
                                <a href="{{ route('trips.edit', $trip) }}" class="block w-full text-center text-sm font-medium px-3 py-1.5 rounded bg-blue-50 text-blue-700 hover:bg-blue-100 transition">
                                    ✏️ Edit Trip
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
                
                <div class="mt-4 px-4 sm:px-0">
                    {{ $trips->links() }}
                </div>
            @endif

        </div>
    </div>
</x-app-layout>
