@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
<div class="mx-auto max-w-7xl">
    <h1 class="text-2xl font-semibold text-slate-900">Dashboard</h1>
    <p class="mt-1 text-sm text-slate-500">Overview of your pipeline and workload.</p>

    <div class="mt-8 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <div class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
            <p class="text-sm font-medium text-slate-500">Customers</p>
            <p class="mt-2 text-3xl font-semibold text-slate-900">{{ number_format($stats['customers']) }}</p>
        </div>
        <div class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
            <p class="text-sm font-medium text-slate-500">Leads</p>
            <p class="mt-2 text-3xl font-semibold text-slate-900">{{ number_format($stats['leads']) }}</p>
        </div>
        <div class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
            <p class="text-sm font-medium text-slate-500">Open deals</p>
            <p class="mt-2 text-3xl font-semibold text-slate-900">{{ number_format($stats['deals']) }}</p>
        </div>
        <div class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
            <p class="text-sm font-medium text-slate-500">Won revenue</p>
            <p class="mt-2 text-3xl font-semibold text-slate-900">${{ number_format($stats['revenue'], 2) }}</p>
        </div>
    </div>

    <div class="mt-8 grid gap-8 lg:grid-cols-2">
        <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
            <h2 class="text-lg font-semibold text-slate-900">Monthly won sales</h2>
            <p class="text-sm text-slate-500">Sum of deal value in won stages by month.</p>
            <div class="mt-4 h-64">
                <canvas id="chartSales"></canvas>
            </div>
        </div>
        <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
            <h2 class="text-lg font-semibold text-slate-900">Lead outcomes</h2>
            <p class="text-sm text-slate-500">Converted vs lost vs in progress.</p>
            <div class="mt-4 h-64">
                <canvas id="chartLeads"></canvas>
            </div>
        </div>
    </div>

    <div class="mt-8 rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <h2 class="text-lg font-semibold text-slate-900">Upcoming tasks</h2>
        <ul class="mt-4 divide-y divide-slate-100">
            @forelse ($tasksDueSoon as $task)
                <li class="flex flex-wrap items-center justify-between gap-2 py-3 text-sm">
                    <a href="{{ route('tasks.show', $task) }}" class="font-medium text-brand-600 hover:text-brand-500">{{ $task->title }}</a>
                    <span class="text-slate-500">{{ $task->due_date?->format('M j, Y') }}</span>
                    <span class="text-slate-400">{{ $task->assignee?->name ?? 'Unassigned' }}</span>
                </li>
            @empty
                <li class="py-6 text-sm text-slate-500">No upcoming tasks.</li>
            @endforelse
        </ul>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
    const salesLabels = @json($monthlySalesLabels);
    const salesValues = @json($monthlySalesValues);
    const leadConv = @json($leadConversion);

    new Chart(document.getElementById('chartSales'), {
        type: 'line',
        data: {
            labels: salesLabels,
            datasets: [{
                label: 'Revenue',
                data: salesValues,
                borderColor: 'rgb(14, 165, 233)',
                backgroundColor: 'rgba(14, 165, 233, 0.1)',
                fill: true,
                tension: 0.3,
            }]
        },
        options: { responsive: true, maintainAspectRatio: false }
    });

    new Chart(document.getElementById('chartLeads'), {
        type: 'doughnut',
        data: {
            labels: ['Converted', 'Lost', 'In progress'],
            datasets: [{
                data: [leadConv.converted, leadConv.lost, leadConv.other],
                backgroundColor: ['#22c55e', '#ef4444', '#94a3b8'],
            }]
        },
        options: { responsive: true, maintainAspectRatio: false }
    });
</script>
@endpush