@php
    use App\Models\Customer;
    use App\Models\Invoice;
    use App\Models\Lead;
    use App\Models\Proposal;
    use App\Models\Estimation;
    use Carbon\Carbon;
    use Illuminate\Support\Facades\DB;

    // =========================================================================
    // ROLE-BASED ACCESS CONTROL
    // =========================================================================
    $currentUser = auth('admin')->user();
    $isSuperAdmin = $currentUser->hasRole('super-admin');
    $currentUserId = $currentUser->id;
    
    // Permission checks
    $canViewAllLeads = $currentUser->can('leads.all-leads.read');
    $canViewAllInvoices = $currentUser->can('sales.Invoice.read');
    
    // Staff ID if using staff table (optional - uncomment if needed)
    // $staffId = $currentUser->staff?->id;

    // =========================================================================
    // Field names for filtering
    // =========================================================================
    $assignedField = 'assigned';           // For leads - who is assigned
    $invoiceAssignedField = 'assigned_to'; // For invoices - assigned_to
    $invoiceCreatedField = 'created_by';   // For invoices - created_by
    
    // Date Range
    $fromDate = request('from_date') ? Carbon::parse(request('from_date'))->startOfDay() : Carbon::now()->startOfMonth();
    $toDate = request('to_date') ? Carbon::parse(request('to_date'))->endOfDay() : Carbon::now()->endOfDay();
    
    $dateRange = [
        'from' => $fromDate->format('Y-m-d'),
        'to' => $toDate->format('Y-m-d'),
    ];

    // Helper function
    function formatCurrencyDash($amount, $symbol = '₹') {
        $amount = $amount ?? 0;
        if ($amount >= 10000000) return $symbol . number_format($amount / 10000000, 2) . ' Cr';
        if ($amount >= 100000) return $symbol . number_format($amount / 100000, 2) . ' L';
        if ($amount >= 1000) return $symbol . number_format($amount / 1000, 2) . ' K';
        return $symbol . number_format($amount, 2);
    }

    // =========================================================================
    // REVENUE STATS (Filtered based on invoice permission)
    // =========================================================================
    $invoiceBaseQuery = Invoice::query();
    if (!$canViewAllInvoices) {
        $invoiceBaseQuery->where(function($q) use ($currentUserId, $invoiceAssignedField, $invoiceCreatedField) {
            $q->where($invoiceAssignedField, $currentUserId)
              ->orWhere($invoiceCreatedField, $currentUserId);
        });
    }
    
    $totalRevenue = (clone $invoiceBaseQuery)->where('payment_status', 'paid')->sum('total') ?? 0;
    $periodRevenue = (clone $invoiceBaseQuery)->where('payment_status', 'paid')
        ->whereBetween('created_at', [$fromDate, $toDate])
        ->sum('total') ?? 0;
    
    $periodDays = $fromDate->diffInDays($toDate);
    $prevFromDate = (clone $fromDate)->subDays($periodDays + 1);
    $prevToDate = (clone $fromDate)->subDay();
    $prevPeriodRevenue = (clone $invoiceBaseQuery)->where('payment_status', 'paid')
        ->whereBetween('created_at', [$prevFromDate, $prevToDate])
        ->sum('total') ?? 0;
    
    $revenueGrowth = $prevPeriodRevenue > 0 ? round((($periodRevenue - $prevPeriodRevenue) / $prevPeriodRevenue) * 100, 1) : ($periodRevenue > 0 ? 100 : 0);

    // =========================================================================
    // CUSTOMER STATS (NO FILTERING - Customers are company-wide)
    // =========================================================================
    $totalCustomers = Customer::where('active', 1)->count();
    $newCustomers = Customer::whereBetween('created_at', [$fromDate, $toDate])->count();
    $companyCustomers = Customer::where('customer_type', 'company')->where('active', 1)->count();
    $individualCustomers = Customer::where('customer_type', 'individual')->where('active', 1)->count();

    // =========================================================================
    // INVOICE STATS (Filtered based on permission)
    // =========================================================================
    $pendingAmount = (clone $invoiceBaseQuery)->whereIn('payment_status', ['unpaid', 'partial'])->sum('amount_due') ?? 0;
    $pendingCount = (clone $invoiceBaseQuery)->whereIn('payment_status', ['unpaid', 'partial'])->count();
    $overdueCount = (clone $invoiceBaseQuery)->where('due_date', '<', Carbon::now())->whereIn('payment_status', ['unpaid', 'partial'])->count();
    $overdueAmount = (clone $invoiceBaseQuery)->where('due_date', '<', Carbon::now())->whereIn('payment_status', ['unpaid', 'partial'])->sum('amount_due') ?? 0;
    $paidCount = (clone $invoiceBaseQuery)->where('payment_status', 'paid')->count();
    $partialCount = (clone $invoiceBaseQuery)->where('payment_status', 'partial')->count();
    $unpaidCount = (clone $invoiceBaseQuery)->where('payment_status', 'unpaid')->count();
    $totalInvoiceCount = (clone $invoiceBaseQuery)->count();

    // =========================================================================
    // LEAD STATS (Filtered based on permission)
    // =========================================================================
    $leadQuery = Lead::query();
    if (!$canViewAllLeads) {
        // Filter leads by who is assigned to work on them
        $leadQuery->where($assignedField, $currentUserId);
    }
    
    $openLeads = (clone $leadQuery)->where('lost', 0)->where('junk', 0)->count();
    $newLeads = (clone $leadQuery)->whereBetween('created_at', [$fromDate, $toDate])->count();
    $totalLeadValue = (clone $leadQuery)->where('lost', 0)->where('junk', 0)->sum('lead_value') ?? 0;
    $lostLeads = (clone $leadQuery)->where('lost', 1)->count();
    $junkLeads = (clone $leadQuery)->where('junk', 1)->count();
    $convertedLeads = (clone $leadQuery)->whereBetween('date_converted', [$fromDate, $toDate])->count();

    // =========================================================================
    // PROPOSAL STATS (NO FILTERING - Company-wide)
    // =========================================================================
    $totalProposals = Proposal::count();
    $acceptedProposals = Proposal::where('status', 'accepted')->count();
    $draftProposals = Proposal::where('status', 'draft')->count();
    $sentProposals = Proposal::where('status', 'sent')->count();

    // =========================================================================
    // ESTIMATION STATS (NO FILTERING - Company-wide)
    // =========================================================================
    $totalEstimations = Estimation::count();
    $approvedEstimations = Estimation::where('status', 'approved')->count();
    $draftEstimations = Estimation::where('status', 'draft')->count();

    // =========================================================================
    // CHART DATA - Revenue Trend (Filtered based on permission)
    // =========================================================================
    $days = $fromDate->diffInDays($toDate);
    $revenueTrendLabels = [];
    $revenueTrendValues = [];
    
    $revenueChartQuery = (clone $invoiceBaseQuery)->where('payment_status', 'paid')
        ->whereBetween('created_at', [$fromDate, $toDate]);
    
    if ($days <= 31) {
        $revenueData = (clone $revenueChartQuery)
            ->selectRaw('DATE(created_at) as date, SUM(total) as total')
            ->groupByRaw('DATE(created_at)')
            ->orderByRaw('DATE(created_at)')
            ->pluck('total', 'date')
            ->toArray();
        
        $current = clone $fromDate;
        while ($current <= $toDate) {
            $dateStr = $current->format('Y-m-d');
            $revenueTrendLabels[] = $current->format('d M');
            $revenueTrendValues[] = (float)($revenueData[$dateStr] ?? 0);
            $current->addDay();
        }
    } else {
        $revenueData = (clone $revenueChartQuery)
            ->selectRaw('YEAR(created_at) as year, MONTH(created_at) as month, SUM(total) as total')
            ->groupByRaw('YEAR(created_at), MONTH(created_at)')
            ->orderByRaw('YEAR(created_at), MONTH(created_at)')
            ->get();
        
        foreach ($revenueData as $row) {
            $revenueTrendLabels[] = Carbon::create($row->year, $row->month, 1)->format('M Y');
            $revenueTrendValues[] = (float)$row->total;
        }
    }

    // Chart Data - Invoice Status
    $invoiceStatusLabels = ['Paid', 'Partial', 'Unpaid', 'Overdue'];
    $invoiceStatusValues = [$paidCount, $partialCount, $unpaidCount, $overdueCount];
    $invoiceStatusColors = ['#10b981', '#f59e0b', '#6b7280', '#ef4444'];

    // =========================================================================
    // CHART DATA - Lead Status (Filtered based on permission)
    // =========================================================================
    $leadStatusQuery = DB::table('leads')
        ->join('leads_status', 'leads.status', '=', 'leads_status.id')
        ->where('leads.lost', 0)
        ->where('leads.junk', 0);
    
    if (!$canViewAllLeads) {
        $leadStatusQuery->where("leads.{$assignedField}", $currentUserId);
    }
    
    $leadStatuses = $leadStatusQuery
        ->select('leads_status.id', 'leads_status.name', 'leads_status.color', DB::raw('COUNT(*) as count'))
        ->groupBy('leads_status.id', 'leads_status.name', 'leads_status.color')
        ->get();
    
    $leadStatusLabels = $leadStatuses->pluck('name')->toArray();
    $leadStatusValues = $leadStatuses->pluck('count')->toArray();
    $leadStatusColors = $leadStatuses->pluck('color')->map(fn($c) => $c ?? '#3498db')->toArray();
    $leadStatusIds = $leadStatuses->pluck('id')->toArray();
    
    if ($lostLeads > 0) {
        $leadStatusLabels[] = 'Lost';
        $leadStatusValues[] = $lostLeads;
        $leadStatusColors[] = '#e74c3c';
        $leadStatusIds[] = 'lost';
    }
    
    if ($junkLeads > 0) {
        $leadStatusLabels[] = 'Junk';
        $leadStatusValues[] = $junkLeads;
        $leadStatusColors[] = '#95a5a6';
        $leadStatusIds[] = 'junk';
    }

    // =========================================================================
    // CHART DATA - Customer Growth (NO FILTERING - Company-wide)
    // =========================================================================
    $customerGrowthLabels = [];
    $customerGrowthValues = [];
    for ($i = 5; $i >= 0; $i--) {
        $date = Carbon::now()->subMonths($i);
        $customerGrowthLabels[] = $date->format('M Y');
        $customerGrowthValues[] = Customer::whereYear('created_at', $date->year)->whereMonth('created_at', $date->month)->count();
    }

    // =========================================================================
    // MONTHLY COMPARISON (Leads and Invoices filtered based on permission)
    // =========================================================================
    $currentMonth = Carbon::now();
    $lastMonth = Carbon::now()->subMonth();
    
    // Current Month Queries (filtered)
    $currentMonthLeadQuery = Lead::whereMonth('created_at', $currentMonth->month)->whereYear('created_at', $currentMonth->year);
    if (!$canViewAllLeads) {
        $currentMonthLeadQuery->where($assignedField, $currentUserId);
    }
    
    $currentMonthInvoiceQuery = Invoice::whereMonth('created_at', $currentMonth->month)->whereYear('created_at', $currentMonth->year);
    if (!$canViewAllInvoices) {
        $currentMonthInvoiceQuery->where(function($q) use ($currentUserId, $invoiceAssignedField, $invoiceCreatedField) {
            $q->where($invoiceAssignedField, $currentUserId)->orWhere($invoiceCreatedField, $currentUserId);
        });
    }
    
    $currentMonthData = [
        'label' => $currentMonth->format('M Y'),
        'revenue' => (clone $currentMonthInvoiceQuery)->where('payment_status', 'paid')->sum('total') ?? 0,
        'invoices' => (clone $currentMonthInvoiceQuery)->count(),
        'customers' => Customer::whereMonth('created_at', $currentMonth->month)->whereYear('created_at', $currentMonth->year)->count(),
        'leads' => $currentMonthLeadQuery->count(),
    ];
    
    // Last Month Queries (filtered)
    $lastMonthLeadQuery = Lead::whereMonth('created_at', $lastMonth->month)->whereYear('created_at', $lastMonth->year);
    if (!$canViewAllLeads) {
        $lastMonthLeadQuery->where($assignedField, $currentUserId);
    }
    
    $lastMonthInvoiceQuery = Invoice::whereMonth('created_at', $lastMonth->month)->whereYear('created_at', $lastMonth->year);
    if (!$canViewAllInvoices) {
        $lastMonthInvoiceQuery->where(function($q) use ($currentUserId, $invoiceAssignedField, $invoiceCreatedField) {
            $q->where($invoiceAssignedField, $currentUserId)->orWhere($invoiceCreatedField, $currentUserId);
        });
    }
    
    $lastMonthData = [
        'label' => $lastMonth->format('M Y'),
        'revenue' => (clone $lastMonthInvoiceQuery)->where('payment_status', 'paid')->sum('total') ?? 0,
        'invoices' => (clone $lastMonthInvoiceQuery)->count(),
        'customers' => Customer::whereMonth('created_at', $lastMonth->month)->whereYear('created_at', $lastMonth->year)->count(),
        'leads' => $lastMonthLeadQuery->count(),
    ];

    // =========================================================================
    // RECENT DATA (Leads and Invoices filtered based on permission)
    // =========================================================================
    $recentLeadsQuery = Lead::with(['leadStatus', 'leadSource'])->where('lost', 0)->where('junk', 0)->latest();
    if (!$canViewAllLeads) {
        $recentLeadsQuery->where($assignedField, $currentUserId);
    }
    
    $recentInvoicesQuery = Invoice::with('customer')->latest();
    if (!$canViewAllInvoices) {
        $recentInvoicesQuery->where(function($q) use ($currentUserId, $invoiceAssignedField, $invoiceCreatedField) {
            $q->where($invoiceAssignedField, $currentUserId)->orWhere($invoiceCreatedField, $currentUserId);
        });
    }
    
    $recentInvoices = $recentInvoicesQuery->take(5)->get();
    $recentCustomers = Customer::latest()->take(5)->get();
    $recentLeads = $recentLeadsQuery->take(5)->get();
@endphp

<x-slot name="header">
    <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;">
        <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
            <h1 class="page-title">Dashboard</h1>
            @if(!$canViewAllLeads)
                <span style="padding: 4px 10px; font-size: 10px; font-weight: 500; border-radius: 20px; background: #ede9fe; color: #6d28d9;">
                    My Leads
                </span>
            @endif
            @if(!$canViewAllInvoices)
                <span style="padding: 4px 10px; font-size: 10px; font-weight: 500; border-radius: 20px; background: #d1fae5; color: #059669;">
                    My Invoices
                </span>
            @endif
        </div>
        
        {{-- Date Range Filter --}}
        <form method="GET" style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
            <div style="display: flex; align-items: center; gap: 8px;">
                <label style="font-size: 12px; color: var(--text-secondary);">From:</label>
                <input type="date" name="from_date" value="{{ $dateRange['from'] }}" 
                    class="form-control" style="padding: 6px 10px; font-size: 13px; border-radius: 6px; border: 1px solid var(--border-color);">
            </div>
            <div style="display: flex; align-items: center; gap: 8px;">
                <label style="font-size: 12px; color: var(--text-secondary);">To:</label>
                <input type="date" name="to_date" value="{{ $dateRange['to'] }}" 
                    class="form-control" style="padding: 6px 10px; font-size: 13px; border-radius: 6px; border: 1px solid var(--border-color);">
            </div>
            <button type="submit" class="btn btn-primary" style="padding: 6px 16px; font-size: 13px;">Apply</button>
            <a href="{{ url()->current() }}" class="btn btn-secondary" style="padding: 6px 12px; font-size: 13px;">Reset</a>
        </form>
    </div>
</x-slot>

{{-- Welcome Section --}}
<div style="margin-bottom: 20px;">
    <h2 style="font-size: 18px; font-weight: 600; color: var(--text-primary); margin: 0 0 4px;">
        Welcome back, {{ $currentUser->name ?? 'Admin' }}! 👋
    </h2>
    <p style="font-size: 13px; color: var(--text-secondary); margin: 0;">
        Showing data from {{ Carbon::parse($dateRange['from'])->format('d M Y') }} to {{ Carbon::parse($dateRange['to'])->format('d M Y') }}
    </p>
</div>

{{-- Main Stats Grid --}}
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px;">
    {{-- Revenue Card --}}
    <div class="card" style="padding: 20px;">
        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;">
            <div style="width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); display: flex; align-items: center; justify-content: center;">
                <svg style="width: 24px; height: 24px; color: white;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
            @if($revenueGrowth >= 0)
                <span style="padding: 4px 10px; font-size: 11px; font-weight: 600; border-radius: 20px; background: #d1fae5; color: #059669;">↑ {{ $revenueGrowth }}%</span>
            @else
                <span style="padding: 4px 10px; font-size: 11px; font-weight: 600; border-radius: 20px; background: #fee2e2; color: #dc2626;">↓ {{ abs($revenueGrowth) }}%</span>
            @endif
        </div>
        <p style="font-size: 12px; color: var(--text-secondary); margin: 0; text-transform: uppercase; letter-spacing: 0.5px;">
            Period Revenue
        </p>
        <p style="font-size: 28px; font-weight: 700; color: var(--text-primary); margin: 4px 0 0;">{{ formatCurrencyDash($periodRevenue) }}</p>
        <p style="font-size: 11px; color: var(--text-muted); margin-top: 8px;">Total: {{ formatCurrencyDash($totalRevenue) }}</p>
    </div>

    {{-- Customers Card --}}
    <div class="card" style="padding: 20px;">
        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;">
            <div style="width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); display: flex; align-items: center; justify-content: center;">
                <svg style="width: 24px; height: 24px; color: white;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
                </svg>
            </div>
            <span style="padding: 4px 10px; font-size: 11px; font-weight: 600; border-radius: 20px; background: #dbeafe; color: #1d4ed8;">+{{ $newCustomers }} new</span>
        </div>
        <p style="font-size: 12px; color: var(--text-secondary); margin: 0; text-transform: uppercase; letter-spacing: 0.5px;">
            Total Customers
        </p>
        <p style="font-size: 28px; font-weight: 700; color: var(--text-primary); margin: 4px 0 0;">{{ number_format($totalCustomers) }}</p>
        <p style="font-size: 11px; color: var(--text-muted); margin-top: 8px;">{{ $companyCustomers }} Companies • {{ $individualCustomers }} Individuals</p>
    </div>

    {{-- Pending Invoices Card --}}
    <div class="card" style="padding: 20px;">
        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;">
            <div style="width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); display: flex; align-items: center; justify-content: center;">
                <svg style="width: 24px; height: 24px; color: white;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
            </div>
            <span style="padding: 4px 10px; font-size: 11px; font-weight: 600; border-radius: 20px; background: #fef3c7; color: #d97706;">{{ $pendingCount }} pending</span>
        </div>
        <p style="font-size: 12px; color: var(--text-secondary); margin: 0; text-transform: uppercase; letter-spacing: 0.5px;">
            Pending Amount
        </p>
        <p style="font-size: 28px; font-weight: 700; color: var(--text-primary); margin: 4px 0 0;">{{ formatCurrencyDash($pendingAmount) }}</p>
        <p style="font-size: 11px; color: #ef4444; margin-top: 8px;">{{ $overdueCount }} overdue ({{ formatCurrencyDash($overdueAmount) }})</p>
    </div>

    {{-- Leads Card - CLICKABLE --}}
    <a href="{{ ($canViewAllLeads ? route('admin.leads.all-leads.index') : route('admin.leads.my-leads.index')) }}" class="card" style="padding: 20px; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s;">
        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;">
            <div style="width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); display: flex; align-items: center; justify-content: center;">
                <svg style="width: 24px; height: 24px; color: white;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                </svg>
            </div>
            <span style="padding: 4px 10px; font-size: 11px; font-weight: 600; border-radius: 20px; background: #ede9fe; color: #6d28d9;">+{{ $newLeads }} new</span>
        </div>
        <p style="font-size: 12px; color: var(--text-secondary); margin: 0; text-transform: uppercase; letter-spacing: 0.5px;">
            {{ $canViewAllLeads ? 'Open Leads' : 'My Open Leads' }}
        </p>
        <p style="font-size: 28px; font-weight: 700; color: var(--text-primary); margin: 4px 0 0;">{{ number_format($openLeads) }}</p>
        <p style="font-size: 11px; color: var(--text-muted); margin-top: 8px;">Pipeline: {{ formatCurrencyDash($totalLeadValue) }}</p>
    </a>
</div>

{{-- Charts Row --}}
<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 24px;">
    {{-- Revenue Trend Chart --}}
    <div class="card" style="padding: 20px;">
        <h3 style="font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0 0 16px;">
            📈 Revenue Trend
        </h3>
        <div style="height: 280px;">
            <canvas id="revenueTrendChart"></canvas>
        </div>
    </div>

    {{-- Invoice Status Pie Chart --}}
    <div class="card" style="padding: 20px;">
        <h3 style="font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0 0 16px;">
            📊 Invoice Status
        </h3>
        <div style="height: 280px; display: flex; align-items: center; justify-content: center;">
            <canvas id="invoiceStatusChart"></canvas>
        </div>
    </div>
</div>

{{-- Second Charts Row --}}
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px;">
    {{-- Lead Status Pie Chart - CLICKABLE --}}
    <div class="card" style="padding: 20px;">
        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;">
            <h3 style="font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0;">
                🎯 {{ $canViewAllLeads ? 'Lead Status Distribution' : 'My Lead Status' }}
            </h3>
            <a href="{{ ($canViewAllLeads ? route('admin.leads.all-leads.index') : route('admin.leads.my-leads.index')) }}" style="font-size: 12px; font-weight: 500; color: var(--primary); text-decoration: none; display: flex; align-items: center; gap: 4px;">
                View all 
                <svg style="width: 14px; height: 14px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
            </a>
        </div>
        <div style="height: 250px; display: flex; align-items: center; justify-content: center;">
            <canvas id="leadStatusChart" style="cursor: pointer;"></canvas>
        </div>
        <p style="font-size: 11px; color: var(--text-muted); text-align: center; margin-top: 12px;">
            <svg style="width: 12px; height: 12px; vertical-align: middle; margin-right: 4px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"/>
            </svg>
            Click on any segment to filter leads by status
        </p>
    </div>

    {{-- Customer Growth Chart --}}
    <div class="card" style="padding: 20px;">
        <h3 style="font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0 0 16px;">
            👥 Customer Growth (Last 6 Months)
        </h3>
        <div style="height: 250px;">
            <canvas id="customerGrowthChart"></canvas>
        </div>
    </div>
</div>

{{-- Monthly Comparison Report --}}
<div class="card" style="padding: 20px; margin-bottom: 24px;">
    <h3 style="font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0 0 16px;">
        📊 Monthly Comparison Report
    </h3>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;">
        {{-- Revenue Comparison --}}
        <div style="padding: 16px; background: var(--body-bg); border-radius: 8px;">
            <p style="font-size: 12px; color: var(--text-secondary); margin: 0 0 8px;">Revenue</p>
            <div style="display: flex; justify-content: space-between; align-items: baseline;">
                <div>
                    <p style="font-size: 11px; color: var(--text-muted);">{{ $currentMonthData['label'] }}</p>
                    <p style="font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 2px 0;">₹{{ number_format($currentMonthData['revenue'], 2) }}</p>
                </div>
                <div style="text-align: right;">
                    <p style="font-size: 11px; color: var(--text-muted);">{{ $lastMonthData['label'] }}</p>
                    <p style="font-size: 14px; font-weight: 500; color: var(--text-secondary); margin: 2px 0;">₹{{ number_format($lastMonthData['revenue'], 2) }}</p>
                </div>
            </div>
        </div>

        {{-- Invoices Comparison --}}
        <div style="padding: 16px; background: var(--body-bg); border-radius: 8px;">
            <p style="font-size: 12px; color: var(--text-secondary); margin: 0 0 8px;">Invoices Created</p>
            <div style="display: flex; justify-content: space-between; align-items: baseline;">
                <div>
                    <p style="font-size: 11px; color: var(--text-muted);">{{ $currentMonthData['label'] }}</p>
                    <p style="font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 2px 0;">{{ $currentMonthData['invoices'] }}</p>
                </div>
                <div style="text-align: right;">
                    <p style="font-size: 11px; color: var(--text-muted);">{{ $lastMonthData['label'] }}</p>
                    <p style="font-size: 14px; font-weight: 500; color: var(--text-secondary); margin: 2px 0;">{{ $lastMonthData['invoices'] }}</p>
                </div>
            </div>
        </div>

        {{-- Customers Comparison --}}
        <div style="padding: 16px; background: var(--body-bg); border-radius: 8px;">
            <p style="font-size: 12px; color: var(--text-secondary); margin: 0 0 8px;">New Customers</p>
            <div style="display: flex; justify-content: space-between; align-items: baseline;">
                <div>
                    <p style="font-size: 11px; color: var(--text-muted);">{{ $currentMonthData['label'] }}</p>
                    <p style="font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 2px 0;">{{ $currentMonthData['customers'] }}</p>
                </div>
                <div style="text-align: right;">
                    <p style="font-size: 11px; color: var(--text-muted);">{{ $lastMonthData['label'] }}</p>
                    <p style="font-size: 14px; font-weight: 500; color: var(--text-secondary); margin: 2px 0;">{{ $lastMonthData['customers'] }}</p>
                </div>
            </div>
        </div>

        {{-- Leads Comparison --}}
        <div style="padding: 16px; background: var(--body-bg); border-radius: 8px;">
            <p style="font-size: 12px; color: var(--text-secondary); margin: 0 0 8px;">New Leads</p>
            <div style="display: flex; justify-content: space-between; align-items: baseline;">
                <div>
                    <p style="font-size: 11px; color: var(--text-muted);">{{ $currentMonthData['label'] }}</p>
                    <p style="font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 2px 0;">{{ $currentMonthData['leads'] }}</p>
                </div>
                <div style="text-align: right;">
                    <p style="font-size: 11px; color: var(--text-muted);">{{ $lastMonthData['label'] }}</p>
                    <p style="font-size: 14px; font-weight: 500; color: var(--text-secondary); margin: 2px 0;">{{ $lastMonthData['leads'] }}</p>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Quick Stats Cards --}}
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px;">
    {{-- Proposals --}}
    <div class="card" style="padding: 16px;">
        <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
            <div style="width: 36px; height: 36px; border-radius: 8px; background: #fef3c7; display: flex; align-items: center; justify-content: center;">📄</div>
            <span style="font-size: 13px; font-weight: 600; color: var(--text-primary);">
                Proposals
            </span>
        </div>
        <div style="display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px;">
            <span style="color: var(--text-secondary);">Total</span>
            <span style="font-weight: 600; color: var(--text-primary);">{{ $totalProposals }}</span>
        </div>
        <div style="display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px;">
            <span style="color: var(--text-secondary);">Accepted</span>
            <span style="font-weight: 600; color: #10b981;">{{ $acceptedProposals }}</span>
        </div>
        <div style="display: flex; justify-content: space-between; font-size: 12px;">
            <span style="color: var(--text-secondary);">Pending</span>
            <span style="font-weight: 600; color: #f59e0b;">{{ $draftProposals + $sentProposals }}</span>
        </div>
    </div>

    {{-- Estimations --}}
    <div class="card" style="padding: 16px;">
        <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
            <div style="width: 36px; height: 36px; border-radius: 8px; background: #dbeafe; display: flex; align-items: center; justify-content: center;">📋</div>
            <span style="font-size: 13px; font-weight: 600; color: var(--text-primary);">
                Estimations
            </span>
        </div>
        <div style="display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px;">
            <span style="color: var(--text-secondary);">Total</span>
            <span style="font-weight: 600; color: var(--text-primary);">{{ $totalEstimations }}</span>
        </div>
        <div style="display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px;">
            <span style="color: var(--text-secondary);">Approved</span>
            <span style="font-weight: 600; color: #10b981;">{{ $approvedEstimations }}</span>
        </div>
        <div style="display: flex; justify-content: space-between; font-size: 12px;">
            <span style="color: var(--text-secondary);">Draft</span>
            <span style="font-weight: 600; color: #6b7280;">{{ $draftEstimations }}</span>
        </div>
    </div>

    {{-- Invoices Summary --}}
    <div class="card" style="padding: 16px;">
        <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
            <div style="width: 36px; height: 36px; border-radius: 8px; background: #d1fae5; display: flex; align-items: center; justify-content: center;">✅</div>
            <span style="font-size: 13px; font-weight: 600; color: var(--text-primary);">
                {{ $canViewAllInvoices ? 'Invoices' : 'My Invoices' }}
            </span>
        </div>
        <div style="display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px;">
            <span style="color: var(--text-secondary);">Total</span>
            <span style="font-weight: 600; color: var(--text-primary);">{{ $totalInvoiceCount }}</span>
        </div>
        <div style="display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px;">
            <span style="color: var(--text-secondary);">Paid</span>
            <span style="font-weight: 600; color: #10b981;">{{ $paidCount }}</span>
        </div>
        <div style="display: flex; justify-content: space-between; font-size: 12px;">
            <span style="color: var(--text-secondary);">Overdue</span>
            <span style="font-weight: 600; color: #ef4444;">{{ $overdueCount }}</span>
        </div>
    </div>

    {{-- Lead Pipeline --}}
    <a href="{{ ($canViewAllLeads ? route('admin.leads.all-leads.index') : route('admin.leads.my-leads.index')) }}" class="card" style="padding: 16px; text-decoration: none; transition: transform 0.2s;">
        <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
            <div style="width: 36px; height: 36px; border-radius: 8px; background: #ede9fe; display: flex; align-items: center; justify-content: center;">📈</div>
            <span style="font-size: 13px; font-weight: 600; color: var(--text-primary);">
                {{ $canViewAllLeads ? 'Lead Pipeline' : 'My Pipeline' }}
            </span>
        </div>
        <div style="display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px;">
            <span style="color: var(--text-secondary);">Value</span>
            <span style="font-weight: 600; color: var(--text-primary);">{{ formatCurrencyDash($totalLeadValue) }}</span>
        </div>
        <div style="display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px;">
            <span style="color: var(--text-secondary);">Converted</span>
            <span style="font-weight: 600; color: #10b981;">{{ $convertedLeads }}</span>
        </div>
        <div style="display: flex; justify-content: space-between; font-size: 12px;">
            <span style="color: var(--text-secondary);">Lost</span>
            <span style="font-weight: 600; color: #ef4444;">{{ $lostLeads }}</span>
        </div>
    </a>
</div>

{{-- Recent Data Tables --}}
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 16px;">
    {{-- Recent Invoices --}}
    <div class="card">
        <div class="card-header" style="display: flex; align-items: center; justify-content: space-between; padding: 16px;">
            <h3 style="font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0;">
                {{ $canViewAllInvoices ? 'Recent Invoices' : 'My Recent Invoices' }}
            </h3>
            <a href="{{ route('admin.sales.invoices.index') }}" style="font-size: 12px; font-weight: 500; color: var(--primary); text-decoration: none;">View all →</a>
        </div>
        <div style="overflow-x: auto;">
            @if($recentInvoices->count() > 0)
                <table style="width: 100%; border-collapse: collapse;">
                    <tbody>
                        @foreach($recentInvoices as $invoice)
                            <tr style="border-bottom: 1px solid var(--border-color);">
                                <td style="padding: 12px 16px;">
                                    <p style="font-size: 13px; font-weight: 600; color: var(--primary); margin: 0;">{{ $invoice->invoice_number }}</p>
                                    <p style="font-size: 11px; color: var(--text-secondary); margin: 2px 0 0;">{{ $invoice->customer->name ?? $invoice->customer->company ?? 'N/A' }}</p>
                                </td>
                                <td style="padding: 12px 16px; text-align: right;">
                                    <p style="font-size: 13px; font-weight: 600; color: var(--text-primary); margin: 0;">{{ formatCurrencyDash($invoice->total) }}</p>
                                    @if($invoice->payment_status === 'paid')
                                        <span style="font-size: 10px; padding: 2px 8px; border-radius: 10px; background: #d1fae5; color: #059669;">Paid</span>
                                    @elseif($invoice->payment_status === 'partial')
                                        <span style="font-size: 10px; padding: 2px 8px; border-radius: 10px; background: #fef3c7; color: #d97706;">Partial</span>
                                    @elseif($invoice->due_date && $invoice->due_date < now())
                                        <span style="font-size: 10px; padding: 2px 8px; border-radius: 10px; background: #fee2e2; color: #dc2626;">Overdue</span>
                                    @else
                                        <span style="font-size: 10px; padding: 2px 8px; border-radius: 10px; background: #f3f4f6; color: #6b7280;">{{ ucfirst($invoice->payment_status) }}</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @else
                <div style="padding: 32px; text-align: center;">
                    <p style="font-size: 13px; color: var(--text-secondary);">No invoices yet</p>
                </div>
            @endif
        </div>
    </div>

    {{-- Recent Customers --}}
    <div class="card">
        <div class="card-header" style="display: flex; align-items: center; justify-content: space-between; padding: 16px;">
            <h3 style="font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0;">
                Recent Customers
            </h3>
            <a href="{{ route('admin.customers.index') }}" style="font-size: 12px; font-weight: 500; color: var(--primary); text-decoration: none;">View all →</a>
        </div>
        <div style="overflow-x: auto;">
            @if($recentCustomers->count() > 0)
                <table style="width: 100%; border-collapse: collapse;">
                    <tbody>
                        @foreach($recentCustomers as $customer)
                            <tr style="border-bottom: 1px solid var(--border-color);">
                                <td style="padding: 12px 16px;">
                                    <div style="display: flex; align-items: center; gap: 10px;">
                                        <div style="width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #1d4ed8); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: white;">
                                            {{ strtoupper(substr($customer->name ?? 'C', 0, 1)) }}
                                        </div>
                                        <div>
                                            <p style="font-size: 13px; font-weight: 600; color: var(--text-primary); margin: 0;">{{ $customer->display_name }}</p>
                                            <p style="font-size: 11px; color: var(--text-secondary); margin: 2px 0 0;">{{ $customer->email ?? '-' }}</p>
                                        </div>
                                    </div>
                                </td>
                                <td style="padding: 12px 16px; text-align: right;">
                                    @if($customer->customer_type === 'company')
                                        <span style="font-size: 10px; padding: 2px 8px; border-radius: 10px; background: #dbeafe; color: #1d4ed8;">Company</span>
                                    @else
                                        <span style="font-size: 10px; padding: 2px 8px; border-radius: 10px; background: #f3f4f6; color: #6b7280;">Individual</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @else
                <div style="padding: 32px; text-align: center;">
                    <p style="font-size: 13px; color: var(--text-secondary);">No customers yet</p>
                </div>
            @endif
        </div>
    </div>

    {{-- Recent Leads - CLICKABLE ROWS --}}
    <div class="card">
        <div class="card-header" style="display: flex; align-items: center; justify-content: space-between; padding: 16px;">
            <h3 style="font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0;">
                {{ $canViewAllLeads ? 'Recent Leads' : 'My Recent Leads' }}
            </h3>
            <a href="{{ ($canViewAllLeads ? route('admin.leads.all-leads.index') : route('admin.leads.my-leads.index')) }}" style="font-size: 12px; font-weight: 500; color: var(--primary); text-decoration: none;">View all →</a>
        </div>
        <div style="overflow-x: auto;">
            @if($recentLeads->count() > 0)
                <table style="width: 100%; border-collapse: collapse;">
                    <tbody>
                        @foreach($recentLeads as $lead)
                            <tr style="border-bottom: 1px solid var(--border-color);">
                                <td style="padding: 12px 16px;">
                                    <p style="font-size: 13px; font-weight: 600; color: var(--text-primary); margin: 0;">{{ $lead->name }}</p>
                                    <p style="font-size: 11px; color: var(--text-secondary); margin: 2px 0 0;">{{ $lead->company ?? $lead->email ?? '-' }}</p>
                                </td>
                                <td style="padding: 12px 16px; text-align: right;">
                                    <p style="font-size: 12px; font-weight: 600; color: var(--text-primary); margin: 0 0 4px;">{{ formatCurrencyDash($lead->lead_value ?? 0) }}</p>
                                    <span style="font-size: 10px; padding: 2px 8px; border-radius: 10px; background: {{ $lead->leadStatus->color ?? '#3498db' }}20; color: {{ $lead->leadStatus->color ?? '#3498db' }};">{{ $lead->leadStatus->name ?? '-' }}</span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @else
                <div style="padding: 32px; text-align: center;">
                    <p style="font-size: 13px; color: var(--text-secondary);">No leads yet</p>
                </div>
            @endif
        </div>
    </div>
</div>

{{-- Chart.js --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    Chart.defaults.font.family = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
    Chart.defaults.font.size = 12;

    // Revenue Trend Chart
    new Chart(document.getElementById('revenueTrendChart'), {
        type: 'line',
        data: {
            labels: {!! json_encode($revenueTrendLabels) !!},
            datasets: [{
                label: 'Revenue',
                data: {!! json_encode($revenueTrendValues) !!},
                borderColor: '#10b981',
                backgroundColor: 'rgba(16, 185, 129, 0.1)',
                borderWidth: 2,
                fill: true,
                tension: 0.4,
                pointBackgroundColor: '#10b981',
                pointBorderColor: '#fff',
                pointBorderWidth: 2,
                pointRadius: 4,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },
            scales: {
                x: { grid: { display: false } },
                y: { grid: { color: 'rgba(156, 163, 175, 0.1)' }, ticks: { callback: v => '₹' + (v >= 100000 ? (v/100000).toFixed(1) + 'L' : v >= 1000 ? (v/1000).toFixed(1) + 'K' : v) } }
            }
        }
    });

    // Invoice Status Chart
    new Chart(document.getElementById('invoiceStatusChart'), {
        type: 'doughnut',
        data: {
            labels: {!! json_encode($invoiceStatusLabels) !!},
            datasets: [{ data: {!! json_encode($invoiceStatusValues) !!}, backgroundColor: {!! json_encode($invoiceStatusColors) !!}, borderWidth: 0 }]
        },
        options: { responsive: true, maintainAspectRatio: false, cutout: '65%', plugins: { legend: { position: 'bottom', labels: { padding: 16, usePointStyle: true } } } }
    });

    // Lead Status IDs for click filtering
    const leadStatusIds = {!! json_encode($leadStatusIds) !!};
    const leadsIndexUrl = "{{ ($canViewAllLeads ? route('admin.leads.all-leads.index') : route('admin.leads.my-leads.index')) }}";

    // Lead Status Chart - CLICKABLE
    const leadStatusChart = new Chart(document.getElementById('leadStatusChart'), {
        type: 'doughnut',
        data: {
            labels: {!! json_encode($leadStatusLabels) !!},
            datasets: [{ 
                data: {!! json_encode($leadStatusValues) !!}, 
                backgroundColor: {!! json_encode($leadStatusColors) !!}, 
                borderWidth: 0,
                hoverBorderWidth: 3,
                hoverBorderColor: '#fff'
            }]
        },
        options: { 
            responsive: true, 
            maintainAspectRatio: false, 
            cutout: '65%',
            plugins: { 
                legend: { 
                    position: 'bottom', 
                    labels: { 
                        padding: 16, 
                        usePointStyle: true,
                        font: { size: 11 }
                    },
                    onClick: function(e, legendItem, legend) {
                        const index = legendItem.index;
                        redirectToLeadFilter(index);
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const label = context.label || '';
                            const value = context.raw || 0;
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                            return `${label}: ${value} (${percentage}%)`;
                        },
                        afterLabel: function(context) {
                            return 'Click to filter';
                        }
                    }
                }
            },
            onClick: function(evt, elements) {
                if (elements.length > 0) {
                    const index = elements[0].index;
                    redirectToLeadFilter(index);
                }
            },
            onHover: function(evt, elements) {
                evt.native.target.style.cursor = elements.length > 0 ? 'pointer' : 'default';
            }
        }
    });

    // Function to redirect to leads with filter
    function redirectToLeadFilter(index) {
        const statusId = leadStatusIds[index];
        let url = leadsIndexUrl;
        
        if (statusId === 'lost') {
            url += '?lost=1';
        } else if (statusId === 'junk') {
            url += '?junk=1';
        } else if (statusId) {
            url += '?status=' + statusId;
        }
        
        window.location.href = url;
    }

    // Customer Growth Chart
    new Chart(document.getElementById('customerGrowthChart'), {
        type: 'bar',
        data: {
            labels: {!! json_encode($customerGrowthLabels) !!},
            datasets: [{ label: 'New Customers', data: {!! json_encode($customerGrowthValues) !!}, backgroundColor: '#3b82f6', borderRadius: 6 }]
        },
        options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { grid: { display: false } }, y: { grid: { color: 'rgba(156, 163, 175, 0.1)' }, beginAtZero: true } } }
    });
});
</script>