@extends('admin.layout')

@section('title', 'Product Request - ' . $productRequest->product_name)

@section('admin-content')
<div class="flex items-center justify-between mb-6">
    <div class="flex items-center space-x-4">
        <a href="{{ route('admin.product-requests.index') }}" class="text-gray-500 hover:text-gray-700">
            <i class="fas fa-arrow-left text-xl"></i>
        </a>
        <div>
            <h1 class="text-2xl font-bold text-gray-800">Product Request</h1>
            <p class="text-gray-500">{{ $productRequest->created_at->format('M d, Y H:i') }}</p>
        </div>
    </div>
    <span class="px-4 py-2 rounded-full text-sm font-medium 
        @if($productRequest->status === 'fulfilled') bg-green-100 text-green-600
        @elseif($productRequest->status === 'rejected') bg-red-100 text-red-600
        @else bg-yellow-100 text-yellow-600 @endif">
        {{ ucfirst($productRequest->status) }}
    </span>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2 space-y-6">
        <div class="bg-white rounded-xl shadow-md p-6">
            <h2 class="text-xl font-semibold text-gray-800 mb-4">Product Details</h2>
            
            <div class="space-y-4">
                <div>
                    <p class="text-sm text-gray-500">Product Name</p>
                    <p class="font-semibold text-gray-900">{{ $productRequest->product_name }}</p>
                </div>
                
                @if($productRequest->description)
                <div>
                    <p class="text-sm text-gray-500">Description</p>
                    <p class="text-gray-900">{{ $productRequest->description }}</p>
                </div>
                @endif
                
                @if($productRequest->image_path)
                <div>
                    <p class="text-sm text-gray-500 mb-2">Product Image</p>
                    <img src="{{ asset('storage/' . $productRequest->image_path) }}" 
                         class="max-w-md rounded-lg border">
                </div>
                @endif
            </div>
        </div>
    </div>
    
    <div class="space-y-6">
        <div class="bg-white rounded-xl shadow-md p-6">
            <h2 class="text-xl font-semibold text-gray-800 mb-4">Customer Info</h2>
            <p class="font-medium text-gray-900">{{ $productRequest->user->name }}</p>
            <p class="text-gray-600">{{ $productRequest->user->email }}</p>
            <p class="text-gray-600">{{ $productRequest->user->phone ?? 'No phone' }}</p>
        </div>
        
        @if($productRequest->status === 'pending')
        <div class="bg-white rounded-xl shadow-md p-6">
            <h2 class="text-xl font-semibold text-gray-800 mb-4">Actions</h2>
            <div class="space-y-3">
                <form method="POST" action="{{ route('admin.product-requests.fulfill', $productRequest) }}">
                    @csrf
                    <button type="submit" class="w-full px-4 py-3 bg-green-600 text-white font-bold rounded-lg hover:bg-green-700 shadow-md">
                        <i class="fas fa-check mr-2"></i>Mark as Fulfilled
                    </button>
                </form>
                <form method="POST" action="{{ route('admin.product-requests.reject', $productRequest) }}">
                    @csrf
                    <button type="submit" class="w-full px-4 py-3 bg-red-600 text-white font-bold rounded-lg hover:bg-red-700 shadow-md">
                        <i class="fas fa-times mr-2"></i>Reject Request
                    </button>
                </form>
            </div>
        </div>
        @endif
    </div>
</div>
@endsection