@extends('distributor.layouts.app')

@section('title', 'My Commissions')

@section('content')


    <!-- Summary Cards - Updated to 5 columns -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mb-10">
        <div class="bg-gradient-to-br from-green-50 to-emerald-100 rounded-xl shadow-lg p-6 border border-green-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-green-700 font-medium">Total Earnings</p>
                    <p class="text-3xl font-bold text-gray-900 mt-2">
                        ৳{{ number_format($totalEarnings, 2) }}
                    </p>
                </div>
                <div class="bg-green-200 p-4 rounded-xl">
                    <i class="fas fa-wallet text-2xl text-green-700"></i>
                </div>
            </div>
        </div>

        <div class="bg-gradient-to-br from-blue-50 to-indigo-100 rounded-xl shadow-lg p-6 border border-blue-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-blue-700 font-medium">This Month</p>
                    <p class="text-3xl font-bold text-gray-900 mt-2">
                        ৳{{ number_format($monthlyEarnings, 2) }}
                    </p>
                </div>
                <div class="bg-blue-200 p-4 rounded-xl">
                    <i class="fas fa-calendar-alt text-2xl text-blue-700"></i>
                </div>
            </div>
        </div>

        <div class="bg-gradient-to-br from-purple-50 to-violet-100 rounded-xl shadow-lg p-6 border border-purple-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-purple-700 font-medium">Total Transactions</p>
                    <p class="text-3xl font-bold text-gray-900 mt-2">
                        {{ $commissions->total() }}
                    </p>
                </div>
                <div class="bg-purple-200 p-4 rounded-xl">
                    <i class="fas fa-exchange-alt text-2xl text-purple-700"></i>
                </div>
            </div>
        </div>

        <div class="bg-gradient-to-br from-orange-50 to-amber-100 rounded-xl shadow-lg p-6 border border-orange-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-orange-700 font-medium">Average per Transaction</p>
                    <p class="text-3xl font-bold text-gray-900 mt-2">
                        ৳{{ $commissions->total() > 0 ? number_format($totalEarnings / $commissions->total(), 2) : '0.00' }}
                    </p>
                </div>
                <div class="bg-orange-200 p-4 rounded-xl">
                    <i class="fas fa-chart-line text-2xl text-orange-700"></i>
                </div>
            </div>
        </div>

        <!-- NEW: PV Bonus Card -->
        <div class="bg-gradient-to-br from-red-50 to-pink-100 rounded-xl shadow-lg p-6 border border-red-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-red-700 font-medium">PV Bonus</p>
                    <p class="text-3xl font-bold text-gray-900 mt-2">
                        ৳{{ number_format($summary['pv_bonus'] ?? 0, 2) }}
                    </p>
                </div>
                <div class="bg-red-200 p-4 rounded-xl">
                    <i class="fas fa-shopping-cart text-2xl text-red-700"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Commission Type Breakdown - Updated with PV Bonus -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-10">
        <div class="bg-white rounded-xl shadow-lg p-6">
            <h3 class="text-xl font-bold text-gray-900 mb-6">Earnings by Type</h3>
            <div class="space-y-5">
                @php
                    $types = [
                        'pv_bonus' => ['label' => 'PV Bonus', 'color' => 'bg-red-500'],
                        'sponsor_bonus' => ['label' => 'Sponsor Bonus', 'color' => 'bg-orange-500'],
                        'matching_bonus' => ['label' => 'Matching Bonus', 'color' => 'bg-green-500'],
                        'generation_bonus' => ['label' => 'Generation Bonus', 'color' => 'bg-purple-500'],
                        'rank_bonus' => ['label' => 'Rank Bonus', 'color' => 'bg-yellow-500'],
                    ];
                    $total = $totalEarnings ?: 1;
                @endphp

                @foreach($types as $key => $info)
                    @php $amount = $summary[$key] ?? 0; @endphp
                    <div>
                        <div class="flex justify-between mb-2">
                            <span class="font-medium text-gray-700">{{ $info['label'] }}</span>
                            <span class="font-bold text-gray-900">৳{{ number_format($amount, 2) }}</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-3">
                            <div class="{{ $info['color'] }} h-3 rounded-full transition-all duration-500"
                                 style="width: {{ $total > 0 ? ($amount / $total) * 100 : 0 }}%"></div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-lg p-6">
            <h3 class="text-xl font-bold text-gray-900 mb-6">Earnings Breakdown</h3>
            <div class="h-64">
                <canvas id="commissionChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Commissions Table - Updated with PV Bonus -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <div class="px-6 py-4 bg-gradient-to-r from-gray-50 to-gray-100 border-b">
            <h3 class="text-xl font-bold text-gray-900">Recent Commissions</h3>
        </div>

        @if($commissions->count() == 0)
            <div class="p-12 text-center">
                <i class="fas fa-money-bill-wave text-6xl text-gray-300 mb-4"></i>
                <p class="text-xl text-gray-600">No commissions earned yet</p>
                <p class="text-gray-500 mt-2">Start sponsoring and building your team to earn bonuses!</p>
            </div>
        @else
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50 border-b">
                        <tr>
                            <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase">Date</th>
                            <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase">Type</th>
                            <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase">From</th>
                            <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase">Amount</th>
                            <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @foreach($commissions as $commission)
                            <tr class="hover:bg-gray-50 transition">
                                <td class="px-6 py-5 text-sm text-gray-700">
                                    {{ $commission->created_at->format('d M, Y') }}
                                    <div class="text-xs text-gray-500">{{ $commission->created_at->diffForHumans() }}</div>
                                </td>
                                <td class="px-6 py-5">
                                    <span class="inline-flex px-4 py-2 text-xs font-semibold rounded-full {{ $commission->getTypeBadgeClass() }}">
                                        {{ $commission->getTypeText() }}
                                    </span>
                                </td>
                                <td class="px-6 py-5 text-sm text-gray-700">
                                    @if($commission->fromUser)
                                        {{ $commission->fromUser->name }} ({{ $commission->fromUser->user_code ?? 'N/A' }})
                                    @else
                                        <span class="text-gray-500">System</span>
                                    @endif
                                </td>
                                <td class="px-6 py-5 text-sm font-bold text-green-600">
                                    +৳{{ number_format($commission->amount, 2) }}
                                </td>
                                <td class="px-6 py-5 text-sm text-gray-600">
                                    @if($commission->commission_type == 'pv_bonus')
                                        Product PV Earnings from Order
                                    @else
                                        {{ $commission->description ?? 'Commission earned' }}
                                    @endif
                                    
                                    @if($commission->order_id)
                                        <br><span class="text-xs text-indigo-600">Order #{{ $commission->order?->order_number ?? $commission->order_id }}</span>
                                    @endif
                                    
                                    @if($commission->pv_matched)
                                        <br><span class="text-xs text-green-600">PV: {{ number_format($commission->pv_matched, 2) }}</span>
                                    @endif
                                    
                                    @if($commission->generation_level > 0)
                                        <br><span class="text-xs text-purple-600">Level: {{ $commission->generation_level }}</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="px-6 py-4 bg-gray-50 border-t">
                {{ $commissions->links('vendor.pagination.tailwind') }}
            </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const ctx = document.getElementById('commissionChart').getContext('2d');
    
    const data = {
        labels: ['PV Bonus', 'Sponsor Bonus', 'Matching Bonus', 'Generation Bonus', 'Rank Bonus'],
        datasets: [{
            data: [
                {{ $summary['pv_bonus'] ?? 0 }},
                {{ $summary['sponsor_bonus'] ?? 0 }},
                {{ $summary['matching_bonus'] ?? 0 }},
                {{ $summary['generation_bonus'] ?? 0 }},
                {{ $summary['rank_bonus'] ?? 0 }}
            ],
            backgroundColor: [
                'rgba(239, 68, 68, 0.8)',    // red
                'rgba(251, 146, 60, 0.8)',   // orange
                'rgba(34, 197, 94, 0.8)',    // green
                'rgba(147, 51, 234, 0.8)',   // purple
                'rgba(251, 191, 36, 0.8)'    // yellow
            ],
            borderColor: '#fff',
            borderWidth: 2
        }]
    };

    new Chart(ctx, {
        type: 'doughnut',
        data: data,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'right',
                    labels: {
                        padding: 20,
                        font: { size: 14 }
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const value = context.parsed;
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                            return '৳' + value.toLocaleString() + ' (' + percentage + '%)';
                        }
                    }
                }
            },
            cutout: '65%'
        }
    });
});
</script>
@endpush