@extends('layouts.app')

@section('title', 'Dashboard')

@section('body')
<div class="shell">
    @include('partials.sidebar', ['active' => 'dashboard'])
    <main class="main">
        @include('partials.topbar', ['heading' => 'Ringkasan operasional'])
        <div class="content">
            <div class="page-head">
                <div><h2>Selamat datang, {{ Auth::user()->name }} 👋</h2><p>Berikut ringkasan aktivitas Warnet Cafe hari ini.</p></div>
                <span class="badge badge-green">{{ now()->translatedFormat('l, d F Y') }}</span>
            </div>
            @include('partials.flash')
            <div class="grid stats">
                <section class="card"><span class="stat-icon">▣</span><div class="stat-label">Total komputer</div><div class="stat-value">{{ $computerCount }}</div><div class="stat-note">Unit terdaftar</div></section>
                <section class="card"><span class="stat-icon" style="background:#e9f7f2;color:#138a68">◉</span><div class="stat-label">Komputer tersedia</div><div class="stat-value">{{ $availableCount }}</div><div class="stat-note">Siap digunakan</div></section>
                <section class="card"><span class="stat-icon" style="background:#fff6e6;color:#b7791f">◷</span><div class="stat-label">Sesi sedang berjalan</div><div class="stat-value">{{ $activeRentals->count() }}</div><div class="stat-note">Komputer sedang disewa</div></section>
                <section class="card"><span class="stat-icon" style="background:#fff0f1;color:#d84e5e">↗</span><div class="stat-label">Pendapatan hari ini</div><div class="stat-value" style="font-size:21px">Rp {{ number_format($todayRevenue, 0, ',', '.') }}</div><div class="stat-note">{{ $todayTransactions }} transaksi tercatat</div></section>
            </div>
            <div class="grid columns">
                <section class="card">
                    <h3 class="card-title">Sesi sewa aktif <a class="btn btn-sm btn-outline" href="{{ route('computers.index') }}">Kelola komputer →</a></h3>
                    @if ($activeRentals->isEmpty())<div class="empty"><strong>Belum ada sesi aktif</strong>Sesi yang sedang berjalan akan muncul di sini.</div>
                    @else
                    <div class="table-wrap"><table><thead><tr><th>Komputer</th><th>Pelanggan</th><th>Tarif</th><th>Mulai</th><th>Durasi</th></tr></thead><tbody>
                    @foreach ($activeRentals as $rental)
                        <tr><td><strong>{{ $rental->computer->code }}</strong><div class="muted">{{ $rental->computer->name }}</div></td><td>{{ $rental->customer_name ?: 'Pelanggan umum' }}</td><td>Rp {{ number_format($rental->rate->hourly_rate, 0, ',', '.') }}/jam</td><td>{{ $rental->started_at->format('H:i') }}</td><td><span class="running-timer" data-start="{{ $rental->started_at->timestamp }}">00:00:00</span></td></tr>
                    @endforeach
                    </tbody></table></div>
                    @endif
                </section>
                <section class="card">
                    <h3 class="card-title">Aktivitas terbaru <a href="{{ route('reports.index') }}" class="muted" style="font-size:11px">Semua transaksi →</a></h3>
                    @if ($recentSales->isEmpty())<div class="empty"><strong>Belum ada transaksi</strong>Transaksi baru akan tampil di sini.</div>
                    @else<div class="table-wrap"><table style="min-width:0"><thead><tr><th>Jenis</th><th>Waktu</th><th>Total</th></tr></thead><tbody>@foreach ($recentSales as $sale)<tr><td><span class="badge {{ $sale->type === 'cafe' ? 'badge-amber' : 'badge-green' }}">{{ $sale->type === 'cafe' ? 'Cafe' : 'Sewa' }}</span></td><td>{{ $sale->occurred_at->format('d/m H:i') }}</td><td><strong>Rp {{ number_format($sale->total, 0, ',', '.') }}</strong></td></tr>@endforeach</tbody></table></div>@endif
                </section>
            </div>
        </div>
    </main>
</div>
<script>
    const refreshTimers = () => document.querySelectorAll('.running-timer').forEach((timer) => {
        const seconds = Math.max(0, Math.floor(Date.now() / 1000 - Number(timer.dataset.start)));
        timer.textContent = [Math.floor(seconds / 3600), Math.floor(seconds % 3600 / 60), seconds % 60].map((value) => String(value).padStart(2, '0')).join(':');
    });
    refreshTimers();
    setInterval(refreshTimers, 1000);
</script>
@endsection