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

@section('content')
{{-- Period Selector --}}
<div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-2">
    <div>
        <h5 class="mb-1" style="font-weight:700; font-size:18px;">Good {{ now()->hour < 12 ? 'morning' : (now()->hour < 17 ? 'afternoon' : 'evening') }}, {{ auth()->user()->name }} 👋</h5>
        <p class="mb-0" style="color:var(--lp-muted); font-size:13px;">Here's what's happening with your leads today.</p>
    </div>
    <div class="d-flex gap-2">
        @foreach(['today' => 'Today', 'week' => 'This Week', 'month' => 'This Month', 'year' => 'This Year'] as $key => $label)
        <a href="{{ route('dashboard', ['period' => $key]) }}"
           class="btn btn-sm {{ $period === $key ? 'btn-primary' : 'btn-outline-secondary' }}"
           style="border-radius:8px; font-size:12px; font-weight:500;">
            {{ $label }}
        </a>
        @endforeach
    </div>
</div>

{{-- Stat Cards --}}
<div class="row g-3 mb-4">
    <div class="col-6 col-lg-3">
        <div class="stat-card primary fade-in-up">
            <div class="stat-icon"><i class="bi bi-people-fill"></i></div>
            <div class="stat-value">{{ number_format($totalLeads) }}</div>
            <div class="stat-label">Total Leads</div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card success fade-in-up stagger-1">
            <div class="stat-icon"><i class="bi bi-trophy-fill"></i></div>
            <div class="stat-value">{{ number_format($soldLeads) }}</div>
            <div class="stat-label">Deals Closed</div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card info fade-in-up stagger-2">
            <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 fade-in-up stagger-3">
            <div class="stat-icon"><i class="bi bi-person-badge-fill"></i></div>
            <div class="stat-value">{{ $totalSalesReps }}</div>
            <div class="stat-label">Active Sales Reps</div>
        </div>
    </div>
</div>

<div class="row g-3 mb-4">
    {{-- Chart --}}
    <div class="col-lg-8">
        <div class="lp-card fade-in-up">
            <div class="lp-card-header">
                <span><i class="bi bi-graph-up me-2 text-primary"></i>Lead Trend (Last 30 Days)</span>
            </div>
            <div class="lp-card-body">
                <canvas id="leadsChart" height="100"></canvas>
            </div>
        </div>
    </div>

    {{-- By Status --}}
    <div class="col-lg-4">
        <div class="lp-card fade-in-up stagger-1" style="height:100%;">
            <div class="lp-card-header"><span><i class="bi bi-pie-chart me-2 text-primary"></i>By Status</span></div>
            <div class="lp-card-body">
                <canvas id="statusChart" height="180"></canvas>
                <div class="mt-3">
                    @foreach($leadsByStatus as $item)
                    @php
                        $opt = $statuses->firstWhere('value', $item->status);
                        $color = $opt?->color ?? 'secondary';
                        $label = $opt?->label ?? ucwords(str_replace('_',' ',$item->status));
                    @endphp
                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <div class="d-flex align-items-center gap-2">
                            <span class="lp-badge bg-{{ $color }} bg-opacity-15 text-{{ $color }}">{{ $label }}</span>
                        </div>
                        <strong>{{ $item->total }}</strong>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-3">
    {{-- Top Sales Reps --}}
    <div class="col-lg-7">
        <div class="lp-card fade-in-up">
            <div class="lp-card-header">
                <span><i class="bi bi-star me-2 text-warning"></i>Top Sales Representatives</span>
                <a href="{{ route('reports.index') }}" class="btn btn-sm btn-outline-primary" style="border-radius:7px; font-size:12px;">
                    Full Report <i class="bi bi-arrow-right ms-1"></i>
                </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. Rate</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($topReps as $rep)
                        <tr>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <img src="{{ $rep->avatar_url }}" class="avatar-sm" alt="">
                                    <div>
                                        <div style="font-weight:600; font-size:13px;">{{ $rep->name }}</div>
                                        <div style="font-size:11px; color:var(--lp-muted);">{{ $rep->email }}</div>
                                    </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:{{ min($cr,100) }}%; 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" style="color:var(--lp-muted); padding:30px;">No data available</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- Recent Activity --}}
    <div class="col-lg-5">
        <div class="lp-card fade-in-up stagger-1">
            <div class="lp-card-header">
                <span><i class="bi bi-clock-history me-2 text-info"></i>Recent Activity</span>
                <a href="{{ route('activity.index') }}" class="btn btn-sm btn-outline-secondary" style="border-radius:7px; font-size:12px;">View 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; margin-bottom:2px;">
                            <strong>{{ $log->user_name }}</strong> {{ $log->action_label }}
                            @if($log->subject_label)
                            <span class="lead-number">{{ $log->subject_label }}</span>
                            @endif
                        </div>
                        <div style="font-size:11px; color:var(--lp-muted);">
                            {{ $log->created_at->diffForHumans() }} · {{ $log->ip_address }}
                        </div>
                    </div>
                </div>
                @empty
                <div class="empty-state py-3">
                    <i class="bi bi-clock-history d-block fs-2 mb-2" style="opacity:.3;"></i>
                    No activity yet
                </div>
                @endforelse
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
// Leads Trend Chart
const ctx1 = document.getElementById('leadsChart').getContext('2d');
new Chart(ctx1, {
    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,
            pointRadius: 3,
            pointBackgroundColor: '#3B6EFF',
            tension: 0.4,
            fill: true,
        }]
    },
    options: {
        responsive: true, maintainAspectRatio: true,
        plugins: { legend: { display: false } },
        scales: {
            x: { grid: { display: false }, ticks: { font: { size: 11 }, maxTicksLimit: 8 } },
            y: { grid: { color: 'rgba(0,0,0,.05)' }, ticks: { font: { size: 11 } }, beginAtZero: true }
        }
    }
});

// Status Doughnut
const ctx2 = document.getElementById('statusChart').getContext('2d');
const statusColors = { 'no_answer':'#94A3B8','meeting_scheduled':'#06B6D4','short_discussion_done':'#F59E0B','sold':'#10B981' };
const statusData = {!! json_encode($leadsByStatus->pluck('total')->toArray()) !!};
const statusLabels = {!! json_encode($leadsByStatus->map(fn($i) => ucwords(str_replace('_',' ',$i->status)))->toArray()) !!};
const statusKeys = {!! json_encode($leadsByStatus->pluck('status')->toArray()) !!};
new Chart(ctx2, {
    type: 'doughnut',
    data: {
        labels: statusLabels,
        datasets: [{
            data: statusData,
            backgroundColor: statusKeys.map(k => statusColors[k] || '#94A3B8'),
            borderWidth: 0, hoverOffset: 4,
        }]
    },
    options: {
        responsive: true, maintainAspectRatio: true,
        cutout: '72%',
        plugins: { legend: { display: false } }
    }
});
</script>
@endpush