@extends('layouts.main')

@section('title', 'Dashboard')

@section('content')
<div class="container-fluid">
    {{-- Baris Statistik --}}
    <div class="row g-3 mb-4">
        <div class="col-md-4">
            <div class="card shadow-sm border-0 bg-primary text-white p-3 text-center">
                <small class="fw-bold">TOTAL KAMAR</small>
                <h2 class="mb-0 fw-bold">{{ $total_kamar }}</h2>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card shadow-sm border-0 bg-success text-white p-3 text-center">
                <small class="fw-bold">TERISI</small>
                <h2 class="mb-0 fw-bold">{{ $kamar_terisi }}</h2>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card shadow-sm border-0 bg-secondary text-white p-3 text-center">
                <small class="fw-bold">KOSONG</small>
                <h2 class="mb-0 fw-bold">{{ $kamar_kosong }}</h2>
            </div>
        </div>
    </div>

    {{-- Laporan Tahunan --}}
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-header bg-white py-3">
            <h5 class="mb-0 fw-bold text-primary">Laporan Pendapatan Tahunan</h5>
        </div>
        <div class="card-body">
            {{-- Data disimpan di sini agar aman dari error VS Code --}}
            <div id="chart-data" 
                 data-labels="{{ $income_labels->toJson() }}" 
                 data-values="{{ $income_data->toJson() }}">
                <canvas id="incomeChart" style="height: 300px;"></canvas>
            </div>
        </div>
    </div>

    {{-- Aktivitas Terakhir --}}
    <div class="card shadow-sm border-0">
        <div class="card-header bg-white py-3">
            <h5 class="mb-0 fw-bold text-primary">Aktivitas Terakhir Admin</h5>
        </div>
        <div class="card-body p-0">
            <ul class="list-group list-group-flush">
                @forelse($recent_activities as $log)
                <li class="list-group-item py-3 px-4 border-bottom">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0 fw-bold">{{ $log->user->name }}</h6>
                            <p class="mb-0 text-muted small">{{ $log->activity }}</p>
                        </div>
                        <small class="text-muted">{{ $log->created_at->diffForHumans() }}</small>
                    </div>
                </li>
                @empty
                <li class="list-group-item text-center py-4 text-muted">Belum ada aktivitas.</li>
                @endforelse
            </ul>
        </div>
    </div>
</div>

{{-- JavaScript --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const dataElement = document.getElementById('chart-data');
        if(!dataElement) return;

        const labels = JSON.parse(dataElement.getAttribute('data-labels'));
        const values = JSON.parse(dataElement.getAttribute('data-values'));

        const ctx = document.getElementById('incomeChart').getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Total Pendapatan (Rp)',
                    data: values,
                    backgroundColor: 'rgba(13, 110, 253, 0.7)',
                    borderColor: '#0D6EFD',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: { 
                        beginAtZero: true,
                        ticks: { callback: (value) => 'Rp ' + value.toLocaleString('id-ID') }
                    }
                }
            }
        });
    });
</script>
@endsection