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

@section('actions')
    <a href="{{ route('invoices.create') }}"
       class="inline-flex items-center gap-2 bg-[#1e6fbf] hover:bg-[#14538f] text-white text-sm font-semibold px-3 py-2 rounded-lg">
        + Invoice Baru
    </a>
@endsection

@section('content')
<div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4 mb-6">
    @php
        $cards = [
            ['label' => 'Total Invoice',        'value' => number_format($totalInvoice, 0, ',', '.'),   'color' => 'blue'],
            ['label' => 'Invoice Hari Ini',     'value' => number_format($invoiceHariIni, 0, ',', '.'), 'color' => 'indigo'],
            ['label' => 'Total Nilai',          'value' => 'Rp ' . number_format($totalNilai, 0, ',', '.'),   'color' => 'emerald'],
            ['label' => 'Total Dibayar',        'value' => 'Rp ' . number_format($totalDibayar, 0, ',', '.'), 'color' => 'green'],
            ['label' => 'Total Piutang',        'value' => 'Rp ' . number_format($totalPiutang, 0, ',', '.'), 'color' => 'red'],
            ['label' => 'Total DP',             'value' => 'Rp ' . number_format($totalDP, 0, ',', '.'),      'color' => 'yellow'],
            ['label' => 'Belum Lunas',          'value' => number_format($belumLunas, 0, ',', '.'),  'color' => 'orange'],
        ];
        $colorMap = [
            'blue'    => 'from-blue-500 to-blue-600',
            'indigo'  => 'from-indigo-500 to-indigo-600',
            'emerald' => 'from-emerald-500 to-emerald-600',
            'green'   => 'from-green-500 to-green-600',
            'red'     => 'from-red-500 to-red-600',
            'yellow'  => 'from-yellow-500 to-yellow-600',
            'orange'  => 'from-orange-500 to-orange-600',
        ];
    @endphp
    @foreach($cards as $c)
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
            <div class="h-1 bg-gradient-to-r {{ $colorMap[$c['color']] }}"></div>
            <div class="p-4">
                <div class="text-xs uppercase tracking-wide text-slate-500 mb-1">{{ $c['label'] }}</div>
                <div class="text-xl font-bold text-slate-800">{{ $c['value'] }}</div>
            </div>
        </div>
    @endforeach
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
    {{-- Chart --}}
    <div class="lg:col-span-2 bg-white rounded-xl shadow-sm border border-slate-200 p-5">
        <h3 class="font-bold text-slate-800 mb-3">Tren Nilai Invoice (6 Bulan)</h3>
        <canvas id="chartInvoice" height="90"></canvas>
    </div>

    {{-- Recent --}}
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-5">
        <h3 class="font-bold text-slate-800 mb-3">Invoice Terbaru</h3>
        <div class="space-y-3">
            @forelse($invoiceTerbaru as $inv)
                <a href="{{ route('invoices.show', $inv) }}" class="block hover:bg-slate-50 rounded-lg p-2 -mx-2 transition">
                    <div class="flex justify-between items-start gap-2">
                        <div class="min-w-0">
                            <div class="font-semibold text-sm text-slate-800 truncate">{{ $inv->nomor_invoice }}</div>
                            <div class="text-xs text-slate-500 truncate">{{ $inv->customer->nama ?? '-' }}</div>
                        </div>
                        <div class="text-right shrink-0">
                            <div class="text-sm font-semibold text-slate-700">Rp {{ number_format($inv->total_akhir, 0, ',', '.') }}</div>
                            <span class="text-[10px] px-1.5 py-0.5 rounded border {{ $inv->status_badge }}">{{ $inv->status }}</span>
                        </div>
                    </div>
                </a>
            @empty
                <div class="text-sm text-slate-500 text-center py-6">Belum ada invoice.</div>
            @endforelse
        </div>
        <a href="{{ route('invoices.index') }}" class="block text-center text-sm text-[#1e6fbf] hover:underline mt-3">Lihat semua →</a>
    </div>
</div>
@endsection

@push('scripts')
<script>
    const ctx = document.getElementById('chartInvoice');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: {!! json_encode($chartData->keys()) !!},
            datasets: [{
                label: 'Nilai Invoice',
                data: {!! json_encode($chartData->values()) !!},
                borderColor: '#1e6fbf',
                backgroundColor: 'rgba(30,111,191,0.15)',
                fill: true,
                tension: 0.35,
                borderWidth: 2,
                pointBackgroundColor: '#1e6fbf',
            }]
        },
        options: {
            responsive: true,
            plugins: { legend: { display: false } },
            scales: {
                y: { ticks: { callback: v => 'Rp ' + new Intl.NumberFormat('id-ID').format(v) } }
            }
        }
    });
</script>
@endpush