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

@section('content')
{{-- Statistik ringkas --}}
<div class="row g-3 mb-3">
    <div class="col-6 col-lg-3">
        <div class="small-box bg-biru">
            <h3>{{ $totalItems }}</h3>
            <span>Total Barang</span>
            <i class="bi bi-boxes icon"></i>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="small-box bg-biru-muda">
            <h3>{{ $totalCategories }}</h3>
            <span>Kategori</span>
            <i class="bi bi-tags icon"></i>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="small-box" style="background:#f9a825">
            <h3>{{ $lowStockCount }}</h3>
            <span>Stok Menipis</span>
            <i class="bi bi-exclamation-triangle icon"></i>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="small-box" style="background:#e53935">
            <h3>{{ $outOfStockCount }}</h3>
            <span>Stok Habis</span>
            <i class="bi bi-x-octagon icon"></i>
        </div>
    </div>
</div>

<div class="row g-3 mb-3">
    <div class="col-md-6">
        <div class="card">
            <div class="card-body d-flex justify-content-between align-items-center">
                <div><div class="text-muted small">Total Masuk Hari Ini</div>
                    <h4 class="mb-0 text-success">+{{ number_format($todayIn) }}</h4></div>
                <i class="bi bi-box-arrow-in-down fs-1 text-success opacity-50"></i>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-body d-flex justify-content-between align-items-center">
                <div><div class="text-muted small">Total Keluar Hari Ini</div>
                    <h4 class="mb-0 text-danger">-{{ number_format($todayOut) }}</h4></div>
                <i class="bi bi-box-arrow-up fs-1 text-danger opacity-50"></i>
            </div>
        </div>
    </div>
</div>

{{-- FITUR: Menu / barang yang mau habis --}}
<div class="card mb-3">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="bi bi-exclamation-triangle-fill text-warning me-1"></i> Barang yang Perlu Restock (Stok ≤ Minimum)</span>
        <span class="badge bg-warning text-dark">{{ $lowStockCount }} item</span>
    </div>
    <div class="card-body p-0">
        @if($lowStockItems->isEmpty())
            <div class="p-4 text-center text-muted"><i class="bi bi-check-circle fs-3 d-block mb-2 text-success"></i>Semua stok aman.</div>
        @else
        <div class="table-responsive">
            <table class="table table-hover mb-0 align-middle">
                <thead><tr>
                    <th>Barang</th><th>Kategori</th><th class="text-center">Stok</th>
                    <th class="text-center">Minimum</th><th class="text-center">Status</th><th></th>
                </tr></thead>
                <tbody>
                @foreach($lowStockItems as $item)
                    <tr>
                        <td><strong>{{ $item->description }}</strong>
                            @if($item->brand_type)<br><small class="text-muted">{{ $item->brand_type }}</small>@endif
                        </td>
                        <td>{{ $item->category->name }}</td>
                        <td class="text-center"><strong>{{ $item->current_stock }}</strong> {{ $item->unit }}</td>
                        <td class="text-center">{{ $item->minimum_stock }}</td>
                        <td class="text-center"><span class="{{ $item->stockBadgeClass() }}">{{ ucfirst($item->stockStatus()) }}</span></td>
                        <td class="text-end">
                            <a href="{{ route('receipt.create') }}" class="btn btn-sm btn-success"><i class="bi bi-plus-lg"></i> Tambah Stok</a>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
        @endif
    </div>
</div>

{{-- Transaksi terbaru --}}
<div class="card">
    <div class="card-header"><i class="bi bi-clock-history me-1"></i> Transaksi Terbaru</div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-striped mb-0 align-middle">
                <thead><tr>
                    <th>Tgl & Jam</th><th>Barang</th><th class="text-center">Tipe</th>
                    <th class="text-center">Qty</th><th>Oleh</th><th>Keterangan</th>
                </tr></thead>
                <tbody>
                @forelse($recentTransactions as $t)
                    <tr>
                        <td><small>{{ $t->transaction_at->format('d/m/Y H:i') }}</small></td>
                        <td>{{ $t->item->description }}</td>
                        <td class="text-center"><span class="{{ $t->typeBadge() }}">{{ $t->type }}</span></td>
                        <td class="text-center">
                            @if($t->type==='RCD' || ($t->type==='ADJ' && $t->quantity>0))
                                <span class="text-success">+{{ abs($t->quantity) }}</span>
                            @else
                                <span class="text-danger">-{{ abs($t->quantity) }}</span>
                            @endif
                        </td>
                        <td><small>{{ $t->user->name }}</small></td>
                        <td><small class="text-muted">{{ $t->notes ?: '-' }}</small></td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="text-center text-muted py-3">Belum ada transaksi.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection