@extends('layouts.main')
@section('page-title', 'Dashboard')
@section('content')
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Halo, {{ auth()->user()->name }} 👋</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">Dashboard</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid" style="max-width:1100px;">
            <!-- Hero ala Finza: saldo/penghasilan -->
            <div class="fin-hero">
                <div class="lbl">Penghasilan Net</div>
                <div class="amt">{{ rupiah($penghasilanNet) }}</div>
                <div class="fin-hero-actions">
                    <a href="/sales/sales_invoices/create" class="fin-pill-btn solid"><i class="fas fa-plus"></i> Jual Baru</a>
                    <a href="/purchases/purchase_inv/create" class="fin-pill-btn"><i class="fas fa-shopping-basket"></i> Beli Baru</a>
                    <a href="/master_produk" class="fin-pill-btn"><i class="fas fa-box"></i> Stok</a>
                </div>
                <div class="fin-chip-row">
                    <div class="fin-chip">Penjualan lunas<b>{{ rupiah($totalNominalPenjualan) }}</b></div>
                    <div class="fin-chip">Pembelian lunas<b>{{ rupiah($totalNominalPembelian) }}</b></div>
                    <div class="fin-chip">Biaya operasional<b>{{ rupiah($totalBiayaOperasional) }}</b></div>
                </div>
            </div>

            <!-- Stat grid -->
            <div class="fin-stat-grid">
                <a href="/sales/sales_invoices" class="fin-stat">
                    <div class="ic" style="background:#e8efff;color:#1e63e9;"><i class="fas fa-shopping-cart"></i></div>
                    <div class="v">{{ $totalPenjualan }}</div>
                    <div class="t">Faktur Penjualan</div>
                </a>
                <a href="/master_produk" class="fin-stat">
                    <div class="ic" style="background:#dcfce7;color:#16a34a;"><i class="fas fa-box"></i></div>
                    <div class="v">{{ $totalProduk }}</div>
                    <div class="t">Produk</div>
                </a>
                <a href="/customers" class="fin-stat">
                    <div class="ic" style="background:#fef3c7;color:#d97706;"><i class="fas fa-users"></i></div>
                    <div class="v">{{ $totalPelanggan }}</div>
                    <div class="t">Pelanggan</div>
                </a>
                <a href="/purchases/purchase_inv" class="fin-stat">
                    <div class="ic" style="background:#fee2e2;color:#dc2626;"><i class="fas fa-truck"></i></div>
                    <div class="v">{{ $totalPembelian }}</div>
                    <div class="t">Faktur Pembelian</div>
                </a>
            </div>

            <div class="row">
                <div class="col-lg-7">
                    <div class="fin-panel">
                        <div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;">
                            <h5 style="margin:0;">Grafik Penjualan &amp; Pembelian</h5>
                            <form method="GET" style="margin-left:auto;">
                                <select name="year" class="form-control form-control-sm" style="border-radius:10px;" onchange="this.form.submit()">
                                    @for($y = now()->year; $y >= now()->year - 1; $y--)
                                    <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>Tahun {{ $y }}</option>
                                    @endfor
                                </select>
                            </form>
                        </div>
                        <canvas id="salesChart" height="140"></canvas>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="fin-panel">
                        <h5>Keuangan sekilas</h5>
                        <a href="{{ route('penjualan.index', ['status_pembayaran' => 'Lunas']) }}" class="fin-kv">
                            <span class="ic" style="background:#dcfce7;color:#16a34a;"><i class="fas fa-coins"></i></span>
                            <span>Penjualan lunas<small style="display:block;">Lihat faktur →</small></span>
                            <span class="amt">{{ rupiah($totalNominalPenjualan) }}</span>
                        </a>
                        <a href="{{ route('penjualan.index', ['status_pembayaran' => 'Belum Lunas']) }}" class="fin-kv">
                            <span class="ic" style="background:#fef3c7;color:#d97706;"><i class="fas fa-hand-holding-usd"></i></span>
                            <span>Piutang penjualan<small style="display:block;">Belum lunas →</small></span>
                            <span class="amt">{{ rupiah($totalPiutangPenjualan) }}</span>
                        </a>
                        <a href="{{ route('pembelian.index', ['status_pembayaran' => 'Belum Lunas']) }}" class="fin-kv">
                            <span class="ic" style="background:#ffedd5;color:#ea580c;"><i class="fas fa-file-invoice-dollar"></i></span>
                            <span>Utang pembelian<small style="display:block;">Belum lunas →</small></span>
                            <span class="amt">{{ rupiah($totalPiutangPembelian) }}</span>
                        </a>
                        <a href="{{ route('profit_loss.index') }}" class="fin-kv">
                            <span class="ic" style="background:#e8efff;color:#1e63e9;"><i class="fas fa-wallet"></i></span>
                            <span>Laba rugi<small style="display:block;">Lihat laporan →</small></span>
                            <span class="amt">{{ rupiah($penghasilanNet) }}</span>
                        </a>
                        <a href="{{ route('operational_expenses.index') }}" class="fin-kv">
                            <span class="ic" style="background:#f1f5f9;color:#475569;"><i class="fas fa-receipt"></i></span>
                            <span>Biaya operasional<small style="display:block;">Kelola →</small></span>
                            <span class="amt">{{ rupiah($totalBiayaOperasional) }}</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    if (typeof Chart === 'undefined') return;
    const canvas = document.getElementById('salesChart');
    if (!canvas) return;
    const chartData = @json($months);
    new Chart(canvas.getContext('2d'), {
        type: 'line',
        data: {
            labels: ['Jan','Feb','Mar','Apr','Mei','Jun','Jul','Agu','Sep','Okt','Nov','Des'],
            datasets: [
                { label: 'Penjualan', data: chartData.map(m => m.penjualan), borderColor: '#1e63e9', backgroundColor: 'rgba(30,99,233,.15)', tension: .45, fill: true, borderWidth: 3, pointRadius: 0 },
                { label: 'Pembelian', data: chartData.map(m => m.pembelian), borderColor: '#38bdf8', backgroundColor: 'rgba(56,189,248,.12)', tension: .45, fill: true, borderWidth: 2.5, borderDash: [6,4], pointRadius: 0 }
            ]
        },
        options: {
            responsive: true,
            plugins: { legend: { position: 'bottom', labels: { boxWidth: 14, font: { weight: '700' } } } },
            scales: { x: { grid: { display: false } }, y: { grid: { color: '#eef2fb' }, ticks: { maxTicksLimit: 5 } } }
        }
    });
});
</script>
@endpush
@endsection