@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-chart-line mr-2" style="color:#c9a96e"></i>My Performance</h3>
                    <p class="text-muted mb-0" style="font-size:13px">Sales dashboard — {{ $admin->name }}</p>
                </div>
                <div class="col-sm-6 pe-0">
                    <ol class="bc">
                        <li><a href="/project/dashboard" class="bc-home"><i class="fas fa-home"></i></a></li>
                        <li class="bc-sep">›</li>
                        <li><a href="/admin/reports" 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;">
            @foreach([
                'today'        => 'Today',
                'this_week'    => 'This Week',
                'this_month'   => 'This Month',
                'last_month'   => 'Last Month',
                'this_quarter' => 'This Quarter',
                'this_year'    => 'This Year',
            ] 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,   '#3b82f6', 'fa-user-plus',          null],
                ['Active Pipeline',    $activeLeads,     '#c9a96e', 'fa-funnel-dollar',       null],
                ['Deals Won',          $wonLeads,        '#22c55e', 'fa-trophy',              null],
                ['Deals Lost',         $lostLeads,       '#ef4444', 'fa-times-circle',        null],
                ['Conversion Rate',    $conversionRate.'%', '#8b5cf6', 'fa-percentage',      null],
                ['Bookings Closed',    $bookingsCount,   '#f59e0b', 'fa-handshake',          null],
                ['Revenue Generated',  $currency.$totalRevenue, 0, '#10b981', 'fa-coins', null],
                ['Avg Deal Size',      $currency.$avgDealSize, 0,  '#6366f1', 'fa-chart-bar', null],
            ] 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 }} 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 }}</div>
                            <div style="font-size:12px;color:#94a3b8;">Total activities this period</div>
                        </div>
                        @foreach([
                            ['📞', 'Calls',       $callCount,      '#22c55e'],
                            ['💬', 'WhatsApp',    $whatsappCount,  '#25d366'],
                            ['📧', 'Emails',      $emailCount,     '#3b82f6'],
                            ['🏠', 'Site Visits', $siteVisitCount, '#c9a96e'],
                            ['🤝', 'Meetings',    $meetingCount,   '#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="/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="/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="/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').getContext('2d');
    new Chart(ctx, {
        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')