@extends('layouts.app')
@section('title', 'Dashboard')
@section('page-title', 'Dashboard')

@section('content')
{{-- Period --}}
<div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-4">
    <div>
        <h5 class="mb-1" style="font-weight:700; font-size:18px;">Team Overview 📊</h5>
        <p class="mb-0" style="color:var(--lp-muted); font-size:13px;">Monitoring performance across your sales team</p>
    </div>
    <div class="d-flex gap-2">
        @foreach(['today'=>'Today','week'=>'This Week','month'=>'This Month','year'=>'This Year'] as $k => $lbl)
        <a href="{{ route('dashboard', ['period' => $k]) }}"
           class="btn btn-sm {{ $period === $k ? 'btn-primary' : 'btn-outline-secondary' }}"
           style="border-radius:8px; font-size:12px;">{{ $lbl }}</a>
        @endforeach
    </div>
</div>

{{-- Stats --}}
<div class="row g-3 mb-4">
    <div class="col-6 col-lg-3">
        <div class="stat-card primary"><div class="stat-icon"><i class="bi bi-people-fill"></i></div>
            <div class="stat-value">{{ $totalLeads }}</div><div class="stat-label">Team Leads</div></div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card success"><div class="stat-icon"><i class="bi bi-trophy-fill"></i></div>
            <div class="stat-value">{{ $soldLeads }}</div><div class="stat-label">Deals Closed</div></div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card info"><div class="stat-icon"><i class="bi bi-percent"></i></div>
            <div class="stat-value">{{ $totalLeads > 0 ? round(($soldLeads/$totalLeads)*100,1) : 0 }}%</div>
            <div class="stat-label">Conversion Rate</div></div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card warning"><div class="stat-icon"><i class="bi bi-person-badge-fill"></i></div>
            <div class="stat-value">{{ $repPerformance->count() }}</div><div class="stat-label">Sales Reps</div></div>
    </div>
</div>

<div class="row g-4 mb-4">
    <div class="col-lg-8">
        <div class="lp-card">
            <div class="lp-card-header"><span><i class="bi bi-graph-up me-2 text-primary"></i>Team Lead Trend</span></div>
            <div class="lp-card-body"><canvas id="trendChart" height="110"></canvas></div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="lp-card" style="height:100%;">
            <div class="lp-card-header"><span><i class="bi bi-pie-chart me-2 text-primary"></i>Pipeline</span></div>
            <div class="lp-card-body">
                <canvas id="pipelineChart" height="160"></canvas>
                <div class="mt-3">
                    @foreach($pipeline as $p)
                    @php $opt = $statuses->firstWhere('value', $p->status); @endphp
                    <div class="d-flex justify-content-between mb-1" style="font-size:12.5px;">
                        <span class="lp-badge bg-{{ $opt?->color ?? 'secondary' }} bg-opacity-10 text-{{ $opt?->color ?? 'secondary' }}">
                            {{ $opt?->label ?? $p->status }}
                        </span>
                        <strong>{{ $p->total }}</strong>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-4">
    {{-- Rep Performance --}}
    <div class="col-lg-7">
        <div class="lp-card">
            <div class="lp-card-header">
                <span><i class="bi bi-bar-chart me-2 text-primary"></i>Rep Performance</span>
                <a href="{{ route('reports.index') }}" class="btn btn-sm btn-outline-primary" style="border-radius:7px; font-size:12px;">Full Report</a>
            </div>
            <div class="lp-card-body p-0">
                <table class="lp-table">
                    <thead>
                        <tr><th>Rep</th><th>Leads</th><th>Sold</th><th>Conv %</th></tr>
                    </thead>
                    <tbody>
                        @forelse($repPerformance as $rep)
                        <tr>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <img src="https://ui-avatars.com/api/?name={{ urlencode($rep->name) }}&background=4F7CFF&color=fff&size=64&bold=true" class="avatar-sm" alt="">
                                    <div style="font-weight:600; font-size:13px;">{{ $rep->name }}</div>
                                </div>
                            </td>
                            <td><strong>{{ $rep->leads_count }}</strong></td>
                            <td><span class="lp-badge bg-success bg-opacity-15 text-success">{{ $rep->sold_count }}</span></td>
                            <td>
                                @php $cr = $rep->leads_count > 0 ? round(($rep->sold_count/$rep->leads_count)*100,1) : 0; @endphp
                                <div class="d-flex align-items-center gap-2">
                                    <div style="flex:1;height:5px;background:#E2E8F0;border-radius:3px;">
                                        <div style="width:{{ $cr }}%;height:100%;background:#10B981;border-radius:3px;"></div>
                                    </div>
                                    <span style="font-size:12px;font-weight:600;">{{ $cr }}%</span>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="4" class="text-center py-4" style="color:var(--lp-muted);">No reps assigned.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {{-- Team Activity --}}
    <div class="col-lg-5">
        <div class="lp-card">
            <div class="lp-card-header">
                <span><i class="bi bi-clock-history me-2 text-info"></i>Team Activity</span>
                <a href="{{ route('activity.index') }}" class="btn btn-sm btn-outline-secondary" style="border-radius:7px; font-size:12px;">All</a>
            </div>
            <div class="lp-card-body">
                @forelse($recentActivity as $log)
                <div class="activity-item">
                    <div class="activity-icon {{ $log->action_color }}"><i class="bi {{ $log->action_icon }}"></i></div>
                    <div style="flex:1; min-width:0;">
                        <div style="font-size:13px; font-weight:500;"><strong>{{ $log->user_name }}</strong> {{ $log->action_label }}</div>
                        <div style="font-size:11px; color:var(--lp-muted);">{{ $log->created_at->diffForHumans() }}</div>
                    </div>
                </div>
                @empty
                <div class="empty-state py-2"><p style="font-size:13px;">No activity yet.</p></div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
new Chart(document.getElementById('trendChart'), {
    type: 'line',
    data: {
        labels: {!! json_encode($chartLabels) !!},
        datasets: [{ label: 'Leads', data: {!! json_encode($chartData) !!},
            borderColor: '#3B6EFF', backgroundColor: 'rgba(59,110,255,.08)',
            borderWidth: 2.5, tension: 0.4, fill: true, pointRadius: 3,
        }]
    },
    options: { responsive:true, plugins:{ legend:{display:false} },
        scales: { x:{ grid:{display:false}, ticks:{maxTicksLimit:8,font:{size:11}} },
                  y:{ grid:{color:'rgba(0,0,0,.04)'}, beginAtZero:true } } }
});
const sc = { 'no_answer':'#94A3B8','meeting_scheduled':'#06B6D4','short_discussion_done':'#F59E0B','sold':'#10B981' };
new Chart(document.getElementById('pipelineChart'), {
    type: 'doughnut',
    data: {
        labels: {!! json_encode($pipeline->map(fn($p)=>ucwords(str_replace('_',' ',$p->status)))->toArray()) !!},
        datasets: [{
            data: {!! json_encode($pipeline->pluck('total')->toArray()) !!},
            backgroundColor: {!! json_encode($pipeline->map(fn($p)=>$sc[$p->status]??'#94A3B8')->toArray()) !!},
            borderWidth: 0, hoverOffset: 4
        }]
    },
    options: { responsive:true, cutout:'70%', plugins:{ legend:{display:false} } }
});
</script>
@endpush