@extends('admin.layout')

@section('title', 'Pairings')

@section('admin-content')
<div class="mb-8">
    <h1 class="text-3xl font-bold text-gray-900">Pairings Monitor</h1>
    <p class="text-gray-500 mt-1">Track and manage active product pairings</p>
</div>

<div class="space-y-6">
    @forelse($products as $product)
    <div class="bg-white rounded-2xl shadow-card overflow-hidden">
        <div class="p-6 border-b border-gray-100">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    @if($product->images->first())
                        <img src="{{ asset('storage/' . $product->images->first()->image_path) }}" class="w-16 h-16 rounded-2xl object-cover">
                    @else
                        <div class="w-16 h-16 bg-gray-100 rounded-2xl flex items-center justify-center">
                            <i class="fas fa-image text-gray-400 text-2xl"></i>
                        </div>
                    @endif
                    <div class="ml-4">
                        <h3 class="font-bold text-gray-900 text-lg">{{ $product->name }}</h3>
                        <p class="text-gray-500 text-sm">₦{{ number_format($product->markup_price, 0) }} | {{ $product->shipping_type }} | {{ $product->estimated_days }} days</p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="text-3xl font-bold text-primary-600">{{ $product->total_paired }}</p>
                    <p class="text-gray-500 text-sm">paired</p>
                </div>
            </div>
        </div>
        
        @if($product->pairings->count() > 0)
        <div class="p-6 bg-gray-50">
            <h4 class="font-semibold text-gray-800 mb-4">Participants ({{ $product->pairings->groupBy('user_id')->count() }})</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                @foreach($product->pairings->groupBy('user_id') as $userId => $userPairings)
                <div class="flex items-center justify-between p-4 bg-white rounded-xl border border-gray-100">
                    <div class="flex items-center">
                        <div class="w-10 h-10 bg-primary-100 rounded-full flex items-center justify-center text-primary-600 font-bold">
                            {{ strtoupper(substr($userPairings->first()->user->name, 0, 1)) }}
                        </div>
                        <div class="ml-3">
                            <p class="font-medium text-gray-900">{{ $userPairings->first()->user->name }}</p>
                            <p class="text-sm text-gray-500">{{ $userPairings->sum('quantity') }} units</p>
                        </div>
                    </div>
                    <p class="font-bold text-primary-600">₦{{ number_format($userPairings->sum('total_price'), 0) }}</p>
                </div>
                @endforeach
            </div>
        </div>
        @endif
        
        <div class="p-6 border-t border-gray-100 flex items-center justify-between">
            <div>
                <p class="text-gray-500 text-sm"><i class="fas fa-clock mr-1"></i> Deadline: {{ $product->pairing_deadline->format('M d, Y H:i') }}</p>
            </div>
            @if($product->status === 'active')
                <form method="POST" action="{{ route('admin.pairings.close', $product) }}">
                    @csrf
                    <button type="submit" class="px-6 py-3 bg-gradient-to-r from-red-500 to-red-600 text-white font-semibold rounded-xl hover:from-red-600 hover:to-red-700 shadow-lg hover:shadow-xl transition-all">
                        <i class="fas fa-times mr-2"></i>Close Pairing
                    </button>
                </form>
            @else
                <span class="px-4 py-2 rounded-xl text-sm font-medium 
                    @if($product->status === 'active') bg-green-100 text-green-600
                    @else bg-blue-100 text-blue-600 @endif">
                    {{ ucfirst($product->status) }}
                </span>
            @endif
        </div>
    </div>
    @empty
    <div class="bg-white rounded-2xl shadow-card p-12 text-center">
        <div class="w-20 h-20 bg-gray-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
            <i class="fas fa-handshake text-4xl text-gray-400"></i>
        </div>
        <p class="text-gray-500 text-lg">No active pairings</p>
    </div>
    @endforelse
</div>
@endsection