@extends('admin.layout')

@section('title', 'Product Requests')

@section('admin-content')
<div class="flex items-center justify-between mb-8">
    <div>
        <h1 class="text-3xl font-bold text-gray-900">Product Requests</h1>
        <p class="text-gray-500 mt-1">Manage customer product requests</p>
    </div>
</div>

<div class="bg-white rounded-2xl shadow-lg overflow-hidden">
    @if($requests->isEmpty())
        <div class="text-center py-16">
            <i class="fas fa-inbox text-6xl text-gray-300 mb-4"></i>
            <p class="text-gray-500 text-lg">No product requests yet.</p>
        </div>
    @else
        <table class="w-full">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Customer</th>
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Product</th>
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Description</th>
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Image</th>
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Status</th>
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Date</th>
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @foreach($requests as $req)
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4">
                        <div>
                            <p class="font-medium text-gray-900">{{ $req->user->name }}</p>
                            <p class="text-sm text-gray-500">{{ $req->user->email }}</p>
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <a href="{{ route('admin.product-requests.show', $req) }}" class="font-medium text-blue-600 hover:text-blue-800">
                            {{ $req->product_name }}
                        </a>
                    </td>
                    <td class="px-6 py-4">
                        <p class="text-sm text-gray-600 max-w-xs truncate">{{ $req->description }}</p>
                    </td>
                    <td class="px-6 py-4">
                        @if($req->image_path)
                            <img src="{{ asset('storage/' . $req->image_path) }}" class="w-12 h-12 rounded-lg object-cover">
                        @else
                            <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-image text-gray-400"></i>
                            </div>
                        @endif
                    </td>
                    <td class="px-6 py-4">
                        <span class="px-3 py-1 rounded-full text-sm font-medium 
                            @if($req->status === 'fulfilled') bg-green-100 text-green-600
                            @elseif($req->status === 'rejected') bg-red-100 text-red-600
                            @else bg-yellow-100 text-yellow-600 @endif">
                            {{ ucfirst($req->status) }}
                        </span>
                    </td>
                    <td class="px-6 py-4 text-gray-500 text-sm">
                        {{ $req->created_at->format('M d, Y') }}
                    </td>
                    <td class="px-6 py-4">
                        @if($req->status === 'pending')
                        <div class="flex space-x-2">
                            <form method="POST" action="{{ route('admin.product-requests.fulfill', $req) }}">
                                @csrf
                                <button type="submit" class="px-3 py-1 bg-green-500 text-white text-sm rounded hover:bg-green-600">
                                    Fulfill
                                </button>
                            </form>
                            <form method="POST" action="{{ route('admin.product-requests.reject', $req) }}">
                                @csrf
                                <button type="submit" class="px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600">
                                    Reject
                                </button>
                            </form>
                        </div>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    @endif
</div>
@endsection