@extends('layouts.app')

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

@section('content')
<div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold text-gray-800 mb-2">Request a Product</h1>
    <p class="text-gray-500 mb-8">Can't find what you're looking for? Let us know!</p>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <div class="bg-white rounded-xl shadow-md p-6">
            <h2 class="text-xl font-semibold text-gray-800 mb-4">Submit Request</h2>
            
            <form method="POST" action="{{ route('product-requests.store') }}" enctype="multipart/form-data" class="space-y-4">
                @csrf
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Product Name</label>
                    <input type="text" name="product_name" required 
                           class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
                           placeholder="What product do you want?">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Description (Optional)</label>
                    <textarea name="description" rows="3" 
                              class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
                              placeholder="Any details about the product..."></textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Image (Optional)</label>
                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-primary-500 transition-colors">
                        <input type="file" name="image" accept="image/*" class="hidden" id="product-image">
                        <label for="product-image" class="cursor-pointer">
                            <i class="fas fa-camera text-2xl text-gray-400 mb-2"></i>
                            <p class="text-sm text-gray-500">Upload product image</p>
                        </label>
                    </div>
                </div>
                <button type="submit" class="w-full py-3 bg-green-600 text-white font-bold rounded-lg hover:bg-green-700 shadow-md">
                    Submit Request
                </button>
            </form>
        </div>

        <div class="bg-white rounded-xl shadow-md p-6">
            <h2 class="text-xl font-semibold text-gray-800 mb-4">My Requests</h2>
            
            @if($requests->isEmpty())
                <p class="text-gray-500 text-center py-8">No requests yet</p>
            @else
                <div class="space-y-4">
                    @foreach($requests as $req)
                    <div class="flex items-start gap-4 p-4 bg-gray-50 rounded-lg">
                        @if($req->image_path)
                            <img src="{{ asset('storage/' . $req->image_path) }}" 
                                 class="w-16 h-16 object-cover rounded-lg">
                        @else
                            <div class="w-16 h-16 bg-gray-200 rounded-lg flex items-center justify-center">
                                <i class="fas fa-image text-gray-400"></i>
                            </div>
                        @endif
                        <div class="flex-1">
                            <p class="font-semibold text-gray-800">{{ $req->product_name }}</p>
                            <p class="text-sm text-gray-500">{{ $req->description }}</p>
                            <span class="text-xs px-2 py-0.5 rounded-full 
                                @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>
                        </div>
                    </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>
</div>
@endsection