@include('Partials.sidebar')
<section class="main_content dashboard_part large_header_bg">
@include('Partials.header')
<div class="main_content_iner default_main_contaner_iner">
<div class="page-body">

    <div class="container-fluid">
        <div class="page-title">
            <div class="row align-items-center">
                <div class="col-sm-6 ps-0">
                    <h3><i class="fas fa-trophy mr-2" style="color:#f59e0b"></i>Sales Report</h3>
                </div>
                <div class="col-sm-6 pe-0">
                    <ol class="bc">
                         <li>
                            <a href="/admin/dashboard" class="bc-home">
                                <i class="fas fa-home"></i>
                            </a>
                        </li>
                        <li class="bc-sep">›</li>
                        <li><a href="/admin/reports/overview" class="bc-link">Reports</a></li>
                        <li class="bc-sep">›</li>
                        <li class="bc-active">Sales</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    {{-- Date filter --}}
    <div class="container-fluid mb-3">
        <div class="card shadow-sm">
            <div class="card-body py-2">
                <form method="GET" class="d-flex align-items-end" style="gap:8px">
                    <div><label style="font-size:11px;color:#94a3b8;display:block">From</label><input type="date" name="from" class="form-control form-control-sm" value="{{ $from }}"></div>
                    <div><label style="font-size:11px;color:#94a3b8;display:block">To</label><input type="date" name="to" class="form-control form-control-sm" value="{{ $to }}"></div>
                    <button class="btn btn-primary btn-sm"><i class="fas fa-filter mr-1"></i>Apply</button>
                </form>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">

            {{-- Agent Leaderboard --}}
            <div class="col-lg-6 mb-3">
                <div class="card shadow-sm h-100" style="border-top:3px solid #f59e0b">
                    <div class="card-header"><h6 class="mb-0">🏆 Sales Agent Leaderboard</h6></div>
                    <div class="card-body p-0">
                        @foreach($leaderboard as $i => $agent)
                        @php
                            $medals = ['🥇','🥈','🥉'];
                            $medal  = $medals[$i] ?? '  ';
                        @endphp
                        <div style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #f1f5f9;{{ $i===0?'background:#fffbeb':'' }}">
                            <div style="font-size:20px;width:30px;text-align:center">{{ $medal }}</div>
                            <div style="flex:1">
                                <div style="font-weight:700;font-size:14px">{{ $agent->name }}</div>
                                <div style="font-size:11px;color:#94a3b8">{{ ucfirst($agent->role) }}</div>
                            </div>
                            <div style="text-align:center;min-width:55px">
                                <div style="font-weight:800;color:#8b5cf6;font-size:18px">{{ $agent->total_leads }}</div>
                                <div style="font-size:10px;color:#94a3b8">Leads</div>
                            </div>
                            <div style="text-align:center;min-width:55px">
                                <div style="font-weight:800;color:#22c55e;font-size:18px">{{ $agent->won_leads }}</div>
                                <div style="font-size:10px;color:#94a3b8">Won</div>
                            </div>
                            <div style="text-align:center;min-width:55px">
                                <div style="font-weight:800;color:#f59e0b;font-size:16px">{{ $agent->conversion_rate }}%</div>
                                <div style="font-size:10px;color:#94a3b8">Conv.</div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>

            {{-- Lead pipeline by agent --}}
            <div class="col-lg-6 mb-3">
                <div class="card shadow-sm h-100" style="border-top:3px solid #8b5cf6">
                    <div class="card-header"><h6 class="mb-0">📊 Pipeline by Agent</h6></div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-sm mb-0" style="font-size:12px">
                                <thead style="background:#f8f9fa">
                                    <tr>
                                        <th>Agent</th>
                                        @foreach(\App\Models\Lead::STATUSES as $key => $cfg)
                                        <th style="color:{{ $cfg['color'] }}">{{ $cfg['label'] }}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($leaderboard as $agent)
                                    @php $agentPipeline = $pipeline[$agent->id] ?? collect(); @endphp
                                    <tr>
                                        <td style="font-weight:600">{{ $agent->name }}</td>
                                        @foreach(\App\Models\Lead::STATUSES as $key => $cfg)
                                        @php $count = $agentPipeline->firstWhere('status', $key)?->count ?? 0; @endphp
                                        <td>
                                            @if($count > 0)
                                            <span class="badge badge-{{ $cfg['badge'] }}">{{ $count }}</span>
                                            @else
                                            <span style="color:#e2e8f0">—</span>
                                            @endif
                                        </td>
                                        @endforeach
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Broker performance --}}
            <div class="col-12 mb-3">
                <div class="card shadow-sm" style="border-top:3px solid #c9a96e">
                    <div class="card-header"><h6 class="mb-0">🤝 Broker Performance</h6></div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0" style="font-size:13px">
                                <thead style="background:#f8f9fa">
                                    <tr><th>Broker</th><th>Phone</th><th>Commission Rate</th><th>Bookings (period)</th><th>Total Commission Earned</th></tr>
                                </thead>
                                <tbody>                                  
                                    @forelse($brokers as $broker)
                                    <tr>
                                        <td>
                                            <div style="font-weight:700">{{ $broker->name }}</div>
                                            <div style="font-size:11px;color:#94a3b8">{{ $broker->email }}</div>
                                        </td>
                                        <td style="color:#94a3b8">{{ $broker->phone }}</td>
                                        <td><span class="badge badge-info">{{ $broker->commission_rate ?? 0 }}%</span></td>
                                        <td style="font-weight:700;color:#3b82f6">{{ $broker->total_bookings }}</td>
                                        <td style="font-weight:700;color:#22c55e">{{ $currency }}{{ $broker->total_commission }}</td>
                                    </tr>
                                    @empty
                                    <tr><td colspan="5" class="text-center py-4 text-muted">No brokers found.</td></tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>
</div>
</section>