@extends('layouts.app')

@section('title', 'Dashboard - PreOrder')

@section('content')
<div class="container-custom py-8">
    @php
        $shippingPaymentOrders = $orders->filter(function($order) {
            $record = $order->shippingRecords->first();
            return $record && $record->status === 'arrived_nigeria' && $order->shipping_cost > 0;
        });
        $shippingPaymentTotal = $shippingPaymentOrders->sum('shipping_cost');
    @endphp
    
    @if($shippingPaymentOrders->count() > 0)
    <div class="mb-6 bg-yellow-50 border-l-4 border-yellow-500 rounded-lg shadow-lg p-4">
        <div class="flex items-start">
            <div class="flex-shrink-0">
                <i class="fas fa-exclamation-triangle text-yellow-600 text-xl"></i>
            </div>
            <div class="ml-3 flex-1">
                <p class="text-yellow-800 font-semibold">Shipping Fee Required!</p>
                <p class="text-yellow-700 text-sm mt-1">
                    You have {{ $shippingPaymentOrders->count() }} shipment(s) that have arrived in Nigeria. 
                    Please pay shipping fee of ₦{{ number_format($shippingPaymentTotal, 2) }} to proceed with delivery.
                </p>
                <div class="mt-3 flex space-x-2">
                    @foreach($shippingPaymentOrders as $shipOrder)
                    <a href="{{ route('orders.show', $shipOrder) }}" class="px-4 py-2 bg-yellow-600 hover:bg-yellow-700 text-white text-sm rounded-lg font-medium">
                        Pay ₦{{ number_format($shipOrder->shipping_cost, 2) }} for {{ $shipOrder->order_number }}
                    </a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    @endif
    
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900">Welcome back, {{ Auth::user()->name }}!</h1>
        <p class="text-gray-500 mt-1">Here's what's happening with your account</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div class="bg-gradient-to-br from-primary-500 to-primary-700 rounded-2xl p-6 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-white/80 text-sm">Active Pairings</p>
                    <p class="text-3xl font-bold">{{ $activePairings->count() }}</p>
                </div>
                <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-hand-holding-heart text-xl"></i>
                </div>
            </div>
        </div>
        
        <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-2xl p-6 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-white/80 text-sm">Total Orders</p>
                    <p class="text-3xl font-bold">{{ $orders->count() }}</p>
                </div>
                <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-box text-xl"></i>
                </div>
            </div>
        </div>
        
        <div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl p-6 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-white/80 text-sm">Pending Payments</p>
                    <p class="text-3xl font-bold">{{ $orders->where('payment_status', 'pending')->count() }}</p>
                </div>
                <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-credit-card text-xl"></i>
                </div>
            </div>
        </div>
        
        <div class="bg-gradient-to-br from-orange-500 to-orange-600 rounded-2xl p-6 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-white/80 text-sm">Notifications</p>
                    <p class="text-3xl font-bold">{{ Auth::user()->unreadNotifications->count() }}</p>
                </div>
                <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-bell text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    @php
$pendingTotal = $closedPairings->filter(function($pairing) use ($orders) {
    $order = $orders->first(function($o) use ($pairing) {
        return $o->items->contains('product_id', $pairing->product_id);
    });
    return $order && in_array($order->payment_status, ['pending', 'partial']);
})->sum(function($pairing) use ($orders) {
    $order = $orders->first(function($o) use ($pairing) {
        return $o->items->contains('product_id', $pairing->product_id);
    });
    return $order ? $order->total - $order->paid_amount : 0;
});
$pendingPaymentOrdersTotal = $pendingPaymentOrders->sum(function($order) {
    return $order->total - $order->paid_amount;
});
$totalPending = $pendingTotal + $pendingPaymentOrdersTotal;
@endphp

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        @if($totalPending > 0)
        <div class="lg:col-span-2 bg-gradient-to-r from-orange-500 to-orange-600 rounded-2xl shadow-lg p-6 text-white mb-4">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-white/80 text-sm">Total Pending Payments</p>
                    <p class="text-3xl font-bold">₦{{ number_format($totalPending, 0) }}</p>
                </div>
                <a href="{{ route('orders') }}" class="px-6 py-3 bg-white text-orange-600 rounded-lg font-semibold hover:bg-gray-100">
                    Pay All Now
                </a>
            </div>
        </div>
        @endif

        <div class="bg-white rounded-2xl shadow-card p-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-xl font-bold text-gray-900">Active Pairings</h2>
                <a href="{{ route('pairings') }}" class="text-primary-600 text-sm font-semibold hover:text-primary-700">View All</a>
            </div>
            
            @if($activePairings->isEmpty())
                <div class="text-center py-8">
                    <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-handshake text-2xl text-gray-400"></i>
                    </div>
                    <p class="text-gray-500">No active pairings</p>
                    <a href="{{ route('products') }}" class="text-primary-600 text-sm font-semibold mt-2 inline-block">Browse Products</a>
                </div>
            @else
                <div class="space-y-4">
                    @foreach($activePairings->take(5) as $pairing)
                        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
                            <div class="flex items-center">
                                @if($pairing->product->images->first())
                                    <img src="{{ asset('storage/' . $pairing->product->images->first()->image_path) }}" 
                                         class="w-12 h-12 rounded-xl object-cover mr-4">
                                @endif
                                <div>
                                    <p class="font-semibold text-gray-900">{{ $pairing->product->name }}</p>
                                    <p class="text-sm text-gray-500">{{ $pairing->quantity }} × ₦{{ number_format($pairing->unit_price, 0) }}</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <p class="font-bold text-primary-600">₦{{ number_format($pairing->total_price, 0) }}</p>
                                <span class="text-xs text-green-600 bg-green-100 px-2 py-0.5 rounded-full">Active</span>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

        <div class="bg-white rounded-2xl shadow-card p-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-xl font-bold text-gray-900">Awaiting Payment</h2>
                <a href="{{ route('orders') }}" class="text-primary-600 text-sm font-semibold hover:text-primary-700">View All</a>
            </div>
            
            @if($closedPairings->isEmpty() && $pendingPaymentOrders->isEmpty())
                <div class="text-center py-8">
                    <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-credit-card text-2xl text-gray-400"></i>
                    </div>
                    <p class="text-gray-500">No pending payments</p>
                </div>
            @else
                <div class="space-y-4">
                    @foreach($closedPairings->take(5) as $pairing)
                        @php
                            $order = \App\Models\Order::where('user_id', Auth::id())
                                ->whereHas('items', function($q) use ($pairing) {
                                    $q->where('product_id', $pairing->product_id);
                                })
                                ->first();
                        @endphp
                        @if($order && in_array($order->payment_status, ['pending', 'partial']))
                        <div class="flex items-center justify-between p-4 bg-orange-50 rounded-xl border border-orange-100">
                            <div class="flex items-center">
                                @if($pairing->product->images->first())
                                    <img src="{{ asset('storage/' . $pairing->product->images->first()->image_path) }}" 
                                         class="w-12 h-12 rounded-xl object-cover mr-4">
                                @endif
                                <div>
                                    <p class="font-semibold text-gray-900">{{ $pairing->product->name }}</p>
                                    <p class="text-sm text-gray-500">{{ $pairing->quantity }} × ₦{{ number_format($pairing->unit_price, 0) }}</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <p class="font-bold text-orange-600">₦{{ number_format($order->total, 0) }}</p>
                                <a href="{{ route('orders.show', $order) }}" class="text-xs text-primary-600 font-semibold hover:underline">Pay Now</a>
                            </div>
                        </div>
                        @endif
                    @endforeach
                    @foreach($pendingPaymentOrders->take(5) as $order)
                        <div class="flex items-center justify-between p-4 bg-orange-50 rounded-xl border border-orange-100">
                            <div>
                                <p class="font-semibold text-gray-900">{{ $order->order_number }}</p>
                                <p class="text-sm text-gray-500">{{ $order->items->count() }} items</p>
                            </div>
                            <div class="text-right">
                                <p class="font-bold text-orange-600">₦{{ number_format($order->total - $order->paid_amount, 0) }}</p>
                                <a href="{{ route('orders.show', $order) }}" class="text-xs text-primary-600 font-semibold hover:underline">Pay Now</a>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-8">
        <div class="bg-white rounded-2xl shadow-card p-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-xl font-bold text-gray-900">Recent Orders</h2>
                <a href="{{ route('orders') }}" class="text-primary-600 text-sm font-semibold hover:text-primary-700">View All</a>
            </div>
            
            @if($orders->isEmpty())
                <div class="text-center py-8">
                    <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-box-open text-2xl text-gray-400"></i>
                    </div>
                    <p class="text-gray-500">No orders yet</p>
                </div>
            @else
                <div class="space-y-4">
                    @foreach($orders->take(5) as $order)
                        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
                            <div>
                                <p class="font-semibold text-gray-900">{{ $order->order_number }}</p>
                                <p class="text-sm text-gray-500">{{ $order->items->count() }} items</p>
                            </div>
                            <div class="text-right">
                                <p class="font-bold">₦{{ number_format($order->total, 0) }}</p>
                                <span class="text-xs px-2 py-0.5 rounded-full 
                                    @if($order->payment_status === 'paid') bg-green-100 text-green-600
                                    @elseif($order->payment_status === 'partial') bg-yellow-100 text-yellow-600
                                    @else bg-red-100 text-red-600 @endif">
                                    {{ ucfirst($order->payment_status) }}
                                </span>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>

    @if($notifications->count() > 0)
    <div class="mt-8 bg-white rounded-2xl shadow-card p-6">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-xl font-bold text-gray-900">Recent Notifications</h2>
            <a href="{{ route('notifications') }}" class="text-primary-600 text-sm font-semibold hover:text-primary-700">View All</a>
        </div>
        <div class="space-y-3">
            @foreach($notifications->take(5) as $notification)
                <div class="flex items-start gap-4 p-4 {{ $notification->is_read ? 'bg-gray-50' : 'bg-primary-50' }} rounded-xl">
                    <div class="w-10 h-10 {{ $notification->is_read ? 'bg-gray-200' : 'bg-primary-500' }} rounded-xl flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-bell {{ $notification->is_read ? 'text-gray-500' : 'text-white' }}"></i>
                    </div>
                    <div class="flex-1">
                        <p class="font-semibold text-gray-900">{{ $notification->title }}</p>
                        <p class="text-sm text-gray-600">{{ $notification->message }}</p>
                        <p class="text-xs text-gray-400 mt-1">{{ $notification->created_at->diffForHumans() }}</p>
                    </div>
                    @if(!$notification->is_read)
                        <form method="POST" action="{{ route('notifications.read', $notification) }}">
                            @csrf
                            <button type="submit" class="text-xs text-primary-600 font-semibold">Mark Read</button>
                        </form>
                    @endif
                </div>
            @endforeach
        </div>
    </div>
    @endif
</div>
@endsection