@extends('layouts.portal')

@section('title', 'Hierarchy Report')
@section('page_title', 'Hierarchy Report')
@section('page_subtitle', 'Your referral network — upline, downline, and commission at every level')

@section('sidebar')
    @include('agent.partials.sidebar', ['active' => 'reports-hierarchy'])
@endsection

@section('content')
<div class="max-w-7xl mx-auto">
    <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
        <div class="flex justify-between items-center mb-6 flex-wrap gap-3">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">Hierarchy Report</h1>
                <p class="text-gray-600 mt-2">You and your downline, up to {{ config('mlm.max_levels', 3) }} levels deep</p>
            </div>
            <div class="flex gap-3">
                <a href="{{ route('agent.reports.hub') }}" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-3 rounded-lg font-medium inline-flex items-center no-print">
                    <i class="fas fa-arrow-left mr-2"></i>Reports
                </a>
                <button onclick="window.print()" class="bg-gradient-to-r from-[#772B10] to-[#8B3D15] text-white px-6 py-3 rounded-lg font-medium inline-flex items-center no-print">
                    <i class="fas fa-print mr-2"></i>Print
                </button>
                <a href="{{ route('agent.reports.hierarchy.pdf') }}" class="bg-gradient-to-r from-red-500 to-red-600 text-white px-6 py-3 rounded-lg font-medium inline-flex items-center no-print">
                    <i class="fas fa-file-pdf mr-2"></i>PDF
                </a>
                <a href="{{ route('agent.reports.hierarchy.excel') }}" class="bg-gradient-to-r from-green-500 to-green-600 text-white px-6 py-3 rounded-lg font-medium inline-flex items-center no-print">
                    <i class="fas fa-file-excel mr-2"></i>Excel
                </a>
            </div>
        </div>

        @php
            $totalClients = collect($nodes)->sum('total_referred_clients');
            $totalCommission = collect($nodes)->sum('commission_total');
        @endphp
        <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
            <div class="bg-gradient-to-br from-[#772B10] to-[#8B3D15] rounded-lg p-4 text-white">
                <p class="text-white/80 text-sm font-medium">Agents in Your Tree</p>
                <h3 class="text-3xl font-bold mt-1">{{ count($nodes) }}</h3>
            </div>
            <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg p-4 text-white">
                <p class="text-blue-100 text-sm font-medium">Total Referred Clients</p>
                <h3 class="text-3xl font-bold mt-1">{{ $totalClients }}</h3>
            </div>
            <div class="bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-lg p-4 text-white">
                <p class="text-indigo-100 text-sm font-medium">Total Commission</p>
                <h3 class="text-3xl font-bold mt-1">RM {{ number_format($totalCommission, 2) }}</h3>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 border-b border-gray-200">
                    <tr>
                        <th class="px-3 py-3 text-left text-xs font-semibold text-gray-900">Agent</th>
                        <th class="px-3 py-3 text-left text-xs font-semibold text-gray-900">Code</th>
                        <th class="px-3 py-3 text-center text-xs font-semibold text-gray-900">Level</th>
                        <th class="px-3 py-3 text-left text-xs font-semibold text-gray-900">Upline</th>
                        <th class="px-3 py-3 text-center text-xs font-semibold text-gray-900">Downline</th>
                        <th class="px-3 py-3 text-center text-xs font-semibold text-gray-900">Referred Clients</th>
                        <th class="px-3 py-3 text-right text-xs font-semibold text-gray-900">Commission</th>
                        <th class="px-3 py-3 text-left text-xs font-semibold text-gray-900">Status</th>
                        <th class="px-3 py-3 text-center text-xs font-semibold text-gray-900 no-print">Clients</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($nodes as $i => $node)
                        <tr class="hover:bg-gray-50 text-xs {{ $node['level'] === 0 ? 'bg-amber-50' : '' }}">
                            <td class="px-3 py-2 font-medium text-gray-900">
                                {{ $node['agent_name'] }}
                                @if($node['level'] === 0)<span class="text-xs text-[#772B10] font-semibold">(You)</span>@endif
                            </td>
                            <td class="px-3 py-2 text-gray-600">{{ $node['agent_code'] ?? '—' }}</td>
                            <td class="px-3 py-2 text-center">
                                <span class="px-2 py-0.5 rounded text-xs font-semibold bg-indigo-100 text-indigo-800">{{ $node['level'] === 0 ? 'Self' : 'L' . $node['level'] }}</span>
                            </td>
                            <td class="px-3 py-2 text-gray-600">{{ $node['upline_name'] ?? '—' }}</td>
                            <td class="px-3 py-2 text-center">{{ $node['downline_count'] }}</td>
                            <td class="px-3 py-2 text-center font-semibold">{{ $node['total_referred_clients'] }}</td>
                            <td class="px-3 py-2 text-right">
                                <span class="font-semibold">RM {{ number_format($node['commission_total'], 2) }}</span><br>
                                <span class="text-green-700">Paid: {{ number_format($node['commission_paid'], 2) }}</span> /
                                <span class="text-amber-700">Pending: {{ number_format($node['commission_pending'], 2) }}</span>
                            </td>
                            <td class="px-3 py-2">
                                <span class="px-2 py-0.5 rounded text-xs font-semibold {{ $node['status'] === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">{{ ucfirst($node['status'] ?? '-') }}</span>
                            </td>
                            <td class="px-3 py-2 text-center no-print">
                                <button type="button" onclick="document.getElementById('node-{{ $i }}').classList.toggle('hidden')" class="text-[#772B10] hover:underline">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </td>
                        </tr>
                        <tr id="node-{{ $i }}" class="hidden bg-gray-50">
                            <td colspan="9" class="px-6 py-4">
                                @if(count($node['clients']))
                                    <table class="w-full text-xs">
                                        <thead><tr class="text-gray-500">
                                            <th class="text-left pb-1">Client</th><th class="text-left pb-1">Registered</th><th class="text-left pb-1">Will Status</th><th class="text-left pb-1">Approved</th>
                                        </tr></thead>
                                        <tbody>
                                        @foreach($node['clients'] as $c)
                                            <tr>
                                                <td class="py-1">{{ $c['client_name'] }}</td>
                                                <td class="py-1">{{ \Carbon\Carbon::parse($c['registered_at'])->format('M d, Y') }}</td>
                                                <td class="py-1">{{ ucfirst(str_replace('_',' ',$c['will_status'] ?? '-')) }}</td>
                                                <td class="py-1">{{ $c['will_approved_at'] ? \Carbon\Carbon::parse($c['will_approved_at'])->format('M d, Y') : '—' }}</td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                @else
                                    <p class="text-gray-400 text-xs">No clients referred by this agent yet.</p>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="9" class="px-6 py-12 text-center text-gray-500">No downline agents yet</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
<style>@media print { .no-print { display: none !important; } }</style>
@endsection