<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center space-x-4">
            <div>
                <h1 class="text-2xl font-bold text-gray-900">Orders</h1>
                <p class="text-gray-600 text-sm mt-0.5">Manage laundry orders and track progress</p>
            </div>
        </div>
    </x-slot>

    <div class="p-6">
        <div class="max-w-7xl mx-auto">
            <!-- Filters and Search -->
            <div class="bg-white overflow-hidden shadow-lg rounded-xl mb-8 border border-gray-100">
                <div class="p-6">
                    <form method="GET" action="{{ route('orders.index') }}" class="flex flex-wrap gap-4">
                        <div class="flex-1 min-w-64">
                            <input type="text" 
                                   name="search" 
                                   value="{{ $search }}"
                                   placeholder="Search by order number, customer name, or phone..."
                                   class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200 text-gray-900 placeholder-gray-500">
                        </div>
                        <div class="min-w-48">
                            <select name="status" 
                                    class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200 text-gray-900">
                                <option value="">All Statuses</option>
                                <option value="created" {{ $status === 'created' ? 'selected' : '' }}>Created</option>
                                <option value="processing" {{ $status === 'processing' ? 'selected' : '' }}>Processing</option>
                                <option value="ready" {{ $status === 'ready' ? 'selected' : '' }}>Ready</option>
                                <option value="completed" {{ $status === 'completed' ? 'selected' : '' }}>Completed</option>
                                <option value="cancelled" {{ $status === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                            </select>
                        </div>
                        <button type="submit" 
                                class="bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold py-3 px-6 rounded-xl transition-all duration-200 flex items-center shadow-lg hover:shadow-xl">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                            </svg>
                            Search
                        </button>
                        @if($search || $status)
                            <a href="{{ route('orders.index') }}" 
                               class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold py-3 px-6 rounded-xl transition-all duration-200 flex items-center">
                                Clear
                            </a>
                        @endif
                    </form>
                </div>
            </div>

            <!-- Orders List -->
            <div class="space-y-4">
                @forelse($orders as $order)
                    <div class="bg-white overflow-hidden shadow-lg rounded-xl hover:shadow-xl transition-all duration-300 border border-gray-100">
                        <div class="p-6">
                            <div class="flex items-center justify-between mb-4">
                                <div class="flex items-center space-x-4">
                                    <div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center text-white font-bold shadow-lg">
                                        {{ strtoupper(substr($order->customer->full_name, 0, 1)) }}
                                    </div>
                                    <div>
                                        <h3 class="text-lg font-semibold text-gray-900">{{ $order->order_number }}</h3>
                                        <p class="text-sm text-gray-600">{{ $order->customer->full_name }} • {{ $order->customer->phone }}</p>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-3">
                                    <span class="px-3 py-1 text-sm font-medium rounded-full {{ $order->status_color }}">
                                        {{ ucfirst($order->status) }}
                                    </span>
                                    <div class="text-right">
                                        <div class="text-lg font-bold text-gray-900">₦{{ number_format($order->final_amount, 2) }}</div>
                                        @if($order->outstanding_balance > 0)
                                            <div class="text-sm text-red-600 font-medium">Balance: ₦{{ number_format($order->outstanding_balance, 2) }}</div>
                                        @else
                                            <div class="text-sm text-green-600 font-medium">Fully Paid</div>
                                        @endif
                                        <div class="text-sm text-gray-500">{{ $order->created_at->format('M d, Y') }}</div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                                <div class="text-sm">
                                    <span class="text-gray-500">Items:</span>
                                    <span class="font-medium text-gray-900">{{ $order->orderItems->count() }} items</span>
                                </div>
                                
                                <div class="text-sm">
                                    <span class="text-gray-500">Packaging:</span>
                                    <span class="font-medium text-gray-900">{{ ucfirst($order->packaging_preference) }}</span>
                                </div>
                            </div>
                            
                            <div class="flex items-center justify-between pt-4 border-t border-gray-200">
                                <div class="flex flex-wrap gap-2">
                                    @foreach($order->orderItems->take(3) as $item)
                                        <span class="px-3 py-1 bg-gray-100 text-gray-700 text-xs rounded-lg font-medium">
                                            {{ $item->quantity }}x {{ $item->laundryItem->name }}
                                        </span>
                                    @endforeach
                                    @if($order->orderItems->count() > 3)
                                        <span class="px-3 py-1 bg-gray-100 text-gray-700 text-xs rounded-lg font-medium">
                                            +{{ $order->orderItems->count() - 3 }} more
                                        </span>
                                    @endif
                                </div>
                                <div class="flex space-x-3">
                                    <a href="{{ route('orders.show', $order) }}" 
                                       class="bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold py-2 px-4 rounded-xl transition-all duration-200 text-sm shadow-md hover:shadow-lg">
                                        View Details
                                    </a>
                                    @if($order->status === 'created')
                                        <a href="{{ route('orders.edit', $order) }}" 
                                           class="bg-gradient-to-r from-yellow-500 to-yellow-600 hover:from-yellow-600 hover:to-yellow-700 text-white font-semibold py-2 px-4 rounded-xl transition-all duration-200 text-sm shadow-md hover:shadow-lg">
                                            Edit
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="bg-white overflow-hidden shadow-lg rounded-xl border border-gray-100">
                        <div class="p-12 text-center">
                            <div class="w-20 h-20 bg-gradient-to-r from-gray-100 to-gray-200 rounded-full flex items-center justify-center mx-auto mb-6">
                                <svg class="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                                </svg>
                            </div>
                            <h3 class="text-xl font-semibold text-gray-900 mb-2">No orders found</h3>
                            <p class="text-gray-600 mb-8 max-w-md mx-auto">
                                @if($search || $status)
                                    No orders match your search criteria. Try adjusting your filters.
                                @else
                                    No orders have been created yet. Create your first order to get started.
                                @endif
                            </p>
                            <a href="{{ route('orders.create') }}" 
                               class="bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold py-3 px-6 rounded-xl transition-all duration-200 transform hover:scale-105 shadow-lg hover:shadow-xl inline-flex items-center">
                                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                                </svg>
                                Create First Order
                            </a>
                        </div>
                    </div>
                @endforelse
            </div>

            <!-- Pagination -->
            @if($orders->hasPages())
                <div class="mt-8">
                    {{ $orders->appends(request()->query())->links() }}
                </div>
            @endif
        </div>
    </div>
</x-app-layout>
