@extends('admin.layouts.app')

@section('title', 'Dashboard')

@section('content')
    <style>
        .period-tabs { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 20px; }
        .period-tabs a {
            padding: 7px 14px; font-size: 13px; font-weight: 500; text-decoration: none;
            color: var(--text-muted); background: var(--card-bg); border-right: 1px solid var(--border);
        }
        .period-tabs a:last-child { border-right: none; }
        .period-tabs a:hover { color: var(--text); }
        .period-tabs a.active { background: var(--accent); color: var(--accent-text); }

        .stat .sub { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
        .delta { font-size: 12.5px; font-weight: 600; margin-top: 8px; }
        .delta.good { color: #1A7F4B; }
        .delta.bad { color: #B3261E; }
        .delta.flat { color: var(--text-muted); font-weight: 500; }
        [data-theme="dark"] .delta.good { color: #4ADE80; }
        [data-theme="dark"] .delta.bad { color: #FF6B6B; }

        .compare-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 20px; margin-bottom: 28px; }
        .compare-title { font-size: 13.5px; font-weight: 600; margin-bottom: 16px; }
        .compare-title span { font-weight: 400; color: var(--text-muted); margin-left: 6px; }
        .cmp-row { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: center; margin-bottom: 14px; }
        .cmp-name { font-size: 13px; font-weight: 500; }
        .bar-line { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
        .bar-track { flex: 1; }
        .bar { height: 10px; border-radius: 3px; min-width: 2px; }
        .bar.cur { background: var(--accent); }
        .bar.prev { background: var(--border); }
        .bar-value { font-size: 12.5px; color: var(--text-muted); min-width: 90px; text-align: right; }
        .legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); margin-top: 6px; }
        .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
        .ratio { font-size: 12.5px; color: var(--text-muted); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
    </style>

    @php
        $money = fn ($v) => ($v < 0 ? '-' : '') . '$' . number_format(abs($v), 2);

        $boxes = [
            ['title' => 'Income',     'value' => $income,   'prev' => $prevIncome,   'delta' => $deltas['income'],   'goodWhenUp' => true,  'sub' => $salesCount . ' sales'],
            ['title' => 'Expenses',   'value' => $expenses, 'prev' => $prevExpenses, 'delta' => $deltas['expenses'], 'goodWhenUp' => false, 'sub' => null],
            ['title' => 'Net profit', 'value' => $net,      'prev' => $prevNet,      'delta' => $deltas['net'],      'goodWhenUp' => true,  'sub' => null],
        ];

        $barMax = max($income, $expenses, $prevIncome, $prevExpenses, 0.01);
    @endphp

    <div class="top-actions">
        <h1 style="margin:0;">Dashboard</h1>
        <a href="{{ route('admin.expenses.index') }}" class="btn secondary">Manage expenses</a>
    </div>

    <div class="period-tabs">
        <a href="{{ route('admin.dashboard', ['period' => 'today']) }}" class="{{ $period === 'today' ? 'active' : '' }}">Today</a>
        <a href="{{ route('admin.dashboard', ['period' => 'week']) }}"  class="{{ $period === 'week' ? 'active' : '' }}">Week</a>
        <a href="{{ route('admin.dashboard', ['period' => 'month']) }}" class="{{ $period === 'month' ? 'active' : '' }}">Month</a>
        <a href="{{ route('admin.dashboard', ['period' => 'year']) }}"  class="{{ $period === 'year' ? 'active' : '' }}">Year</a>
    </div>

    {{-- Income | Expenses | Net profit, side by side --}}
    <div class="stat-row">
        @foreach ($boxes as $box)
            <div class="stat">
                <div class="label" style="margin:0 0 6px;">{{ $box['title'] }}</div>
                <div class="num">{{ $money($box['value']) }}</div>

                @if ($box['delta'] === null)
                    <div class="delta flat">New &mdash; nothing to compare with {{ $prevLabel }}</div>
                @elseif ($box['delta'] == 0)
                    <div class="delta flat">No change vs {{ $prevLabel }}</div>
                @else
                    @php $isGood = ($box['delta'] > 0) === $box['goodWhenUp']; @endphp
                    <div class="delta {{ $isGood ? 'good' : 'bad' }}">
                        {{ $box['delta'] > 0 ? '▲' : '▼' }} {{ abs($box['delta']) }}% vs {{ $prevLabel }}
                    </div>
                @endif

                <div class="sub">
                    {{ ucfirst($prevLabel) }}: {{ $money($box['prev']) }}
                    @if ($box['sub']) &middot; {{ $box['sub'] }} @endif
                </div>
            </div>
        @endforeach
    </div>

    {{-- Comparison bars --}}
    <div class="compare-card">
        <div class="compare-title">Income vs Expenses <span>{{ $periodLabel }} compared with {{ $prevLabel }}</span></div>

        @foreach ([['Income', $income, $prevIncome], ['Expenses', $expenses, $prevExpenses]] as [$name, $cur, $prev])
            <div class="cmp-row">
                <div class="cmp-name">{{ $name }}</div>
                <div>
                    <div class="bar-line">
                        <div class="bar-track"><div class="bar cur" style="width: {{ ($cur / $barMax) * 100 }}%"></div></div>
                        <div class="bar-value">{{ $money($cur) }}</div>
                    </div>
                    <div class="bar-line">
                        <div class="bar-track"><div class="bar prev" style="width: {{ ($prev / $barMax) * 100 }}%"></div></div>
                        <div class="bar-value">{{ $money($prev) }}</div>
                    </div>
                </div>
            </div>
        @endforeach

        <div class="legend">
            <span><i style="background:var(--accent);"></i>{{ $periodLabel }}</span>
            <span><i style="background:var(--border);"></i>{{ ucfirst($prevLabel) }}</span>
        </div>

        <div class="ratio">
            @if ($income > 0)
                Expenses are {{ round(($expenses / $income) * 100) }}% of income {{ strtolower($periodLabel) }}.
            @else
                No income recorded {{ strtolower($periodLabel) }} yet.
            @endif
        </div>
    </div>

    <h1 style="font-size:15px;">Recent sales</h1>
    <table>
        <tr>
            <th>Invoice</th>
            <th>Pump</th>
            <th>Fuel</th>
            <th>Liters</th>
            <th>Total</th>
            <th>Cashier</th>
            <th>Time</th>
        </tr>
        @forelse ($recentSales as $sale)
            <tr>
                <td><a href="{{ route('admin.sales.show', $sale) }}" class="link">{{ $sale->invoice_number }}</a></td>
                <td>{{ $sale->pump->name }}</td>
                <td>{{ $sale->pump->fuelType->name }}</td>
                <td>{{ number_format($sale->liters, 2) }}</td>
                <td>${{ number_format($sale->total, 2) }}</td>
                <td>{{ $sale->cashier->name }}</td>
                <td>{{ $sale->created_at->format('d/m H:i') }}</td>
            </tr>
        @empty
            <tr><td colspan="7">No sales yet.</td></tr>
        @endforelse
    </table>
@endsection