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

@section('content')
@php
    $hour = (int) now()->format('G');
    $greet = $hour < 12 ? 'Good morning' : ($hour < 17 ? 'Good afternoon' : 'Good evening');
    $kpis = [
        ['sales', 'Sales', 'bag-check', '', 0, true, ''],
        ['collected', 'Collected', 'arrow-down-left-circle', 'chip-success', 2, true, ''],
        ['spent', 'Spent', 'arrow-up-right-circle', 'chip-danger', 3, true, 'invert'],
        ['profit', 'Net profit', 'graph-up-arrow', 'chip-violet', 5, true, ''],
        ['receivable', 'To receive from clients', 'people', 'chip-warning', 1, false, ''],
        ['payable', 'To pay to vendors', 'truck', 'chip-info', 4, false, ''],
    ];
@endphp

<div id="dashboard" data-url="{{ route('dashboard.data') }}" data-range="{{ $range['key'] }}" class="is-loading">
    <x-page-header :title="$greet.', '.\Illuminate\Support\Str::of(auth()->user()->name)->before(' ')" :subtitle="now()->format('l, d F Y')">
        @can('payments.create')
        <a href="{{ route('payments.create', ['direction' => 'received']) }}" class="btn btn-ghost"><i class="bi bi-cash-coin" aria-hidden="true"></i> Receive payment</a>
        @endcan
        @can('expenses.create')
        <a href="{{ route('expenses.create') }}" class="btn btn-ghost"><i class="bi bi-wallet2" aria-hidden="true"></i> Add expense</a>
        @endcan
        @can('orders.create')
        <a href="{{ route('orders.create') }}" class="btn btn-primary"><i class="bi bi-plus-lg" aria-hidden="true"></i> New order</a>
        @endcan
    </x-page-header>

    <div class="d-flex flex-wrap align-items-center gap-3 mb-3">
        <div class="range-switch" role="group" aria-label="Period">
            @foreach ($ranges as $key => $label)
                <button type="button" data-range="{{ $key }}" class="{{ $range['key'] === $key ? 'active' : '' }}" aria-pressed="{{ $range['key'] === $key ? 'true' : 'false' }}">{{ $label }}</button>
            @endforeach
        </div>
        <form id="custom-range" class="d-flex align-items-center gap-2" @if ($range['key'] !== 'custom') hidden @endif>
            <input type="date" name="from" class="form-control form-control-sm" value="{{ $range['from']->toDateString() }}" aria-label="From date">
            <span class="text-muted">to</span>
            <input type="date" name="to" class="form-control form-control-sm" value="{{ $range['to']->toDateString() }}" aria-label="To date">
            <button class="btn btn-sm btn-primary">Apply</button>
        </form>
        <div class="text-muted small ms-sm-auto"><i class="bi bi-calendar3 me-1" aria-hidden="true"></i><span data-range-label>{{ $range['label'] }}</span></div>
    </div>

    {{-- KPIs --}}
    <div class="row g-3 mb-3 row-cols-1 row-cols-sm-2 row-cols-xl-3 stagger kpi-row">
        @foreach ($kpis as [$key, $label, $icon, $chip, $color, $hasSpark, $extra])
            <div class="col {{ $extra }}" data-kpi="{{ $key }}" data-color="{{ $color }}">
                <div class="card kpi card-hover {{ $key === 'profit' ? 'hero-card' : '' }}">
                    <div class="kpi-body card-body">
                        <div class="kpi-top">
                            <span class="stat-label">{{ $label }}</span>
                            <span class="icon-chip {{ $key === 'profit' ? '' : $chip }}" @if ($key === 'profit') style="background:rgba(255,255,255,.18);color:#fff" @endif><i class="bi bi-{{ $icon }}" aria-hidden="true"></i></span>
                        </div>
                        <div class="stat-value" data-kpi-value data-current="0">{{ config('erp.currency') }}0.00</div>
                        @if ($hasSpark)
                            <div class="kpi-foot"><span class="delta flat" data-kpi-delta>—</span><span data-kpi-prev></span></div>
                        @else
                            <div class="kpi-foot"><span>Outstanding right now</span>
                                <a href="{{ route($key === 'receivable' ? 'reports.receivables' : 'reports.payables') }}" class="fw-semibold text-decoration-none">Details <i class="bi bi-arrow-right"></i></a></div>
                        @endif
                    </div>
                    @if ($hasSpark)<canvas class="spark" aria-hidden="true"></canvas>@endif
                </div>
            </div>
        @endforeach
    </div>
    <p class="text-muted small mb-4">Sales include tax. Spent = vendor payments + expenses. Net profit = sales (excl. tax) − vendor bills − expenses. Arrows compare with the previous period.</p>

    {{-- Charts --}}
    <div class="row g-3 mb-3">
        <div class="col-xl-8">
            <div class="card h-100">
                <div class="card-header"><span class="card-title">Sales vs collections</span><span class="card-sub">What you billed against what came in</span></div>
                <div class="card-body">
                    <div class="chart-box"><canvas data-chart-key="trend" role="img" aria-label="Line chart of sales and collections over the selected period"></canvas></div>
                    <div class="empty-state py-5" data-chart-empty="trend" hidden><div class="empty-icon"><i class="bi bi-graph-up"></i></div><p class="mb-0">No sales or payments in this period.</p></div>
                </div>
            </div>
        </div>
        <div class="col-xl-4">
            <div class="card h-100">
                <div class="card-header"><span class="card-title">Where the money went</span><span class="card-sub">Vendor payments + expenses</span></div>
                <div class="card-body">
                    <div class="chart-box h-sm"><canvas data-chart-key="spend" role="img" aria-label="Doughnut chart of spending by category"></canvas></div>
                    <ul class="legend-list mt-3" data-legend="spend"></ul>
                    <div class="empty-state py-4" data-chart-empty="spend" hidden><div class="empty-icon"><i class="bi bi-pie-chart"></i></div><p class="mb-0">Nothing spent in this period.</p></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-xl-8">
            <div class="card h-100">
                <div class="card-header"><span class="card-title">Cash flow</span><span class="card-sub">Money in, money out and the net</span></div>
                <div class="card-body">
                    <div class="chart-box"><canvas data-chart-key="cashflow" role="img" aria-label="Bar chart of money in and out over the selected period"></canvas></div>
                    <div class="empty-state py-5" data-chart-empty="cashflow" hidden><div class="empty-icon"><i class="bi bi-bar-chart"></i></div><p class="mb-0">No money moved in this period.</p></div>
                </div>
            </div>
        </div>
        <div class="col-xl-4">
            <div class="card h-100">
                <div class="card-header"><span class="card-title">Open orders</span><span class="card-sub">By stage, right now</span></div>
                <div class="card-body">
                    <div class="chart-box h-sm"><canvas data-chart-key="pipeline" role="img" aria-label="Doughnut chart of open orders by stage"></canvas></div>
                    <ul class="legend-list mt-3" data-legend="pipeline"></ul>
                    <div class="empty-state py-4" data-chart-empty="pipeline" hidden><div class="empty-icon"><i class="bi bi-check2-circle"></i></div><p class="mb-0">No open orders.</p></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-lg-6">
            <div class="card h-100">
                <div class="card-header"><span class="card-title">Receivables ageing</span><span class="card-sub">Unpaid, by age of order</span></div>
                <div class="card-body">
                    <div class="chart-box h-sm"><canvas data-chart-key="ageing" role="img" aria-label="Bar chart of unpaid amounts by age"></canvas></div>
                    <div class="empty-state py-4" data-chart-empty="ageing" hidden><div class="empty-icon"><i class="bi bi-emoji-smile"></i></div><p class="mb-0">Nobody owes you anything.</p></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card h-100">
                <div class="card-header"><span class="card-title">Top clients</span><span class="card-sub">By sales in this period</span></div>
                <div class="card-body">
                    <div class="chart-box h-sm"><canvas data-chart-key="clients" role="img" aria-label="Bar chart of top clients by sales"></canvas></div>
                    <div class="empty-state py-4" data-chart-empty="clients" hidden><div class="empty-icon"><i class="bi bi-people"></i></div><p class="mb-0">No sales in this period.</p></div>
                </div>
            </div>
        </div>
    </div>

    {{-- Work lists --}}
    <div class="row g-3">
        <div class="col-lg-4">
            <div class="card h-100">
                <div class="card-header"><span class="card-title">Upcoming deliveries</span><a href="{{ route('orders.index') }}" class="small">All orders</a></div>
                <ul class="list-rows">
                    @forelse ($upcoming as $o)
                        @php($late = $o->delivery_date->isPast())
                        <li>
                            <x-avatar :name="$o->client->name" :size="34" />
                            <div class="grow"><a href="{{ route('orders.show', $o) }}" class="title text-decoration-none">{{ $o->order_no }} · {{ $o->client->name }}</a>
                                <span class="sub {{ $late ? 'text-danger' : '' }}">{{ $late ? 'Overdue since ' : 'Due ' }}{{ $o->delivery_date->format('d M') }} · {{ $o->statusLabel() }}</span></div>
                            @if ($late)<span class="badge-soft badge-soft-danger no-dot">Late</span>@endif
                        </li>
                    @empty
                        <li class="justify-content-center text-muted py-4">No open orders with a delivery date.</li>
                    @endforelse
                </ul>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card h-100">
                <div class="card-header"><span class="card-title">Overdue vendor bills</span><a href="{{ route('vendor-bills.index', ['status' => 'overdue']) }}" class="small">View all</a></div>
                <ul class="list-rows">
                    @forelse ($overdueBills as $b)
                        <li>
                            <x-avatar :name="$b->vendor->name" :size="34" />
                            <div class="grow"><a href="{{ route('vendor-bills.show', $b) }}" class="title text-decoration-none">{{ $b->vendor->name }}</a>
                                <span class="sub text-danger">Due {{ $b->due_date->format('d M Y') }} · {{ (int) $b->due_date->diffInDays(now()) }}d late</span></div>
                            <div class="fw-semibold text-danger tabular">{{ money($b->due()) }}</div>
                        </li>
                    @empty
                        <li class="justify-content-center text-muted py-4"><i class="bi bi-check-circle text-success me-2"></i>Nothing overdue.</li>
                    @endforelse
                </ul>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card h-100">
                <div class="card-header"><span class="card-title">Recent orders</span><a href="{{ route('orders.index') }}" class="small">View all</a></div>
                <ul class="list-rows">
                    @forelse ($recentOrders as $o)
                        <li>
                            <div class="grow"><a href="{{ route('orders.show', $o) }}" class="title text-decoration-none">{{ $o->order_no }} · {{ $o->client->name }}</a><span class="sub">{{ $o->order_date->format('d M Y') }}</span></div>
                            <div class="text-end"><div class="fw-semibold tabular">{{ money($o->total) }}</div><x-order-status :order="$o" /></div>
                        </li>
                    @empty
                        <li class="justify-content-center text-muted py-4">No orders yet.</li>
                    @endforelse
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection