@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">

    {{-- ── Page Title ── --}}
    <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-handshake mr-2" style="color:#c9a96e"></i>My Performance</h3>
                    <p class="text-muted mb-0" style="font-size:13px">
                        Sales dashboard — {{ $admin->name ?? 'User' }}
                        @if(isset($currentTenant))
                            <span class="ml-2">• {{ $currentTenant->name ?? 'Tenant' }}</span>
                        @endif
                    </p>
                </div>
                <div class="col-sm-6 pe-0">
                    <ol class="bc">
                        <li><a href="/{{ $tenantSlug }}/admin/dashboard" class="bc-home"><i class="fas fa-home"></i></a></li>
                        <li class="bc-sep">›</li>
                        <li><a href="{{ route('admin.reports.overview', ['tenant' => $tenantSlug ?? request()->route('tenant')]) }}" class="bc-link">Reports</a></li>
                        <li class="bc-sep">›</li>
                        <li class="bc-active">My Performance</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>    

    {{-- ── Period Filter ── --}}
    <div class="container-fluid mb-3">
        <form method="GET" class="d-flex align-items-center flex-wrap" style="gap:8px;">
            @php
                $periods = [
                    'today' => 'Today',
                    'this_week' => 'This Week',
                    'this_month' => 'This Month',
                    'last_month' => 'Last Month',
                    'this_quarter' => 'This Quarter',
                    'this_year' => 'This Year',
                ];
            @endphp
            @foreach($periods as $val => $label)
            <a href="?period={{ $val }}" 
               class="btn btn-sm {{ $period === $val ? 'btn-warning' : 'btn-outline-secondary' }}"
               style="{{ $period === $val ? 'color:#fff;font-weight:700;' : '' }}">
                {{ $label }}
            </a>
            @endforeach
            <span class="text-muted ml-2" style="font-size:12px;">
                {{ \Carbon\Carbon::parse($dateFrom)->format('d M') }} – {{ \Carbon\Carbon::parse($dateTo)->format('d M Y') }}
            </span>
        </form>
    </div>

    {{-- ── KPI Cards ── --}}
    <div class="container-fluid mb-4">
        <div class="row">
            @foreach([
                ['Leads This Period',  $leadsInPeriod ?? 0,   '#3b82f6', 'fa-user-plus'],
                ['Active Pipeline',    $activeLeads ?? 0,     '#c9a96e', 'fa-funnel-dollar'],
                ['Deals Won',          $wonLeads ?? 0,        '#22c55e', 'fa-trophy'],
                ['Deals Lost',         $lostLeads ?? 0,       '#ef4444', 'fa-times-circle'],
                ['Conversion Rate',    ($conversionRate ?? 0).'%', '#8b5cf6', 'fa-percentage'],
                ['Bookings Closed',    $bookingsCount ?? 0,   '#f59e0b', 'fa-handshake'],
                ['Revenue Generated',  $currency.($totalRevenue ?? 0), '#10b981', 'fa-coins'],
                ['Avg Deal Size',      $currency.($avgDealSize ?? 0), '#6366f1', 'fa-chart-bar'],
            ] as [$label, $val, $color, $icon])
            <div class="col-xl-3 col-md-4 col-sm-6 mb-3">
                <div class="card shadow-sm h-100" style="border-top:3px solid {{ $color }};border-radius:10px;">
                    <div class="card-body py-3 px-3">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <div style="font-size:22px;font-weight:800;color:{{ $color }}">{{ $val }}</div>
                                <div style="font-size:11px;color:#94a3b8;margin-top:2px;">
                                    <i class="fas {{ $icon }} mr-1"></i>{{ $label }}
                                </div>
                            </div>
                            <div style="width:44px;height:44px;border-radius:50%;
                                        background:{{ $color }}18;
                                        display:flex;align-items:center;justify-content:center;">
                                <i class="fas {{ $icon }}" style="color:{{ $color }};font-size:18px;"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>

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

            {{-- ── Pipeline Funnel ── --}}
            <div class="col-lg-4 mb-4">
                <div class="card shadow-sm h-100" style="border-top:3px solid #c9a96e;">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h6 class="mb-0"><i class="fas fa-filter mr-2" style="color:#c9a96e;"></i>Pipeline</h6>
                        <span class="badge badge-primary">{{ $totalLeads ?? 0 }} total</span>
                    </div>
                    <div class="card-body">
                        @php
                        $stages = [
                            'new' => ['New', '#3b82f6'],
                            'contacted' => ['Contacted', '#f59e0b'],
                            'site_visit' => ['Site Visit', '#8b5cf6'],
                            'negotiation' => ['Negotiation', '#ef4444'],
                            'won' => ['Won', '#22c55e'],
                            'lost' => ['Lost', '#94a3b8'],
                        ];
                        $maxVal = max(array_values($pipeline ?? []) ?: [1]);
                        @endphp
                        @foreach($stages as $key => [$label, $color])
                        @php $count = $pipeline[$key] ?? 0; $pct = $maxVal > 0 ? round(($count/$maxVal)*100) : 0; @endphp
                        <div class="mb-3">
                            <div class="d-flex justify-content-between mb-1">
                                <span style="font-size:12px;font-weight:600;">{{ $label }}</span>
                                <span style="font-size:12px;color:#94a3b8;">{{ $count }}</span>
                            </div>
                            <div style="background:#f1f5f9;border-radius:20px;height:8px;overflow:hidden;">
                                <div style="height:100%;width:{{ $pct }}%;background:{{ $color }};border-radius:20px;transition:width 0.6s;"></div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>

            {{-- ── Follow-Up Activity ── --}}
            <div class="col-lg-4 mb-4">
                <div class="card shadow-sm h-100" style="border-top:3px solid #3b82f6;">
                    <div class="card-header">
                        <h6 class="mb-0"><i class="fas fa-phone-alt mr-2" style="color:#3b82f6;"></i>Follow-Up Activity</h6>
                    </div>
                    <div class="card-body">
                        <div class="text-center mb-3">
                            <div style="font-size:36px;font-weight:800;color:#3b82f6;">{{ $totalFollowUps ?? 0 }}</div>
                            <div style="font-size:12px;color:#94a3b8;">Total activities this period</div>
                        </div>
                        @foreach([
                            ['📞', 'Calls', $callCount ?? 0, '#22c55e'],
                            ['💬', 'WhatsApp', $whatsappCount ?? 0, '#25d366'],
                            ['📧', 'Emails', $emailCount ?? 0, '#3b82f6'],
                            ['🏠', 'Site Visits', $siteVisitCount ?? 0, '#c9a96e'],
                            ['🤝', 'Meetings', $meetingCount ?? 0, '#8b5cf6'],
                        ] as [$emoji, $label, $count, $color])
                        <div class="d-flex justify-content-between align-items-center mb-2 py-2"
                             style="border-bottom:1px solid #f1f5f9;">
                            <span style="font-size:13px;">{{ $emoji }} {{ $label }}</span>
                            <span class="badge" style="background:{{ $color }}22;color:{{ $color }};font-size:13px;padding:4px 10px;">
                                {{ $count }}
                            </span>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>

            {{-- ── Upcoming Follow-Ups ── --}}
            <div class="col-lg-4 mb-4">
                <div class="card shadow-sm h-100" style="border-top:3px solid #f59e0b;">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h6 class="mb-0"><i class="fas fa-calendar-alt mr-2" style="color:#f59e0b;"></i>Due Follow-Ups</h6>
                        <a href="{{ url('/'.$tenantSlug.'/admin/leads?agent='.$admin->id) }}" 
                           class="btn btn-sm btn-outline-warning" style="font-size:11px;">View All</a>
                    </div>
                    <div class="card-body p-0">
                        @forelse($upcomingFollowUps ?? [] as $fu)
                        <div class="d-flex align-items-start gap-2 p-3" style="border-bottom:1px solid #f8fafc;">
                            <div style="width:36px;height:36px;border-radius:50%;background:#fff8ee;
                                        display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                <i class="fas fa-clock" style="color:#f59e0b;font-size:14px;"></i>
                            </div>
                            <div style="flex:1;min-width:0;">
                                <div style="font-weight:700;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                                    {{ $fu->lead->name ?? 'Unknown' }}
                                </div>
                                <div style="font-size:11px;color:#94a3b8;">
                                    {{ ucfirst($fu->type) }} •
                                    {{ \Carbon\Carbon::parse($fu->next_follow_up_at)->diffForHumans() }}
                                </div>
                            </div>
                            <a href="{{ url('/'.$tenantSlug.'/admin/leads/'.$fu->lead_id) }}"
                               class="btn btn-sm btn-outline-warning" style="padding:2px 8px;font-size:11px;flex-shrink:0;">
                                View
                            </a>
                        </div>
                        @empty
                        <div class="text-center py-4 text-muted" style="font-size:13px;">
                            <i class="fas fa-check-circle fa-2x d-block mb-2 text-success"></i>
                            No upcoming follow-ups!
                        </div>
                        @endforelse
                    </div>
                </div>
            </div>

        </div>
    </div>

    {{-- ── Monthly Trend + Recent Leads ── --}}
    <div class="container-fluid">
        <div class="row">

            {{-- Monthly Trend Chart ── --}}
            <div class="col-lg-7 mb-4">
                <div class="card shadow-sm" style="border-top:3px solid #8b5cf6;">
                    <div class="card-header">
                        <h6 class="mb-0"><i class="fas fa-chart-area mr-2" style="color:#8b5cf6;"></i>6-Month Trend</h6>
                    </div>
                    <div class="card-body">
                        <canvas id="trendChart" height="120"></canvas>
                    </div>
                </div>
            </div>

            {{-- Recent Leads ── --}}
            <div class="col-lg-5 mb-4">
                <div class="card shadow-sm" style="border-top:3px solid #22c55e;">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h6 class="mb-0"><i class="fas fa-users mr-2" style="color:#22c55e;"></i>Recent Leads</h6>
                        <a href="{{ url('/'.$tenantSlug.'/admin/leads') }}" 
                           class="btn btn-sm btn-outline-success" style="font-size:11px;">All Leads</a>
                    </div>
                    <div class="card-body p-0">
                        @forelse($recentLeads ?? [] as $lead)
                        @php
                            $statusColors = ['new'=>'#3b82f6','contacted'=>'#f59e0b','site_visit'=>'#8b5cf6',
                                            'negotiation'=>'#ef4444','won'=>'#22c55e','lost'=>'#94a3b8'];
                            $sc = $statusColors[$lead->status] ?? '#94a3b8';
                        @endphp
                        <div class="d-flex align-items-center gap-2 px-3 py-2" style="border-bottom:1px solid #f8fafc;">
                            <div style="width:32px;height:32px;border-radius:50%;background:{{ $sc }}22;
                                        display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:700;font-size:12px;color:{{ $sc }};">
                                {{ strtoupper(substr($lead->name, 0, 1)) }}
                            </div>
                            <div style="flex:1;min-width:0;">
                                <div style="font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                                    {{ $lead->name }}
                                </div>
                                <div style="font-size:11px;color:#94a3b8;">{{ $lead->phone }}</div>
                            </div>
                            <span style="background:{{ $sc }}22;color:{{ $sc }};padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600;flex-shrink:0;">
                                {{ ucfirst(str_replace('_',' ',$lead->status)) }}
                            </span>
                        </div>
                        @empty
                        <div class="text-center py-4 text-muted" style="font-size:13px;">No leads yet.</div>
                        @endforelse
                    </div>
                </div>
            </div>

        </div>
    </div>

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

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
(function() {
    var trend = @json($monthlyTrend ?? []);
    var ctx   = document.getElementById('trendChart');
    if (ctx && trend.length) {
        new Chart(ctx.getContext('2d'), {
            type: 'bar',
            data: {
                labels: trend.map(function(t){ return t.label; }),
                datasets: [
                    {
                        label: 'Leads',
                        data: trend.map(function(t){ return t.leads; }),
                        backgroundColor: 'rgba(59,130,246,0.7)',
                        borderRadius: 6,
                    },
                    {
                        label: 'Bookings',
                        data: trend.map(function(t){ return t.bookings; }),
                        backgroundColor: 'rgba(34,197,94,0.7)',
                        borderRadius: 6,
                    }
                ]
            },
            options: {
                responsive: true,
                plugins: { legend: { position: 'top' } },
                scales: {
                    y: { beginAtZero: true, ticks: { stepSize: 1 } }
                }
            }
        });
    }
})();
</script>

@include('Partials.footer')