@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Rides</h1>
        <a href="{{ route('rides.create') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">
            Add New Ride
        </a>
    </div>

    <!-- Search and Filters -->
    <form method="GET" class="mb-6">
        <div class="flex gap-4">
            <input type="text" name="search" value="{{ request('search') }}" 
                   placeholder="Search rides..." 
                   class="flex-1 px-4 py-2 border border-gray-300 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            <select name="status" class="px-4 py-2 border border-gray-300 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                <option value="">All Status</option>
                <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
                <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
            </select>
            <button type="submit" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg">
                Search
            </button>
        </div>
    </form>

    <!-- Results -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
        @forelse($rides as $ride)
            <div class="p-6 border-b border-gray-200 dark:border-gray-700">
                <div class="flex justify-between items-start">
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                            <a href="{{ route('rides.show', $ride) }}" class="hover:text-blue-600">
                                {{ $ride->name }}
                            </a>
                        </h3>
                        @if($ride->description)
                            <p class="text-gray-600 dark:text-gray-400 mt-2">{{ $ride->description }}</p>
                        @endif
                        <div class="flex items-center mt-2 space-x-4">
                            <span class="text-sm text-gray-500">
                                {{ $ride->created_at->format('M j, Y') }}
                            </span>
                            <span class="px-2 py-1 text-xs rounded-full {{ $ride->is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                {{ $ride->is_active ? 'Active' : 'Inactive' }}
                            </span>
                        </div>
                    </div>
                    <div class="flex space-x-2">
                        <a href="{{ route('rides.edit', $ride) }}" class="text-blue-600 hover:text-blue-800">Edit</a>
                        <form action="{{ route('rides.destroy', $ride) }}" method="POST" class="inline">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-red-600 hover:text-red-800" 
                                    onclick="return confirm('Are you sure?')">Delete</button>
                        </form>
                    </div>
                </div>
            </div>
        @empty
            <div class="p-6 text-center text-gray-500 dark:text-gray-400">
                No rides found.
            </div>
        @endforelse
    </div>

    <!-- Pagination -->
    @if($rides->hasPages())
        <div class="mt-6">
            {{ $rides->links() }}
        </div>
    @endif
</div>
@endsection